福建住房和城乡建设部网站宁波网络推广团队

ES6中提出的对象展开运算符“…”就是用来展开元素的。有了它就不用代码循环遍历了，偷懒专用。

1. 合并数组

展开原有数组中的所有元素，可以合并成一个新的数组。

var a=[1,2,3];
var b=[4,5,6];
var c=[...a,...b];
console.log(c) // 输出：[1, 2, 3, 4, 5, 6]
console.log(a) // 输出：[1, 2, 3]
console.log(b) // 输出：[4, 5, 6]

2. 合并对象

展开对象中的所有属性，可以合并成一个新的对象。

var person = {name: '小明',age: 18,sex: '男',
};
var hobby = {play: '篮球',like: '吃饭、睡觉、打游戏',
};
var xiaoMing = {...person,...hobby};
console.log(xiaoMing); // { name: '小明', age: 18, sex: '男', play: '篮球', like: '吃饭、睡觉、打游戏' }

当对象中包含同名参数时，后面的会把前面的同名属性覆盖掉。

// 接上面的代码
var xiaoGang = {...person,...hobby,...{name:'小刚',play:'足球'},
};
console.log(xiaoGang); // { name: '小刚', age: 18, sex: '男', play: '足球', like: '吃饭、睡觉、打游戏' }

3. 对象展开运算符是浅拷贝还是深拷贝？

先来了解下，浅拷贝和深拷贝各自的含义。

数据可以分为两大类：一类是基本数据，一类是引用数据；而数据存储位置又可分为栈和堆。

基本数据：存储在栈中，

引用数据：栈中存储了一个地址，这个地址指向堆中的真实数据。

由此：

浅拷贝：在栈中新开辟了一个空间，复制的是栈中的地址，改地址指向的依旧是原来堆的数据。

深拷贝：在栈和堆中均重新开辟了空间，新的地址指向的是新的数据，老地址指向的是老数据，所以无论新旧数据哪个发生变化，都不会影响另一个。

下面看一个浅拷贝的例子：

var person = {name: '小明',age: 18,sex: '男',
}var xiaoHong = person; // 这里只是将引用变量person1给了xiaoHong
xiaoHong.name = '小红';console.log(person) // 输出：{name: "小红", age: 18, sex: "男"}
console.log(xiaoHong)// 输出：{name: "小红", age: 18, sex: "男"}

由上面的例子，很清楚的看到：当xiaoHong的name属性值变化了之后，person的name属性值也发生变化了，所以两个对象指向的是同一个数据区域，是浅拷贝。

那么对象展开运算符是浅拷贝还是深拷贝呢?看下面例子：

var person = {name: '小明',age: 18,sex: '男',
}var xiaoHong = {...person}
xiaoHong.name = '小红';console.log(person) // 输出： {name: "小明", age: 18, sex: "男"}
console.log(xiaoHong)// 输出： {name: "小红", age: 18, sex: "男"}

诶？用对象展开符的xiaoHong的name属性变化了之后，person的name属性没有变化呀！难道对象扩展符是深拷贝？别急，往下看。

再看下面的例子，对象中包含着第二层数据对象。

var person = {name: '小明',age: 18,sex: '男',hobby: {play: '篮球',like: '吃饭、睡觉、打游戏',}
}var xiaoHong = {...person}
xiaoHong.name = '小红';
xiaoHong.hobby.play = '羽毛球';console.log(person);   // 输出： {name: "小明", age: 18, sex: "男", hobby: {music: "羽毛球",like: "吃饭、睡觉、打游戏"}}
console.log(xiaoHong); // 输出： {name: "小红", age: 18, sex: "男", hobby: {music: "羽毛球",like: "吃饭、睡觉、打游戏"}}

对比新旧两个对象的输出：

      针对name属性： 旧对象没受到影响；针对hobby.play属性：旧对象跟随变化了。

由此可证明对象展开运算符并不是深拷贝，也是浅拷贝，但第一层又不是浅拷贝。

我感觉可以这么理解：

对象展开预算符相当于展开遍历了对象的第一层数据，第一层数据如果是基本数据，就是简单的值；第一层数据若是引用数据，就是浅拷贝。