关于JS中的对象展开运算符“...”的⼀些思考
最近笔者在写vue的时候⽤到了JS中的新特性展开运算符（ES6、ES7新提出）。展开运算符的加⼊可以使我们在写JS代码时更加简洁灵活。可⽤于函数调⽤、解构赋值等⽅⾯。具体可以参考这篇博客：  。
js合并两个数组今天笔者想说说对象展开运算符的使⽤，对象展开运算符提出于ES7的草案之中，可以这样使⽤：
let shortcuts = {
attr1: 3,
attr2: 4
}
let shortcuts2 = {}
shortcuts2 = {...shortcuts}
上⾯的这种⽤法实际上相当于是：
shortcuts2 = {attr1: 3, attr2: 4}
这种写法有好多好处，⽐如可以合并对象或者将⼀个对象插⼊另外⼀个对象中去：
let a = { x: 1, y: 2 }
let b = { z: 3 }
let ab = { ...a, ...b }
ab // { x: 1, y: 2, z: 3 }
以及与shortcuts2 = shortcuts这种直接引⽤赋值写法的区别。我们知道对于引⽤类型来说赋值操作其实传递的只是这个对象的地址（粗浅的说），意味着如果按照shortcuts2 = shortcuts的写法的话当改变shortcuts2中的属性的值的话shortcuts也会同样改变。换⾔之shortcuts和shortcuts2两个变量指向了同⼀段内存地址。但是如果是 shortcuts2 = { ...shortcuts }，这样的写的话，由于shortcuts中的属性类型都是基本类型，相当于是新建了⼀个对象，此时改变shortcuts2中的属性值，shortcuts将不受影响——某种意义上实现了对象之间的深拷贝，但是仅限于其属性都为基本类型的情况（或者说只进⾏了⼀层的深拷贝），如果该对象中的属性还有引⽤类型的话，如下：
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)
obj是⼀个既包含引⽤类型⼜包含基本类型属性的对象，将其利⽤对象展开符赋值给obj2之后，修改obj2中的属性值
此时的输出结果是这样的：
obj2中的attri1数组中的第⼀个元素替换为7之后，obj1中的attri1也收到了影响，但attri2是基本类型不受影响：说明对象展开运算符本质上是将obj1中的属性按顺序赋值给了obj2，此时基本类型进⾏的是值传递，⽽引⽤类型进⾏的是引⽤传递
因此在这种情况下要谨慎使⽤对象展开符，其和⼀般的引⽤传递过程有⼀定的区别。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。