1. 为什么 arguments 对象正在被淘汰
arguments 对象曾是 JavaScript 函数中获取所有参数的唯一方式，但随着语言发展，它暴露出一系列设计缺陷。这个类数组对象最大的问题是缺乏真正的数组方法，比如无法直接使用 map() 或 filter()，必须先通过 Array.from() 或展开运算符转换。我在实际项目中就遇到过这样的坑：当尝试用 arguments.slice(1) 获取剩余参数时，控制台直接报错，调试半天才发现需要先转换为数组。
更麻烦的是，arguments 的行为在严格模式和非严格模式下不一致。在非严格模式中，修改 arguments 会同步改变对应的命名参数，这种隐式关联经常导致难以追踪的 bug。记得有一次团队协作时，同事无意间修改了 arguments[0]，结果函数开头的参数校验全部失效，排查了整整一天才找到这个隐蔽的问题。
2. 剩余参数：更优雅的可变参数处理
ES6 引入的剩余参数语法(...args)完美解决了可变参数的需求。与 arguments 不同，剩余参数是真正的数组实例，可以直接使用所有数组方法。上周我重构一个旧项目时，就把这样的代码：
javascript复制function sum() {
return Array.from(arguments).reduce((a, b) => a + b, 0);
}
改成了更简洁的：
javascript复制function sum(...numbers) {
return numbers.reduce((a, b) => a + b, 0);
}
剩余参数还有几个实用特性：
- 可以与其他参数混用，比如
function(a, b, ...rest) - 在箭头函数中也能使用（箭头函数没有 arguments）
- 类型提示更明确，VSCode 等编辑器能提供更好的代码补全
注意：剩余参数必须放在参数列表最后，像
function(...args, last)这样的写法会直接报错
3. 默认参数值：告别参数判空逻辑
以前我们经常看到这样的代码：
javascript复制function createUser(name, age) {
name = name || 'Anonymous';
age = age || 18;
// ...
}
这种写法有两个隐患：一是当传入 0 或空字符串等 falsy 值时会被意外覆盖，二是逻辑与运算符的优先级可能导致意外行为。ES6 的默认参数语法更安全直观：
javascript复制function createUser(name = 'Anonymous', age = 18) {
// ...
}
默认参数有几个实用技巧：
- 可以是任意表达式，甚至是函数调用
- 后面的参数可以引用前面的参数，如
function(a, b = a * 2) - 与解构结合可以实现更复杂的默认值逻辑
4. 参数解构：处理复杂配置对象
当函数需要接收多个可选参数时，传统的做法是接受一个 options 对象：
javascript复制function init(options) {
const width = options.width || 100;
const height = options.height || 200;
// ...
}
参数解构让这种模式更优雅：
javascript复制function init({ width = 100, height = 200 } = {}) {
// ...
}
这里的 = {} 是防御性编程，防止调用时不传参数导致解构报错。我在 React 组件开发中就经常使用这种模式处理 props。
解构参数还支持嵌套结构：
javascript复制function render({
size: { width = 100, height = 200 } = {},
color = 'red'
} = {}) {
// ...
}
5. 类型检查与参数验证
虽然现代参数语法更方便，但失去了 arguments 的"万能捕获"特性后，我们需要更严格的参数校验。我有几种常用方案：
方案一：TypeScript 类型注解
typescript复制function greet(name: string, age?: number): string {
// ...
}
方案二：运行时校验
javascript复制function createUser({ name, age } = {}) {
if (typeof name !== 'string') {
throw new TypeError('name must be a string');
}
// ...
}
方案三：使用 JSDoc
javascript复制/**
* @param {string} name
* @param {number} [age=18]
*/
function createUser(name, age = 18) {
// ...
}
6. 性能考量与浏览器兼容性
虽然现代参数语法更优雅，但在极端性能敏感的场景需要注意：
- 剩余参数和解构会创建临时数组/对象，可能影响性能
- 在热代码路径中，传统的 arguments 可能更快（但可读性差）
兼容性方面：
- 所有现代浏览器都支持这些新特性
- 如果需要支持旧浏览器，Babel 可以完美转译这些语法
- Node.js 从 6.x 开始全面支持
我在实际项目中的经验是：除非是底层库代码，否则优先使用新语法。可维护性的提升远大于微小的性能差异。
7. 实战案例：重构旧代码
让我们看一个真实的重构案例。假设有一个旧式函数：
javascript复制function formatUser() {
const name = arguments[0] || 'Guest';
const age = arguments[1] || 18;
const emails = Array.prototype.slice.call(arguments, 2);
// ...
}
可以分步骤重构为：
- 首先改为命名参数：
javascript复制function formatUser(name, age) {
name = name || 'Guest';
age = age || 18;
const emails = Array.prototype.slice.call(arguments, 2);
// ...
}
- 加入默认参数：
javascript复制function formatUser(name = 'Guest', age = 18) {
const emails = Array.prototype.slice.call(arguments, 2);
// ...
}
- 最后用剩余参数处理 emails：
javascript复制function formatUser(name = 'Guest', age = 18, ...emails) {
// ...
}
这样的重构既保持了原有功能，又大大提升了代码的可读性和可维护性。我在带领团队进行代码现代化改造时，这类重构通常能减少 30%-50%的相关 bug 报告。