ECMAScript 2017 之 Object rest/spread 展开操作符
在 ECMAScript 2015 发布以后,JavaScript 社区对于这门语言的现代化更新和对新特性的期待越来越高。ECMAScript 2017 新增的 Object rest/spread 展开操作符,是其中一个令人激动的特性。在这篇文章中,我们将详细介绍这个新特性,并为你提供一些实用方法和示例代码。
什么是 Object rest/spread 展开操作符?
Object rest/spread 展开操作符是 ECMAScript 2017 版本引入的一种新语法。它提供了一种便捷的方式可以很方便的将对象的属性快速解构或者合并到另一个对象中。这个操作符被定义为三个点(...),可以用于对象字面量的任意位置。
在这个语法中,Rest 属性用于从现有对象中快速创建一个新对象。它允许我们将传递给方法的多个属性绑定到一个新对象中。
另一方面,Spread 属性是将对象中的所有属性解构并将它们合并到新的对象中。这就是为什么它通常被称为 object spread。
其实这两个操作符也可以用于数组和函数的参数上。但今天我们只谈 Object 展开操作符。
Rest 属性
Rest 属性将对象的剩余属性集合成一个新的对象。在对象字面量内部使用三个点(...)和一个变量名就可以实现。
比如说,我们可以创建一个 Person 对象,并将所有剩余属性放入一个名为 others 的新对象中。代码如下:
const person = { name: 'Sam', age: 28, gender: 'Male', occupation: 'Engineer'}; const { name, age, ...others } = person;
在这里,Rest 属性将对象中除了 name 和 age 以外的其他属性赋值给了一个名叫 others 的新对象。
现在,我们可以在控制台中输出 others 的值,看一下它是如何返回对象的属性。
console.log(others); // { gender: 'Male', occupation: 'Engineer' }
由于使用了 Rest 属性,我们可以非常方便地创建一个新对象,并将所有剩余属性合并到该对象中。
Spread 属性
Spread 属性是解构整个对象,并将它的属性复制到另一个新的对象中。这与使用 Object.assign() 方法实现的效果相同。
现在,假设我们有两个具有相同属性的对象。让我们用 Object spread 将它们合并到一个新的对象中。代码如下:
const person1 = { name: 'Sam', age: 28, gender: 'Male'}; const person2 = { occupation: 'Engineer', employer: 'Google' }; const combinedPerson = { ...person1, ...person2 };
在这里,我们通过将两个对象放入一个对象字面量中来使用 Spread 属性,并将它们合并成一个新的对象 combinedPerson。再次在控制台中输出该对象,我们可以看到分别从 person1 和 person2 中获取的所有属性已经合并到了 combinedPerson 中。
console.log(combinedPerson); // { name: 'Sam', age: 28, gender: 'Male', occupation: 'Engineer', employer: 'Google' }
总结
Object rest/spread 展开操作符是 ECMAScript 2017 的一项非常有用的新特性。使用它,我们可以轻松地从对象中剩余属性中提取并创建新的对象,同时还可以使用它来合并任意数量的对象并创建一个新的对象。通过使用 Rest 属性和 Spread 属性,可以使代码更加简洁和易读。
当然这些只是展示 Rest 和 Spread 操作符的基本用法,你还需要在实际 JavaScript 开发中积累更多的经验。 掌握这个操作符后,你可以更加高效地写出更有趣的 JavaScript 代码。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64afefbd48841e9894c2e0e8