js中的展开运算符(扩展运算符)

---

前言

我们现在经常接触到js的一个…运算符，被称为展开运算符由于我对这个不是很熟练所以，打算写下一篇小文章记录一下

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、…对于数组的用法

           let arr=[1,2,3]
      // 展开一个数组
      console.log(...arr)

      console.log("-----------");
      // 复制一个数组，也称为拷贝数组
      let arr2=[...arr]
      arr2.push(4);
      // 并且不会对arr造成影响
      console.log("arr",arr);
      console.log("arr2",arr2);
      
      console.log("-----------");
      
      // 连接数组
      let arr3=[...arr,...arr2] 
      console.log(arr3);
      

二、…在函数中的使用

 //对于不确定传多少个值也可以使用扩展运算符
      function add(...numbers) { 
        return numbers
       }
      // 这样在你传值的时候可以一直增加，从此再也不用关心形参的多少！
       console.log(add(1,2,3,4,5));

如果我们要对这个numbers操作，需要了解一些js对于数组的操作，reduce，filter巴拉巴拉的，有时间也会更新一篇的。

三、…对于对象的使用

首先强调一点，扩展运算符不能直接用于对象，也就是不用去想展开对象

虽然代码上并没有报错，但是控制台并不能输出

所以我们可以构造字面量对象时使用展开语法

      var obj1 = { foo: 'yuan', x: 42 };
      var obj2 = { foo: 'li', y: 13 };
    
      // 克隆对象一定要加上{}
      var clonedObj = { ...obj1 };
      console.log("克隆后的对象",clonedObj);
      console.log("-----------");
      // 同样的修改复制后的并不会影响原来的对象
      clonedObj.foo="ss"
      console.log("clonedObj",clonedObj);
      console.log("obj1",clonedObj);
      console.log("-----------");
      
      // 合并后的对象:
      var mergedObj = { ...obj1, ...obj2}
      console.log("合并后的对象",mergedObj);
      
      console.log("-----------");
      // 当然也可以在合并时添加新的属性
      var mergedObj = { ...obj1, ...obj2,address:"上海"}
      console.log("合并后的对象",mergedObj)

---

总结

以上就是对扩展语法的一些细小的总结.