ES6中提出的对象展开运算符“…”就是用来展开元素的。有了它就不用代码循环遍历了,偷懒专用。
1. 合并数组
展开原有数组中的所有元素,可以合并成一个新的数组。
javascript">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. 合并对象
展开对象中的所有属性,可以合并成一个新的对象。
javascript">var person = {
name: '小明',
age: 18,
sex: '男',
};
var hobby = {
play: '篮球',
like: '吃饭、睡觉、打游戏',
};
var xiaoMing = {...person,...hobby};
console.log(xiaoMing); // { name: '小明', age: 18, sex: '男', play: '篮球', like: '吃饭、睡觉、打游戏' }
当对象中包含同名参数时,后面的会把前面的同名属性覆盖掉。
javascript">// 接上面的代码
var xiaoGang = {
...person,
...hobby,
...{name:'小刚',play:'足球'},
};
console.log(xiaoGang); // { name: '小刚', age: 18, sex: '男', play: '足球', like: '吃饭、睡觉、打游戏' }
3. 对象展开运算符是浅拷贝还是深拷贝?
先来了解下,浅拷贝和深拷贝各自的含义。
数据可以分为两大类:一类是基本数据,一类是引用数据;而数据存储位置又可分为栈和堆。
基本数据:存储在栈中,
引用数据:栈中存储了一个地址,这个地址指向堆中的真实数据。
由此:
浅拷贝:在栈中新开辟了一个空间,复制的是栈中的地址,改地址指向的依旧是原来堆的数据。
深拷贝:在栈和堆中均重新开辟了空间,新的地址指向的是新的数据,老地址指向的是老数据,所以无论新旧数据哪个发生变化,都不会影响另一个。
下面看一个浅拷贝的例子:
javascript">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属性值也发生变化了,所以两个对象指向的是同一个数据区域,是浅拷贝。
那么对象展开运算符是浅拷贝还是深拷贝呢?看下面例子:
javascript">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属性没有变化呀!难道对象扩展符是深拷贝?别急,往下看。
再看下面的例子,对象中包含着第二层数据对象。
javascript">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属性:旧对象跟随变化了。
由此可证明对象展开运算符并不是深拷贝,也是浅拷贝,但第一层又不是浅拷贝。
我感觉可以这么理解:
对象展开预算符相当于展开遍历了对象的第一层数据,第一层数据如果是基本数据,就是简单的值;第一层数据若是引用数据,就是浅拷贝。