剩余参数（Rest Parameters，语法为 ...args）替代旧版 arguments 对象

现代JavaScript开发中，剩余参数(...args)已取代arguments对象成为首选方案。

---

核心区别在于：

• 剩余参数是真正的数组，支持所有数组方法；
• 而arguments是类数组对象，需转换后才能使用数组方法。

---

剩余参数可与命名参数配合使用，在箭头函数中也能正常工作，且语义更清晰、性能更优。

---

最佳实践包括：优先使用剩余参数、合理命名参数、避免混用arguments、确保剩余参数位于参数列表末尾。

---

在ES6+环境下，剩余参数能提供更好的代码可读性和运行性能。

---

关联阅读推荐

JavaScript 常用数组去重方法及性能对比（附：扩展运算符...总结）

在现代 JavaScript (ES6+) 开发中，剩余参数（Rest Parameters，语法为...args）是替代旧版arguments对象的首选方式。

虽然两者都能获取函数调用时传入的参数列表，但剩余参数提供了真正的数组实例，拥有更强大的功能且语义更清晰。

以下是详细的对比和使用指南：

1. 核心区别对比

2. 代码示例对比

场景一：获取所有参数并求和

❌ 使用arguments(不推荐):
由于arguments不是真数组，无法直接求和，需要额外步骤转换。

function sum() { // 必须手动转换为数组才能使用 reduce const args = Array.from(arguments); // 或者 [...arguments] return args.reduce((acc, curr) => acc + curr, 0); } console.log(sum(1, 2, 3)); // 6

✅ 使用 剩余参数 (推荐):
直接获得数组，代码简洁。

function sum(...numbers) { // numbers 本身就是数组 [1, 2, 3] return numbers.reduce((acc, curr) => acc + curr, 0); } console.log(sum(1, 2, 3)); // 6

场景二：只获取部分剩余参数

这是剩余参数最强大的地方：它可以与命名参数配合使用，只收集“剩下”的参数。arguments做不到这一点（它总是包含所有参数）。

// 需求：第一个参数是运算符，后面全是数字 function operate(operator, ...values) { console.log('运算符:', operator); console.log('数字列表:', values); // 真正的数组 if (operator === 'add') { return values.reduce((a, b) => a + b, 0); } } operate('add', 10, 20, 30); // 输出: // 运算符: add // 数字列表: [10, 20, 30]

如果用arguments，你需要手动切片arguments对象来排除第一个参数，非常麻烦。

场景三：箭头函数中的使用

❌arguments在箭头函数中不可用:
箭头函数没有自己的arguments对象，它会向上查找作用域，这通常会导致错误或意外行为。

const add = () => { console.log(arguments); // ReferenceError: arguments is not defined };

✅ 剩余参数完美支持箭头函数:

const add = (...nums) => { return nums.reduce((a, b) => a + b, 0); }; console.log(add(1, 2, 3)); // 6

3. 什么时候还必须用arguments？

在极少数情况下，你可能仍需使用arguments：

1. 维护老旧代码库：项目基于 ES5 或更早版本，且无法进行重构。
2. 特殊的动态属性访问：虽然罕见，但如果你需要根据动态生成的字符串键名访问特定索引的参数，且不想转换成数组（尽管[...arguments][key]也很简单），arguments是唯一选择。但在 99% 的场景下，展开操作符...都能解决。

4. 最佳实践总结

1. 默认使用剩余参数：只要你在写 ES6+ 代码，始终优先使用...args。
2. 命名清晰：不要只用...args，根据上下文命名，如...userIds,...configOptions，提高代码可读性。
3. 避免混用：在一个函数中不要同时使用arguments和剩余参数，这会让人困惑且可能导致错误（如果在非严格模式下）。
4. 位置限制：剩余参数必须是函数参数列表中的最后一个参数。
   • ✅function f(a, ...rest) {}
   • ❌function f(...rest, a) {}(语法错误)

通过全面采用剩余参数，你的代码将更具声明式风格，更少出错，且更容易被现代 JavaScript 引擎优化。