ES9 中的 Rest/Spread Properties
在 ECMAScript 2018（也称为 ES9）中，引入了 Rest/Spread Properties 这一新特性。它可以让开发人员更加方便地处理对象和数组，从而提高开发效率。本文将详细介绍 Rest/Spread Properties 的用法，并提供示例代码以供参考。
Rest Properties
Rest Properties 允许我们从一个对象中提取出所有剩余的属性，并将它们作为一个新的对象。它的语法如下：
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }在上面的例子中，我们定义了一个对象，其中包含四个属性：x、y、a 和 b。然后我们使用 Rest Properties 将 x 和 y 提取出来，并将剩余的属性存储在 z 中。最终，我们可以看到 x 和 y 的值分别为 1 和 2，而 z 中包含了 a 和 b 两个属性。
Spread Properties
Spread Properties 与 Rest Properties 相反，它允许我们将一个对象或数组中的所有属性或元素展开到另一个对象或数组中。它的语法如下：
let obj1 = { x: 1, y: 2 };
let obj2 = { ...obj1, z: 3 };
console.log(obj2); // { x: 1, y: 2, z: 3 }
let arr1 = [1, 2, 3];
let arr2 = [0, ...arr1, 4];
console.log(arr2); // [0, 1, 2, 3, 4]在上面的例子中，我们使用 Spread Properties 将 obj1 中的属性展开到 obj2 中，并添加了一个新的属性 z。最终，我们可以看到 obj2 包含了 x、y 和 z 三个属性。类似地，我们使用 Spread Properties 将 arr1 中的元素展开到 arr2 中，并在开头和结尾添加了两个新元素。最终，arr2 包含了五个元素。
应用场景
Rest/Spread Properties 在实际开发中有很多应用场景。例如：
- 合并对象
使用 Spread Properties 可以方便地合并两个或多个对象，如下所示：
let obj1 = { x: 1, y: 2 };
let obj2 = { z: 3 };
let obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { x: 1, y: 2, z: 3 }在上面的例子中，我们使用 Spread Properties 将 obj1 和 obj2 中的属性合并到 obj3 中。最终，obj3 包含了 x、y 和 z 三个属性。
- 传递参数
使用 Rest/Spread Properties 可以方便地传递参数，如下所示：
function foo(x, y, ...rest) {
console.log(x); // 1
console.log(y); // 2
console.log(rest); // [3, 4, 5]
}
let arr = [1, 2, 3, 4, 5];
foo(...arr);在上面的例子中，我们定义了一个函数 foo，它接受三个参数 x、y 和 rest。然后我们使用 Rest Properties 将 arr 中的前两个元素赋值给 x 和 y，将剩余的元素存储在 rest 中。最终，我们可以看到 x、y 和 rest 的值分别为 1、2 和 [3, 4, 5]。
- 复制数组或对象
使用 Spread Properties 可以方便地复制一个数组或对象，如下所示：
let arr1 = [1, 2, 3];
let arr2 = [...arr1];
console.log(arr2); // [1, 2, 3]
let obj1 = { x: 1, y: 2 };
let obj2 = { ...obj1 };
console.log(obj2); // { x: 1, y: 2 }在上面的例子中，我们使用 Spread Properties 复制了一个数组和一个对象，并将它们分别赋值给了 arr2 和 obj2。最终，arr2 和 obj2 分别包含了 arr1 和 obj1 中的所有元素或属性。
总结
Rest/Spread Properties 是一个非常实用的特性，它可以让开发人员更加方便地处理对象和数组，并提高开发效率。在实际开发中，我们可以根据需要灵活使用 Rest/Spread Properties，从而更好地完成工作。
参考资料
- ECMAScript® 2018 Language Specification. https://www.ecma-international.org/ecma-262/9.0/index.html#sec-rest-properties
- ECMAScript 6 入门. http://es6.ruanyifeng.com/#docs/object-properties#Rest-...
- Understanding Rest Parameters and Spread Syntax in JavaScript. https://www.digitalocean.com/community/tutorials/understanding-rest-parameters-and-spread-syntax-in-javascript
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657e0c8cd2f5e1655d8ddaa7