JavaScript剩余参数用法详解

golang学习网今天将给大家带来《JavaScript剩余参数详解及使用方法》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

剩余参数是真正的Array实例，可直接调用数组方法；arguments是类数组对象，无数组方法且箭头函数中不可访问，还影响引擎优化。

JavaScript 剩余参数（...）不是语法糖，而是专门用于捕获函数末尾不定数量实参的真数组——它替代 arguments，但更安全、更可控。

剩余参数和 arguments 的核心区别在哪

剩余参数是真正的 Array 实例，可直接调用 .map()、.filter()、.reduce()；而 arguments 是类数组对象，没有这些方法，且在箭头函数中不可访问。

• arguments 会干扰 JS 引擎优化（尤其严格模式下可能禁用某些内联优化）
• 剩余参数必须写在形参列表**最后**，且只能有一个：function foo(a, b, ...rest) {}，否则报错 SyntaxError: Rest parameter must be last formal parameter
• 剩余参数不会出现在 function.length 中（该值只统计「非剩余」形参个数）

怎么正确使用 ... 捕获并处理不定参数

写法很简单，但关键在「位置」和「用途」：它只收「调用时多出来的那些实参」，前面已命名的形参会先被赋值。

function sum(first, ...numbers) {
  return numbers.reduce((a, b) => a + b, first);
}
sum(10, 1, 2, 3); // → 16（first = 10，numbers = [1, 2, 3]）

• 如果不需要前置固定参数，就写成 function(...args) {}
• 不能和 arguments 混用：一旦用了剩余参数，arguments 在非严格模式下也变为未定义行为，应彻底弃用
• 剩余参数内容是「浅拷贝」的实参值，对原始数组/对象无引用关系

常见误用场景和报错提示

最常踩的坑是位置错误或类型混淆。例如：

• 把 ... 放在中间或开头：function(...rest, last) {} → 直接语法错误
• 试图在构造函数或 setter 中用剩余参数但忽略 this 绑定问题（剩余参数本身不解决 this，需配合 bind 或箭头函数）
• 误以为 ...arr 是剩余参数：其实这是「展开语法」，仅在调用、数组字面量、解构中生效；只有在**函数声明/表达式形参位置**的 ... 才是剩余参数
• 在旧环境（如 IE）中运行会报错——剩余参数是 ES2015+ 特性，需 Babel 编译或确认目标运行时支持

真正要注意的，是别把它当成万能兜底：如果业务逻辑需要区分「必填」和「可选」参数，剩余参数只是帮你拿到“剩下的”，具体校验、默认值、类型转换还得自己写。它不自动做任何事，只负责收。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript剩余参数用法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。