在 ECMAScript 2016(通常称为 ES7)中,引入了对象展开操作符(Object spread operator),一种新的操作符,用于简化对象和数组的创建和合并。该操作符提供了基于对象或数组的浅层复制和合并。
语法
对象展开操作符使用三个点 ...
作为前缀,表示将一个对象或数组拆开。
对象展开语法
----- --- - - ------ --------- ------ --------- -- ----- ------ - - ------- ------ --------- --
上述代码演示了展开对象的语法。展开操作符 ...obj
意味着将 obj
对象的属性逐个展开并将它们添加到新对象 newObj
的顶层。
数组展开语法
----- ---- - --- -- --- ----- ---- - --- -- --- ----- ------ - --------- ---------
上述代码演示了展开数组的语法。用 ...arr1
和 ...arr2
将两个数组中的元素一一展开,然后将它们合并为一个新的数组。
对象展开操作符的深入理解
对象展开操作符可以执行浅层复制和合并,但需要注意一些限制。
不可枚举属性
使用对象展开操作符时,不可枚举的属性将无法被复制。通常,不可枚举属性是一些内部属性,例如函数原型上的属性。
----- ------ - ----------------- ----- ---- - - ------ --------- --------- ---------- -- ----- ---- - - ------- -- ------------------ -- - ------ -------- -
注意,对象 obj2
中不包含 symbol
属性。
对象的更新
使用对象展开操作符时,如果有相同的属性名,则后面的值将覆盖前面的值。
----- ---- - - ------ --------- ------ -------- -- ----- ---- - - ------ ---- ------- ------ -------- -- ----- ------ - - -------- ------- -- -------------------- -- - ------ --------- ------ ---- ------- ------ -------- -
在新对象 newObj
中,obj1
中的 prop2
属性值被 obj2
中的 prop2
属性值所覆盖。因此,新对象中 prop2
属性的值为 new value
。
修改原始对象
当使用对象展开操作符时,不会修改原始对象。展开操作符只是将原始对象的属性复制到新对象中。
----- ---- - - ------ --------- ------ -------- -- ----- ---- - - -------- ------ -------- -- ------------------ -- - ------ --------- ------ -------- - ------------------ -- - ------ --------- ------ --------- ------ -------- -
在上面的代码示例中,原始对象 obj1
保持不变,而 obj2
是一个新对象,它包含 obj1
的复制和添加的属性 prop3
。
用例
对象展开操作符可以用于各种用例,例如:
创建新的对象
----- ---- - - ------ --------- ------ -------- -- ----- ---- - - ------ -------- -- ----- ------ - - -------- ------- -- -------------------- -- - ------ --------- ------ --------- ------ -------- -
浅层复制对象
----- ---- - - ------ --------- ------ -------- -- ----- ---- - - ------- -- ------------------ -- - ------ --------- ------ -------- -
更新旧的变量
--- ----- - - ------ -- ---------- ------- -- ----- -------- - - --------- ------ ----------- - -- -- ----- - --------- ------------------- -- - ------ -- ---------- ------- -
在上面的代码示例中,我们使用对象展开操作符对旧状态进行了浅层复制,并将新值 count
添加到对象中。然后,我们更新了变量 state
,使其引用新的复制状态。
总结
对象展开操作符是 ES7 引入的新语法,用于简化对象和数组的创建和合并。该操作符提供了基于对象或数组的浅层复制和合并。通过对象展开操作符,我们可以创建新对象,浅层复制对象,更新旧变量等,从而更方便地执行各种操作。但需要注意,对象展开操作符只执行浅层复制和合并,不能复制不可枚举的属性。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/651dfcbe95b1f8cacd5a8234