理解 ECMAScript 2019 的新特性：ObjectRest 和 Spread 属性

随着前端技术的不断发展，ECMAScript 也在不断更新完善，其中 ECMAScript 2019 引入了一些新的特性，其中 ObjectRest 和 Spread 属性是其中之一。本文将详细介绍这两个特性的概念、用法以及示例代码，让读者能够深入理解并应用到实际开发中。

ObjectRest 属性

ObjectRest 属性是 ECMAScript 2019 中引入的一种新特性，它允许我们将对象的剩余属性赋值给一个变量。通俗点说，就是将对象中未被解构的属性放到一个对象中。

语法

let { ...rest } = { a: 1, b: 2, c: 3 };
console.log(rest); // { b: 2, c: 3 }

上面的代码中，我们使用了 ObjectRest 属性，将对象 { a: 1, b: 2, c: 3 } 中未被解构的属性 b 和 c 赋值给了变量 rest，并输出了结果 { b: 2, c: 3 }。

应用场景

ObjectRest 属性的应用场景非常广泛，比如我们常常需要从一个对象中取出某些属性，然后将剩余的属性赋值给一个新的对象。

let { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a, b, rest); // 1 2 { c: 3, d: 4 }

上面的代码中，我们使用了 ObjectRest 属性，将对象 { a: 1, b: 2, c: 3, d: 4 } 中的属性 a 和 b 解构出来，然后将剩余的属性 c 和 d 赋值给了变量 rest，并输出了结果 { c: 3, d: 4 }。

Spread 属性

Spread 属性是 ECMAScript 2019 中引入的另一种新特性，它允许我们在数组或对象中使用 ... 运算符，将数组或对象展开成一组独立的值。通俗点说，就是将数组或对象拆分成单个元素。

语法

let arr = [1, 2, 3];
let newArr = [...arr, 4, 5];
console.log(newArr); // [1, 2, 3, 4, 5]

上面的代码中，我们使用了 Spread 属性，将数组 [1, 2, 3] 展开成了单个元素 1, 2, 3，然后将其与 [4, 5] 合并成一个新的数组，并输出了结果 [1, 2, 3, 4, 5]。

应用场景

Spread 属性的应用场景也非常广泛，比如我们常常需要将两个数组合并成一个新的数组。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = [...arr1, ...arr2];
console.log(newArr); // [1, 2, 3, 4, 5, 6]

上面的代码中，我们使用了 Spread 属性，将数组 arr1 和 arr2 展开成了单个元素，然后将其合并成一个新的数组，并输出了结果 [1, 2, 3, 4, 5, 6]。

总结

ObjectRest 和 Spread 属性是 ECMAScript 2019 中引入的两个新特性，它们在实际开发中应用非常广泛。ObjectRest 属性允许我们将对象的剩余属性赋值给一个变量，而 Spread 属性允许我们将数组或对象展开成一组独立的值。掌握这两个特性，可以大大提高我们的开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f3ccf62b3ccec22fc394ee