关于JS中的对象展开运算符“...”的一些思考

最近笔者在写vue的时候用到了JS中的新特性展开运算符(ES6、ES7新提出)。展开运算符的加入可以使我们在写JS代码时更加简洁灵活。可用于函数调用、解构赋值等方面。具体可以参考这篇博客:  ECMAScript 6学习笔记(一):展开运算符 。

今天笔者想说说对象展开运算符的使用,对象展开运算符提出于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,此时基本类型进行的是值传递,而引用类型进行的是引用传递

因此在这种情况下要谨慎使用对象展开符,其和一般的引用传递过程有一定的区别。 

参考: http://www.cnblogs.com/mingjiezhang/p/5903026.html

拓展运算符(spread operator)在JavaScript用三个连续的点(...)表示。它可以在函数调用、数组字面量和对象字面量使用,用于展开可迭代对象(如数组、字符串、Map、Set等)。 在函数调用,拓展运算符可以将一个数组展开为独立的参数传递给函数。例如: ```javascript function add(a, b, c) { return a + b + c; } const numbers = [1, 2, 3]; console.log(add(...numbers)); // 输出:6 ``` 在数组字面量,拓展运算符可以将一个数组的元素展开到另一个数组。例如: ```javascript const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5, 6]; console.log(arr2); // 输出:[1, 2, 3, 4, 5, 6] ``` 在对象字面量,拓展运算符可以将一个对象的属性展开到另一个对象。如果有相同的属性名,则后面的属性值会覆盖前面的。例如: ```javascript const obj1 = { a: 1, b: 2 }; const obj2 = { ...obj1, c: 3 }; console.log(obj2); // 输出:{ a: 1, b: 2, c: 3 } ``` 拓展运算符还可以用于克隆数组和对象,因为它创建了一个新的数组或对象副本。例如: ```javascript const originalArray = [1, 2, 3]; const newArray = [...originalArray]; console.log(newArray); // 输出:[1, 2, 3] const originalObject = { a: 1, b: 2 }; const newObject = { ...originalObject }; console.log(newObject); // 输出:{ a: 1, b: 2 } ``` 拓展运算符的应用还有很多,它可以简化代码并提高可读性。希望这个解答对你有帮助!如果你还有其他问题,请随时提问。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值