剩余参数(...)用于函数形参末尾收集多余实参并生成真数组,扩展运算符(...)用于调用、赋值等场景展开可迭代对象;二者写法相同但位置与作用相反,混用将报错。

剩余参数(...)和扩展运算符(...)写法一样,但出现位置和作用完全不同——一个在函数形参里收尾,一个在调用或赋值时铺开;混用会直接报错或行为异常。
剩余参数:只出现在函数形参末尾,用来收集多余实参
它把调用时传入的、未被前面形参接收的参数,自动聚合成一个真数组。必须放在形参列表最后,且只能有一个。
- 常见错误现象:
function fn(a, ...rest, b) {}会语法报错,因为...rest不能在其他形参之后 - 使用场景:封装可变参数函数,比如日志函数、求和函数、代理函数
- 和
arguments的关键区别:...rest是真正的Array,能直接用.map()、.filter();arguments是类数组,需转才能用
function sum(...nums) {
return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3); // 6
扩展运算符:出现在函数调用、数组字面量、对象字面量中,用来“展开”可迭代值
它把一个数组、字符串、Map、Set 或其他可迭代对象,逐项“摊开”成独立元素。不能单独存在,必须有上下文接收这些展开项。
- 常见错误现象:
const arr = ...[1,2,3];语法错误——缺少接收位置;正确写法是const arr = [...[1,2,3]]; - 使用场景:
- 合并数组:
[...a, ...b] - 浅拷贝数组:
[...arr] - 函数调用传参:
Math.max(...numbers) - 构造新对象并覆盖属性:
{...obj, name: 'new'}
- 合并数组:
- 性能注意:对大数组做
[...arr]会新建数组并复制所有元素,不是引用;若只需遍历,优先用for...of或arr.values()
为什么 ... 在不同位置语义翻转?
JavaScript 引擎靠上下文判断:... 左边是变量名(如 function f(...args)),就是“收”;... 右边是表达式(如 f(...arr)),就是“放”。这种设计让语法简洁,但也容易写反。
立即学习“Java免费学习笔记(深入)”;
- 典型踩坑:想用剩余参数解构对象却写成
const {...rest} = obj;—— 这是非法语法;对象解构要用const {a, b, ...rest} = obj; - 参数差异:剩余参数只适用于函数定义;扩展运算符可用于函数调用、数组/对象构造、
new表达式(如new Date(...args)) - 兼容性:两者均需 ES2015+ 环境;IE 完全不支持,Node.js 从 v6.0.0 起支持
真正容易被忽略的是:剩余参数收集的是“传入时未被绑定的实参”,而扩展运算符展开的是“运行时已存在的可迭代值”——它们不是互逆操作,只是共用同一个符号。写代码时盯住 ... 左右两边是什么(变量声明?调用表达式?赋值目标?),比记概念更管用。











