es6之展开运算符详解

展开运算符

展开spread或称为扩展运算符是 ... 三个点形式

用于函数参数

用于函数参数，被称为rest 参数（rest：剩余），函数参数不确定时，每个函数最多只能声明一个不定参数，而且一定要放在末尾。rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments 对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

//函数可变参数
let arr=[1,2,3];
function plus(array, ...items) {
	//items是个数组，push还需要展开元素
	array.push(...items);
}
plus(arr,55,66,77,88);
console.log(arr); //结果：[1, 2, 3, 55, 66, 77, 88]

用于解构赋值

//与解构赋值结合
let [a,...b] = [7, 8, 9];
console.log(a,b); //结果: 7,[8,9]

用于复制数组

//复制数组
let arr1 = ["as", "se", "vd"];

//错误方法
let arr2 = arr1;
console.log(arr1===arr2)//true 引用数据类型
//传统方法 使用concat合并数组
let arr3=arr1.concat();
console.log(arr1===arr3)//false

//新方法（可以同时添加新属性）
let arr4 = [...arr1,'hx'];
console.log(arr1===arr4);//false

用于复制对象

//复制对象
let obj={"name":"zhangsan","age":18}
//传统方法
let new_obj={};
for(let key in obj){
new_obj[key]=obj[key];
}
//新方法（可以同时添加新属性）
let new_obj={...obj,"city":"beijing"};
console.log(new_obj)//结果： {name:"zhangsan",age:18,city: "beijing"}

复制对象的限制（重点）

展开运算符复制对象时，只进行了一层深拷贝，如果对象中的某个属性值是引用类型，那么对这个属性值只进行浅拷贝。这会导致当拷贝对象中的引用类型数据变动是被复制对象的引用类型数据也会变动变动。

let obj1 = {
  attri1: [б, 6, 0],
  attri2: 4,
  attri4: 5
}
let obj2 = {...obj1}
console.log('obj2: ', obj2)
obj2.attri2 = 888 
obj2.attri1[0] = 7
// obj2.attri1 = [8, 8, 8, 8]
console.log('obj1:', obj1)
console.log('obj2:', obj2)

拷贝详解