剩余参数将多个参数收集成数组,简化可变参处理;展开运算符则用于展开数组或对象,两者结合提升JS函数与数据操作灵活性。

在JavaScript中,剩余参数(Rest Parameters)是一种将多个参数收集到一个数组中的方式,让函数可以更灵活地处理不确定数量的参数。它使用三个点 (...) 语法来定义,与展开运算符(Spread Operator)形式相同,但用途不同。
剩余参数的定义方式
剩余参数允许你将函数最后的若干个参数表示为一个数组。语法是在函数参数名前加上 ...:
function sum(...numbers) {return numbers.reduce((total, num) => total + num, 0);
}
sum(1, 2, 3, 4); // 返回 10
sum(5, 10); // 返回 15
在这个例子中,...numbers 将所有传入的参数收集为一个数组,因此可以用数组方法如 reduce、map 等进行操作。
注意:函数中只能有一个剩余参数,且必须放在参数列表的末尾。
剩余参数与 arguments 的区别
在ES6之前,常用 arguments 对象获取函数的所有参数。但它不是真正的数组,不能直接调用数组方法。
function oldSum() {const args = Array.from(arguments);
return args.reduce((a, b) => a + b, 0);
}
而剩余参数直接提供数组,无需转换,使用更方便、语义更清晰。
展开运算符的使用场景
虽然剩余参数用于“收拢”参数,展开运算符则是“展开”数组或对象元素。常用于函数调用时传参:
const nums = [1, 2, 3];console.log(Math.max(...nums)); // 输出 3
也可以用于合并数组或对象:
const arr1 = [1, 2];const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]
const obj = { a: 1 };
const newObj = { ...obj, b: 2 }; // { a: 1, b: 2 }
结合使用:剩余参数与展开运算符
在实际开发中,两者经常配合使用。例如,封装一个日志函数,保留前几个参数,其余作为数据数组处理:
function log(level, ...messages) {console.log(`[${level}]`, ...messages);
}
log('ERROR', 'File not found', 'Retry failed');
// 输出: [ERROR] File not found Retry failed
这里,...messages 收集参数,而 ...messages 在 console.log 中又被展开传递。
基本上就这些。剩余参数简化了可变参数的处理,展开运算符提升了数组和对象的操作效率,两者都是现代JS开发中不可或缺的特性。










