JavaScript 扩展运算符介绍 【通俗易懂系列 2】

目录

1. 数组拆分为序列

2. 也可以直接输出 直接拆分为序列

3. 扩展运算符 合并数组

4. 扩展运算符转化 伪数组

5. 扩展运算符 和 forEach some

---

1. 数组拆分为序列

如下，变量和数组里面的值的顺序一一对应好。

        const arr = ['aa', 'bb', 'cc'];
        let [a, b, c] = [...arr];
        console.log(a); // aa
        console.log(b); // bb
        console.log(c); // cc

2. 也可以直接输出 直接拆分为序列

输出在一行显示

        console.log(...arr); // aa bb cc

3. 扩展运算符 合并数组

        const arr2 = [1, 2, 3];
        const arr3 = [4, 5, 6];
        let arr4 = [...arr2, ...arr3];
        console.log(arr4); //  [1, 2, 3, 4, 5, 6]

上面是声明新变量合并两个数组。

利用push方法合并数组

        arr2.push(...arr3);
        console.log(arr2); // [1, 2, 3, 4, 5, 6]

注意： push方法没有结合扩展运算符时，一个数组 push进另外一个数组 结果是二维数组

        const ary1 = [1, 2];
        const ary2 = [3, 4];
        ary1.push(ary2);
        console.log(ary1);

4. 扩展运算符转化 伪数组

    <div>123</div>
    <div>123</div>
    <div>123</div>

        var divs = document.querySelectorAll("div");
        console.log(divs);
        console.log(divs instanceof Array); // false
        // divs.push(1); 报错
        const ary3 = [...divs];
        ary3.push(123);
        console.log(ary3); //  [div, div, div, 123]

注意： 伪数组没有push方法，关注上面divs.push报错的代码。

转伪数组 -> 数组 就有push方法

5. 扩展运算符 和 forEach some

        const fn = (...ary4) => {
            ary4.forEach(a => {
                console.log(a);
            })
        }
        const fn2 = (...ary4) => {
            ary4.some((b) => {
                console.log(b);
            })
        }
        fn(44, 33, 22, 11); // 依次换行打印  44 33 22 11

        fn2(99, 88, 77, 66, 100); // 依次换行打印 99 88 77 66 100

解释： 注意观察 传参fn和fn2() 调用时，传入的参数是不确定的情况，函数里面直接写一个...ary4，ary4是任意的形参，这样就不用担心产生实参和形参个数不同的问题了。

结尾：

学习id： 201903090124-47

现在是大三学生，学习到了vue阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处

如果要转载，请通知俺，并声明出处。