在 ES2021 中，JavaScript 引入了剩余和展开运算符，这两个运算符可以让我们更加方便地操作数组和对象。本文将详细介绍剩余和展开运算符的使用方法和相关注意事项，以及给出一些实用的示例代码。
剩余运算符
剩余运算符用于将一个数组或对象分解为多个元素，可以用在函数的参数列表中，用于接收不定数量的参数。剩余运算符使用三个点（...）表示。
语法
function fn(...args) {
// do something with args
}示例
function sum(...nums) {
return nums.reduce((acc, cur) => acc + cur, 0);
}
console.log(sum(1, 2, 3, 4)); // 10
console.log(sum(1, 2)); // 3
console.log(sum(1)); // 1
console.log(sum()); // 0在上面的示例中，sum 函数使用剩余运算符将传入的参数列表转换为一个数组，然后使用 reduce 方法计算数组中所有元素的和。
展开运算符
展开运算符可以用于将一个数组或对象展开为多个元素，可以用在函数的参数列表中，用于传递不定数量的参数。展开运算符同样使用三个点（...）表示。
语法
function fn(a, b, ...args) {
// do something with a, b, and args
}示例
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; console.log([...arr1, ...arr2]); // [1, 2, 3, 4, 5, 6] console.log(Math.max(...arr1, ...arr2)); // 6
在上面的示例中，第一个 console.log 语句使用展开运算符将两个数组合并为一个新的数组，第二个 console.log 语句使用展开运算符将两个数组的元素作为参数传递给 Math.max 方法，返回其中的最大值。
注意事项
使用剩余和展开运算符时需要注意以下几点：
- 剩余运算符只能用在函数的参数列表中，而展开运算符可以用在任何地方。
- 剩余运算符在函数参数列表中只能出现一次。
- 剩余运算符会将剩余的参数转换为一个数组，而展开运算符会将数组或对象展开为多个元素。
- 剩余运算符和展开运算符不能同时用在同一个参数上。
总结
剩余和展开运算符是 ES2021 中新增的两个运算符，可以让我们更加方便地操作数组和对象。剩余运算符用于将一个数组或对象分解为多个元素，可以用在函数的参数列表中，用于接收不定数量的参数；展开运算符可以用于将一个数组或对象展开为多个元素，可以用在函数的参数列表中，用于传递不定数量的参数。在使用剩余和展开运算符时需要注意一些细节，例如剩余运算符只能用在函数的参数列表中，而展开运算符可以用在任何地方。希望本文能够帮助读者更好地理解和应用剩余和展开运算符。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65803b43d2f5e1655db66908