ECMAScript 2021 (ES12) 中如何使用 Object Rest 和 Spread 属性
在ECMAScript 2015 (ES6)中,我们已经见过展开符(spread operator),现在它已经成为了ECMAScript 2021 (ES12)的一部分,并与对象属性一同呈现。Object Rest 语法允许我们从对象中提取属性,并将其余放置在新对象中。而 Spread 运算符是将对象转换为参数序列,允许我们将对象展开并在其他对象,数组等中使用。
下面我们将详细探讨ES12中如何使用Object Rest和Spread属性,包括使用案例和示例代码。
- Object Rest Properties(对象剩余属性)
ES2018中,引入了对象剩余属性的语法,允许我们根据自己的需要提取来自对象的一部分属性,在ES12中提供了更广泛的支持。
语法:const {x, y, ...z} = {x: 1, y: 2, a: 3, b: 4};
示例代码:
const person = { firstName: 'John', lastName: 'Doe', age: 30, email: 'john.doe@example.com', phone: '1234567890' };
const {firstName, lastName, ...rest} = person;
console.log(firstName); // Output: John console.log(lastName); // Output: Doe console.log(rest); /* Output: { age: 30, email: 'john.doe@example.com', phone: '1234567890' } */
解释:在此示例中,我们定义了一个名为person的对象,它包含 firstName、lastName、age、email和phone 属性。我们采用对象剩余属性语法,提取 firstName 和 lastName 属性,并将其余的所有属性存储在 rest 对象中。
- Object Spread Properties(对象展开属性)
对象展开属性允许我们将一个对象展开并将其属性添加到另一个对象中。这可以使对象合并更加简便和直观。
语法:const newObj = {...obj}
示例代码:
const person = { firstName: 'John', lastName: 'Doe', age: 30, email: 'john.doe@example.com', phone: '1234567890' };
const newPerson = {...person, city: 'New York'};
console.log(newPerson); /* Output: { firstName: 'John', lastName: 'Doe', age: 30, email: 'john.doe@example.com', phone: '1234567890', city: 'New York' } */
解释:在此示例中,我们定义了一个名为person的对象,它包含 firstName、lastName、age、email和phone 属性。然后,我们采用Spread属性将city属性添加到newPerson对象中。
总结
在ES12中,Object Rest和Spread属性是一个非常有用的特性,可以使我们更简便地进行对象属性操作。Object Rest属性允许我们从对象中提取属性,并将其余放置在新对象中,而 Spread 属性则允许我们将对象展开并在其他对象、数组等中使用。希望本文能对你对ECMAScript 2021有更深入的了解。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64cb34915ad90b6d041f371e