ES9 带来了许多新的语言特性，其中 Rest 和 Spread 属性提案是前端领域中最被期待的特性之一。Rest 和 Spread 属性允许我们通过一种简单而优雅的方式处理数组和对象，使开发过程更加高效和优雅。
Rest 属性
Rest 属性在函数声明中使用，用于收集函数参数的剩余部分，该部分将会被封装成一个数组。Rest 属性的形式如下所示：
function functionName(param1, param2, ...restParams) {
console.log(restParams);
}实际上，Rest 属性是三个点 ... 后加上一个参数名，这个参数名将会成为剩下参数的数组名称。当我们调用上述函数时，restParams 参数将会包含所有除 param1 和 param2 之外的其它参数值。
下面是一个示例代码：
// javascriptcn.com 代码示例
function sum(a, b, ...others) {
let result = a + b;
for (let i = 0; i < others.length; i++) {
result += others[i];
}
console.log(result);
}
sum(1, 2); //输出：3
sum(1, 2, 3); //输出：6
sum(1, 2, 3, 4); //输出：10在这个示例中，我们定义了一个 sum 函数，它通过 Rest 属性接收了多个参数，并将它们加起来以获取它们的总和。由于我们并不知道具体传递了多少个参数，Rest 属性可以让我们轻松地收集参数并进行操作，使代码更加灵活。
Spread 属性
Spread 属性与 Rest 属性相反，是用于拆分数组或对象的元素。Spread 属性允许我们使用 ... 运算符将数组和对象中的元素解开并放入一个新的数组或对象中。Spread 属性的形式如下：
const newArray = [...oldArray];
const newObject = {...oldObject};这里的 ... 运算符表示了将数组或对象解开的操作。解开数组后，我们可以将其元素插入到新数组中。解开对象后，我们可以将其属性和值插入到新对象中。
让我们看一个例子：将两个数组合并为一个新的数组。
const array1 = [1, 2, 3]; const array2 = [4, 5, 6]; const newArray = [...array1, ...array2]; console.log(newArray); //输出：[1, 2, 3, 4, 5, 6]
在上述代码中，我们使用 Spread 属性将 array1 和 array2 数组中所有的元素合并到了一个新数组中。我们可以计算数组的长度或者进行其它的操作，而不用担心数据会丢失或者会混淆。
Spread 属性不仅仅适用于数组，我们也可以在对象中使用它。
const object1 = {name: 'Tom', age: 12};
const object2 = {address: 'Beijing', sex: 'male'};
const newObject = {...object1, ...object2};
console.log(newObject); //输出：{name: "Tom", age: 12, address: "Beijing", sex: "male"}在这个示例中，我们将两个对象中的所有属性和值整合到了一个新对象中。
拓展运算符
拓展运算符是 Spread 属性的一种实现方式。拓展运算符以 ... 开头，可以在函数调用中将数组或其他表达式展开，以便在函数调用中传递参数。
下面是一个示例代码：
function sum(a, b, c) {
console.log(a + b + c);
}
const numbers = [1, 2, 3];
sum(...numbers); //输出：6在这个示例中，...numbers 表示将数组 numbers 展开为单独的参数，并将这些参数传递给 sum 函数。这种使用方式可以避免我们对数组进行深度拷贝，也增强了代码的灵活性和可维护性。
总结
本文介绍了 ES9 Rest/Spread 属性提案的相关内容，让我们可以用简单而优雅的方式处理数组和对象，使代码更加高效和优雅。
通过 Rest 属性，我们可以轻松地收集函数的多个参数，并对它们进行操作。通过 Spread 属性，我们可以将数组和对象解开，并将元素或属性和值插入到新的数组或对象中。拓展运算符为我们提供了一种可靠的方案来将数组展开并传递参数，使代码更加优雅。
这些特性的使用将有助于提高代码的可读性和可维护性，并提高开发效率，尤其在大规模应用的情况下。我们应该在实际的应用场景中学习和应用这些特性，以便在代码中发挥它们的优点。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65856e1cd2f5e1655d0119cb