在 ECMAScript 2018 (也就是 ES9)中,新增了 Object Rest/Spread Properties (对象的 rest/spread 属性)这一特性。它也称为对象的扩展语法,可以当做对象的拷贝、合并、分解使用。在前端的开发中,我们会经常用到对象的处理,本文将为大家详细介绍 Object Rest/Spread Properties 这个新特性,并通过示例代码来展示如何使用。
Rest Properties
Rest Properties(剩余参数)可以将对象的剩余部分抽离出来,作为独立的对象。在函数的参数中使用时,非常适合解决对象的合并问题。以下是 Rest Properties 的基本语法:
let { prop1, prop2, ...rest } = obj; // 或 let { [propKey]: val, ...rest } = obj;
其中 obj
为常规对象,prop1
、prop2
为对象中的属性名,rest
则是包含所有其他属性的对象。
下面通过一个示例来演示 Rest Properties 的使用:
let obj = { a: 1, b: 2, c: 3 }; let { a, ...rest } = obj; console.log(a); // 1 console.log(rest); // { b: 2, c: 3 }
以上示例中,a
是一个局部变量,它的值为 obj.a 的值;rest
是另外的一个对象,包含了 obj 中除了 a
属性以外的其他属性。
还可以使用 Rest Properties 来作为函数参数的一部分,从而解决合并对象的问题。例如:
-- -------------------- ---- ------- -------- -------------------- ----------- - ---------------------- -- - --- ---- --- -- ------- - ----------- - ------------ - -- ------ ------- - --- ---- - - -- -- -- - -- --- ---- - - -- -- -- - -- ---------------------------- ----- ------- -- - -- -- -- -- -- -- -- - -
以上示例中,mergeObjects
函数在其参数 sources
前加了一个 ...
,从而将所有后续的参数收集成了一个数组。然后就可以通过遍历 sources 数组来将其所有成员的属性合并到 target 对象中。
Spread Properties
Spread Properties(扩展参数),则相对于 Rest Properties,它允许将一个对象中的所有属性直接展开放到另外一个对象中。以下是 Spread Properties 的基本语法:
let obj1 = { a: 1, b: 2 }; let obj2 = { ...obj1 };
以上示例就是在将 obj1 对象的所有属性展开到了 obj2 前。这种语法可以方便地进行对象克隆的操作。如果在展开对象时,还可以将新的属性合并到展开的对象中。以下是一个示例:
let obj1 = { a: 1, b: 2 }; let obj2 = { c: 3, ...obj1 }; console.log(obj2); // { c: 3, a: 1, b: 2 }
以上示例将 obj1 展开到 obj2 后,又额外定义了 { c: 3 }
,再次得到了一个全新的对象,包括了 obj1 和新属性 { c: 3 }
。
总结
Object Rest/Spread Properties 特性为开发人员提供了更多灵活的对象操作方式,使得对象在合并、拷贝等处理场景下更加方便和高效。现代前端开发中,这个特性也已经越来越被广泛应用。
参考文献
- Object Rest/Spread Properties, by Axel Rauschmayer
- Understanding ES6: Object rest and spread operators
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64e06a1ef6b2d6eab3b7e415