展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开。

1.展开语法

展开语法(Spread syntax), 可以在函数调用/数组构造时, 将数组表达式或者 string 在语法层面展开；还可以在构造字面量对象时, 将对象表达式按 key-value 的方式展开。

上面的文字可能有点晦涩难懂，简单来说：

• 展开操作符是三个点（...）
• 它可以应用到可迭代的对象上，例如数组或字符串。
• 它把可迭代对象展开为其内部的各个元素。
• 可以在函数调用时使用展开语法。

2.实例

<script>

    //可变长度参数
    function sum(x, y, z) {
        return x + y + z;
    }
    const numbers = [1, 2, 3];

    //在展开语法引入之前，是通过 apply 函数来实现的。
    //console.log(sum.apply(null, numbers));
    console.log(sum(...numbers));

    //数组的连接
    let arr1 = [0, 1, 2];
    let arr2 = [3, 4, 5]; // 将 arr2 中所有元素附加到 arr1 后面并返回
    //使用 concat 函数连接数组
    //let arr3 = arr1.concat(arr2);
    let arr3 = [...arr1, ...arr2];
    console.log(arr3)


    //数组的拷贝
    let srcArr = [1, 2, 3];
    let destArr = [...srcArr]; // 类似于 arr.slice()
    destArr.push(4);
    console.log(destArr);

    //对象合并
    let p1={name: 'zhangsan',gender:'男'};

    let p2 = {name: 'lisi', age:20,address: '北京'};

    let p3 = {
               ...p1,
               ...p2
             };

    console.log(p3);

    //避免破坏原有对象属性
    let car1 = {brand: 'BMW',color:'red',price:200000};
    let car2 = {brand: 'BENZ'}
    //这样直接赋值，会造成属性丢失。{brand: 'BENZ'}
    //car1 = car2;

    car1 = {
        ...car1,
        ...car2
    }
    console.log(car1);

</script>

总结：

我们看到了在很多场景下使用展开语法会很方便，而且可以减少代码量，让代码更加容易理解。