js 扩展运算符的作用及使用场景

1 数组扩展运算符

    <script>
        //...扩展运算符能将[数组]转换为逗号分隔的参数序列
        //声明一个数组
        const body = ["李永峰", "周杰伦", "邓紫棋"]

        // =>"李永峰", "周杰伦", "邓紫棋"
        //声明一个函数

        function add(a) {
            console.log(a) //是个数组
        }
        add(body)
            //用扩展运算符
        function adds(a, d, b) {
            console.log(a, d, b)

        }
        adds(...body) //"李永峰", "周杰伦", "邓紫棋"


        //扩展运算符可以：

        //1.数组的合并 ES5的方法：concat()
        const res = ["wei", "wei", "hao"]
        const we = ["wei2.0", "wei2.0", "hao2.0"]
        let eu = res.concat(we)
        console.log(eu)

        //2.ES6的方法：用扩展运算符...合并数组
        const res_ONE = ["wei", "wei", "hao"]
        const we_ONE = ["wei3.0", "wei3.0", "hao3.0"]
        const hb = [...res_ONE, ...we_ONE]
        console.log(hb)


        //2.数组的浅拷贝
        const res_two = ["wei", "wei", "hao"]
        const we_two = [...res_two]
        console.log(we_two)

        //3.将伪数组转为真正的数组
        var duv = document.querySelectorAll("div")
        console.log(duv)
        let fie = [...duv]
        console.log(fie)
      // 4.将字符串转为真正的数组
       [...'hello']    // [ "h", "e", "l", "l", "o" ]
    </script>

2对象扩展运算符 对象的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

同样，如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉。

let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}};  // {a: 2, b: 4}

3. 对 rest 参数的理解 扩展运算符被用在函数形参上时，它还可以把一个分离的参数序列整合成一个数组

function mutiple(...args) {
console.log(args) // [1,2,3,4]
  let result = 1;
  for (var val of args) {
    result *= val;
  }
  return result;
}
mutiple(1, 2, 3, 4) // 24