什么是剩余运算符？
剩余参数也是一种操作符，它用于表示数组中的不定数量的参数。常用于将逗号隔开的值序列组合成一个数组或对象。它在语法层面将多个值组合成一个集合。
剩余运算符的特性
- 剩余运算符只能作为函数的最后一个参数，否则会报错。
- 剩余运算符通常是一个数组或对象。
- 函数的 length 属性不包括剩余参数。
- 我们可以用剩余运算符替代了 arguments 对象。
- 使用了剩余运算符的函数内部不能显式的设置严格模式，否则会报错。
结合代码进行说明
剩余运算符之后不能再有其他参数
错误用法
1. function foo(a, ...b, c) {
// ...
}
//编辑器会报错, SyntaxError: Rest parameter must be last formal paramet
const order = function(beverage, ...otherIngredients) {
console.log(beverage);
console.log(otherIngredients);
};
order('green tea', 'milk', 'brown sugar', 'mint', 'tonka');
// output:
// green tea
// ['milk', 'brown sugar', 'mint', 'tonka']
剩余运算符通常是一个数组或对象。
function foo(...values) {
console.log(values);
}
foo(2, 5, 3) // [2, 5, 3]
函数的 length 属性不包括剩余参数。
1. (function(...a) {}).length // 0
1. (function(a, ...b) {}).length // 1
剩余运算符替代 arguments 对象。
// 使用剩余运算符获取参数列表并计算它们的总和
function sum(...numbers) {
let total = 0;
for (let num of numbers) {
total += num;
}
return total;
}
// 使用arguments对象获取参数列表并计算它们的总和（已被剩余运算符取代）
function sumWithArguments() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
// 测试
console.log(sum(1, 2, 3)); // 输出 6
console.log(sumWithArguments(1, 2, 3)); // 输出 6
使用了 rest 参数的函数内部不能显示设定严格模式，否则会报错
// 报错
const doSomething = (...a) => {
'use strict';
// code
通过剩余运算符来进行解构
const [a, b, ...others] = [1, 2, 3, 4, 5];
console.log(a, b, others);
// output: 1 2 [3, 4, 5]
高级用法和技巧
结合解构赋值
我们可以把剩余运算符与解构赋值结合使用，来提取数组或对象的部分内容，同时保留剩余部分。
代码示例：
// 使用数组解构赋值的方式定义三个变量：first、second 和 rest
// 其中，first 和 second 分别取数组的第一个和第二个元素
// 使用剩余运算符（...rest）收集数组中剩余的元素，并将它们作为一个新数组赋值给变量 rest
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // 1
console.log(second); // 2
console.log(rest); // [3, 4, 5]
函数参数默认值与剩余参数
我们在使用剩余参数时，也可以为函数参数提供默认值，这有助于避免在函数内部处理 undefined 或 null。
// 定义一个函数 greet，它接受一个名字和任意数量的称号作为参数
function greet(name, ...titles) {
// 如果没有提供名字，就将 name 变量设置为 'Stranger'
name = name || 'Stranger';
// 使用模板字符串打印问候语，包括提供的名字或者 'Stranger'
console.log(`Hello, ${name}!`);
// 如果提供了称号（即 titles 数组的长度不为 0）
if (titles.length) {
// 使用 join 方法将所有的称号连接成一个字符串，称号之间用逗号和空格分隔
// 然后打印出所有的称号
console.log(`Your titles are: ${titles.join(', ')}`);
}
}
// 调用 greet 函数但不传递任何参数
// 输出将会是 "Hello, Stranger!"，因为没有提供名字
greet(); // Hello, Stranger!
// 调用 greet 函数，传递名字 "Alice" 和两个称号 "Developer" 和 "Ms."
// 输出将会是 "Hello, Alice!" 和 "Your titles are: Developer, Ms."
greet('Alice', 'Developer', 'Ms.'); // Hello, Alice! Your titles are: Developer, Ms.
注意事项
性能消耗
虽然剩余运算符提供了极大的灵活性，但在处理大量参数或大型对象时，会产生大量的性能开销。在这些情况下，过度使用剩余运算符会导致内存使用增加或性能下降。
严格模式
在使用剩余运算符的函数中显式声明严格模式（'use strict';）会报语法错误。所以，如果你的脚本或模块已经在严格模式下运行，就不需要重复声明。
