javascript 小技巧汇总

1、ES7 Array.includes()

• 判断数组中是否包含某一个值，返回 Boolean

    {
        const arr = [1, 2, 3, 4, 5];
        
        // 之前
        if (arr.indexOf(1) > -1) {
            // coding
        }
        
        // 之后
        if (arr.includes(1)) {
            // coding
        }
    }

2、ES8 Object.values()

• 返回对象中可枚举所有的 value

    {
        const obj = {
            name: 'coding',
            sex: '男'
        }
  
        // 之前
        let arr = []
        for (let i in obj) {
            arr.push(obj[i])
        }
        
        // 改进
        let arr = Object.values(obj)
    }

3、ES9 循环异步等待 （异步迭代器）

• for 循环中，使用异步等待

    {
        /*
          * 按照 arr 数组里面的方法顺序执行
        */
        let deplay = (timer) =>
          new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve(timer);
            }, timer);
          });
  
        let arr = [deplay(3000), deplay(5000), deplay(2000)];
        for (let item of arr) {
          item.then((res) => {
            console.log(res);   // 3000, 5000, 2000
          });
        }
    }

  疑惑？

  都异步等待了，为啥第一个 3000 执行完后，应该是在等 5000 再执行，但是感觉没有等 5s，而且后面的 2000 直接都没有等待

4、ES10 Array.flat()

• 将多维数组展开成一维数组

    {
        /**
         * flat 将多维数组拉平，返回新数组，不改变原数组
         * flat(argument)  argument 参数为嵌套的层数，默认只会展开一层，将参数设置为 Infinity, 可展开到最后一层
         */
        const arr = [
          [1, 2],
          [3, 4],
          [5, 6],
          [
            [7, 8],
            [9, 10],
          ],
        ];
  
        // 默认只会展开一层
        let openArr1 = arr.flat();
        console.log(openArr1);       // [1, 2, 3, 4, 5, 6, [7, 8], [9, 10]]
  
        // Infinity 正无穷，展开到最后一层
        let openArr2 = arr.flat(Infinity);
        console.log(openArr2); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }

5、ES11 可选链操作符

    {
        /**
         * 判断对象是否存在某一个属性
        */

        // 之前
        const name = obj && obj.name;
        // 改进
        const name = obj?.name

    }

6、ES11 空值合并运算符

• ??

• 左侧为 null || undefined 时，返回右侧操作符

    {
        /**
         * 判断一个值不为 null、undefined、""
        */
  
        // 之前
        if (val !== null && val !== undefined && val !== '') {
            // coding
        }
  
        // 改进
        if ((value??'') !== '') {
            // coding
        }
    }

7、ES11 空赋值运算符

• ??=

• 左侧为 null || undefined 时，执行赋值操作

    {
        // 之前
        let name = window.name ? window.name : ''
  
        // 改进
        let name = window.name ??= ''
    }