在 JavaScript 中，扩展运算符和剩余操作符是两个非常有用的操作符。它们在 ES6 中被引入，并在 ES9 中得到了进一步的增强。本文将深入介绍 ES9 中的扩展运算符和剩余操作符，并提供一些示例代码以帮助读者更好地理解它们的用法和优点。
扩展运算符
扩展运算符是三个点（...）符号，它可以在函数调用和数组/对象字面量中使用。它的作用是将一个可迭代对象（比如数组、字符串、Set 和 Map 等）展开成一个逗号分隔的序列。在函数调用中，扩展运算符可以将一个数组作为参数传递给函数。在数组/对象字面量中，扩展运算符可以将一个数组展开成另一个数组或对象。
函数调用中的扩展运算符
在函数调用中，扩展运算符可以将一个数组作为参数传递给函数。它的语法如下：
function myFunction(param1, param2, ...rest) {
// rest 是一个数组，包含所有剩余的参数
}在上面的代码中，...rest 表示所有剩余的参数。这些参数会被收集到一个数组中，并赋值给 rest 变量。
下面是一个示例：
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6, 7)); // 22在上面的代码中，sum 函数接受任意数量的参数，并将它们相加。使用扩展运算符，我们可以将一组数字作为数组传递给 sum 函数，并得到正确的结果。
数组/对象字面量中的扩展运算符
在数组/对象字面量中，扩展运算符可以将一个数组展开成另一个数组或对象。它的语法如下：
const newArray = [...oldArray];
const newObject = {...oldObject};在上面的代码中，...oldArray 和 ...oldObject 表示将 oldArray 和 oldObject 展开成一个逗号分隔的序列。这些序列可以被用来初始化一个新的数组或对象。
下面是一个示例：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const mergedArray = [...arr1, ...arr2]; console.log(mergedArray); // [1, 2, 3, 4, 5, 6]
在上面的代码中，我们使用扩展运算符将 arr1 和 arr2 展开成一个逗号分隔的序列，并将它们合并成一个新的数组 mergedArray。
剩余操作符
剩余操作符也是三个点（...）符号，它可以在函数参数中使用。它的作用是将一个可迭代对象的剩余部分收集到一个数组中。剩余操作符与扩展运算符非常相似，但它们的作用不同。
函数参数中的剩余操作符
在函数参数中，剩余操作符可以将一个可迭代对象的剩余部分收集到一个数组中。它的语法如下：
function myFunction(param1, param2, ...rest) {
// rest 是一个数组，包含所有剩余的参数
}在上面的代码中，...rest 表示所有剩余的参数。这些参数会被收集到一个数组中，并赋值给 rest 变量。
下面是一个示例：
function sum(first, second, ...rest) {
const total = rest.reduce((total, num) => total + num, 0);
return first + second + total;
}
console.log(sum(1, 2, 3, 4, 5)); // 15
console.log(sum(4, 5, 6)); // 15在上面的代码中，sum 函数接受两个必需的参数和任意数量的可选参数。使用剩余操作符，我们可以将所有可选参数收集到一个数组中，并使用 reduce 方法将它们相加。
总结
在本文中，我们深入介绍了 ES9 中的扩展运算符和剩余操作符。扩展运算符可以将一个可迭代对象展开成一个逗号分隔的序列，而剩余操作符可以将一个可迭代对象的剩余部分收集到一个数组中。它们都是非常有用的操作符，可以帮助我们更方便地处理数组和函数参数。我们提供了一些示例代码以帮助读者更好地理解它们的用法和优点。希望本文能对读者有所帮助，让大家更好地掌握 JavaScript 中的这两个重要操作符。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65053b9395b1f8cacd1be934