ES6中 … 运算符实现原理

专业术语名称：扩展运算符

展示形式：…

主要功能之对象： 用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let demoArr =  { a: 1, b: 2 } ;
let demoArr2 = { ... demoArr  }; // { a: 1, b: 2 } 
let demoArr3 = Object.assign({}, demoArr ); // { a: 1, b: 2 }

这里demoArr2 和 demoArr3 等价的，Object.assign的方法就是用于对象合并。但扩展运算符的拷贝属于浅复制

主要功能之数组：将数组转换为参数序列或者复制数组或者合并数组

console.log(...[1, 2, 3])
// 1 2 3

console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5

 也可以用于函数调用

function add(array, ...item){
   console.log(..item);
}

这样写，add函数支持，1个或者多个参数传入，方便扩展

浅复制：不是赋值是引用，新的对象属性值变更会影响到原来的对象属性

深复制：是赋值不是引用，新的对象属性值变更不会影响到原来的对象属性

造成的原因：浅复制只复制一层对象的属性，而深复制则递归复制了所有层级。

浅复制只会将对象的各个属性进行依次复制，并不会进行递归复制，而 JavaScript 存储对象都是存地址的，所以浅复制会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址，大概的示意图如下。

而深复制则不同，它不仅将原对象的各个属性逐个复制出去，而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。