在 JavaScript 中，Rest 和 Spread Operator 是非常常用的语法，它们能够帮助我们更好地处理数组和对象。在 ES11 中，这两个语法得到了进一步的增强和改进，本文将详细介绍如何在 ES11 中更好地使用 Rest 和 Spread Operator。
Rest Operator
Rest Operator 是一个用来收集函数参数的语法，它以三个点（...）开头，可以将函数中多余的参数收集到一个数组中。在 ES11 中，Rest Operator 支持了两个新的特性，分别是在函数参数中使用 Rest Operator 和在解构中使用 Rest Operator。
在函数参数中使用 Rest Operator
在 ES11 中，我们可以在函数参数中使用 Rest Operator 来收集多余的参数，如下所示：
// javascriptcn.com 代码示例
function sum(a, b, ...rest) {
let result = a + b;
for (let i = 0; i < rest.length; i++) {
result += rest[i];
}
return result;
}
console.log(sum(1, 2, 3, 4, 5)); // 15在上面的例子中，我们定义了一个 sum 函数，它的前两个参数 a 和 b 是必需的，而后面的参数可以使用 Rest Operator 来收集。在函数体内，我们使用了一个 for 循环来遍历收集到的参数，并计算它们的和。
在解构中使用 Rest Operator
在 ES11 中，我们也可以在解构中使用 Rest Operator 来收集多余的值，如下所示：
const [a, b, ...rest] = [1, 2, 3, 4, 5]; console.log(a); // 1 console.log(b); // 2 console.log(rest); // [3, 4, 5]
在上面的例子中，我们定义了一个数组 [1, 2, 3, 4, 5]，然后使用解构语法将它的前两个值赋给了变量 a 和 b，而后面的值则使用了 Rest Operator 来收集到了数组 rest 中。
Spread Operator
Spread Operator 是一个用来展开数组和对象的语法，它以三个点（...）开头，可以将数组和对象展开成独立的元素。在 ES11 中，Spread Operator 也支持了两个新的特性，分别是在数组字面量中使用 Spread Operator 和在对象字面量中使用 Spread Operator。
在数组字面量中使用 Spread Operator
在 ES11 中，我们可以在数组字面量中使用 Spread Operator 来展开另一个数组，如下所示：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
在上面的例子中，我们定义了两个数组 arr1 和 arr2，然后使用 Spread Operator 将它们展开成一个新的数组 arr3。这个新的数组包含了原来两个数组中的所有元素。
在对象字面量中使用 Spread Operator
在 ES11 中，我们也可以在对象字面量中使用 Spread Operator 来展开另一个对象，如下所示：
const obj1 = { name: 'Tom', age: 18 };
const obj2 = { gender: 'Male', ...obj1 };
console.log(obj2); // { name: 'Tom', age: 18, gender: 'Male' }在上面的例子中，我们定义了一个对象 obj1，然后使用 Spread Operator 将它展开到另一个对象 obj2 中。这个新的对象包含了原来对象中的所有属性和值，并且还增加了一个新的属性 gender。
总结
在 ES11 中，Rest 和 Spread Operator 得到了进一步的增强和改进，可以帮助我们更好地处理数组和对象。在函数参数中使用 Rest Operator 可以帮助我们收集多余的参数，而在解构中使用 Rest Operator 则可以帮助我们收集多余的值。在数组字面量和对象字面量中使用 Spread Operator 可以帮助我们将数组和对象展开成独立的元素。这些新的特性可以使我们的代码更加简洁和易读，同时也可以提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/655832d7d2f5e1655d26b34e