JS `arguments` 对象的替代：使用剩余参数提高可读性

各位程序猿、程序媛们，大家好！今天咱们聊聊 JavaScript 里一个有点历史感，但又经常被新生代选手嫌弃的老朋友——arguments 对象。当然，更重要的是，我们要探讨一下如何用更现代、更优雅的“剩余参数”来取代它，让我们的代码更具可读性，更少踩坑。

一、arguments 对象：爱恨交织的历史

话说当年，JavaScript 还比较“年轻”的时候，函数参数的数量是比较固定的。但是，总有那么一些“不安分”的场景，需要函数能够接受任意数量的参数。于是，arguments 对象应运而生。

arguments 对象是一个类数组对象，它包含了函数被调用时传入的所有参数。注意，是所有参数，不管你在函数定义的时候声明了多少个形参，arguments 里都会包含所有实参。

1. arguments 对象的使用方法

让我们来看一个简单的例子：

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 输出: 6
console.log(sum(1, 2, 3, 4, 5)); // 输出: 15

在这个例子中，sum 函数没有定义任何形参，但是它仍然可以接受任意数量的参数，并通过 arguments 对象来访问它们。

2. arguments 对象的特点

类数组对象： 拥有 length 属性，可以通过索引访问元素，但它不是真正的数组，不能直接使用数组的方法，比如 forEach，map 等。

与具名参数的联系： 在非严格模式下，arguments 对象中的元素会与函数声明中的具名参数建立动态绑定关系。也就是说，如果你修改了具名参数的值，arguments 对象中对应位置的值也会改变，反之亦然。

function foo(a, b) {
  console.log("Before modification:");
  console.log("a:", a);
  console.log("arguments[0]:", arguments[0]);

  a = 10;

  console.log("After modification:");
  console.log("a:", a);
  console.log("arguments[0]:", arguments[0]);
}

foo(1, 2);
// 输出:
// Before modification:
// a: 1
// arguments[0]: 1
// After modification:
// a: 10
// arguments[0]: 10

在严格模式下的不同： 在严格模式下，arguments 对象与具名参数不再建立动态绑定关系。修改具名参数的值不会影响 arguments 对象，反之亦然。

"use strict";
function bar(a, b) {
  console.log("Before modification:");
  console.log("a:", a);
  console.log("arguments[0]:", arguments[0]);

  a = 10;

  console.log("After modification:");
  console.log("a:", a);
  console.log("arguments[0]:", arguments[0]);
}

bar(1, 2);
// 输出:
// Before modification:
// a: 1
// arguments[0]: 1
// After modification:
// a: 10
// arguments[0]: 1

3. arguments 对象的缺点

虽然 arguments 对象在某些情况下很有用，但它也存在一些明显的缺点：

可读性差： 仅仅通过函数签名，你无法知道函数期望接收哪些参数。你需要深入到函数体内部，才能理解 arguments 对象的使用方式。
维护性差： 如果函数内部对 arguments 对象的处理逻辑比较复杂，很容易出错。而且，当函数需要修改参数时，你可能需要同时修改函数签名和 arguments 对象的处理逻辑，增加了维护成本。
性能问题： 在某些 JavaScript 引擎中，使用 arguments 对象可能会导致性能下降，因为它会阻止引擎进行一些优化。特别是在严格模式下，为了避免与具名参数建立动态绑定关系，引擎需要做额外的工作。
不是真正的数组： 需要手动转换为数组才能使用数组的方法。这通常需要 Array.prototype.slice.call(arguments) 这样的写法，略显繁琐。

二、剩余参数：优雅的替代方案

为了解决 arguments 对象的缺点，ES6 引入了剩余参数（Rest parameters）。剩余参数允许我们将不定数量的参数表示为一个数组。

1. 剩余参数的语法

剩余参数使用三个点 ... 加上一个参数名来表示。例如：

function foo(a, b, ...rest) {
  console.log("a:", a);
  console.log("b:", b);
  console.log("rest:", rest);
}

foo(1, 2, 3, 4, 5);
// 输出:
// a: 1
// b: 2
// rest: [3, 4, 5]

在这个例子中，a 和 b 是具名参数，而 ...rest 是剩余参数。rest 会接收除了 a 和 b 之外的所有参数，并将它们存储在一个数组中。

2. 剩余参数的特点

真正的数组： 剩余参数是一个真正的数组，可以直接使用数组的所有方法，比如 forEach，map，filter 等。
可读性强： 通过函数签名，你可以清楚地知道函数期望接收哪些参数，以及哪些参数会被收集到剩余参数中。
更灵活： 剩余参数可以与具名参数一起使用，让你更灵活地控制函数的参数。
只能是最后一个参数： 剩余参数必须是函数参数列表中的最后一个参数。

3. 剩余参数的优势

提高可读性： 函数签名更清晰，更容易理解函数的作用和参数。
增强维护性： 修改参数时，只需要修改函数签名和剩余参数的处理逻辑，减少了出错的可能性。
更简洁： 无需手动将 arguments 对象转换为数组，可以直接使用数组的方法。
性能更好： 避免了 arguments 对象的一些性能问题。

三、arguments vs 剩余参数：对比分析

为了更清晰地了解 arguments 对象和剩余参数的区别，我们来看一个表格：

特性	`arguments` 对象	剩余参数
类型	类数组对象	数组
可读性	差	好
维护性	差	好
性能	可能存在性能问题	性能更好
与具名参数绑定	非严格模式下动态绑定，严格模式下不绑定	无绑定
使用方式	通过索引访问	直接使用数组方法
位置限制	无限制	必须是最后一个参数
明确性	不明确，需要查看函数体才能知道参数的用途	明确，函数签名清晰地表明哪些参数被收集到数组中

四、代码示例：从 arguments 到剩余参数

让我们通过几个例子，看看如何用剩余参数来替代 arguments 对象。

1. 求和函数

使用 arguments 对象：

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

console.log(sum(1, 2, 3)); // 输出: 6
console.log(sum(1, 2, 3, 4, 5)); // 输出: 15

使用剩余参数：

function sum(...numbers) {
  let total = 0;
  for (let number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3)); // 输出: 6
console.log(sum(1, 2, 3, 4, 5)); // 输出: 15

或者更简洁的使用 reduce:

function sum(...numbers) {
  return numbers.reduce((total, number) => total + number, 0);
}

console.log(sum(1, 2, 3)); // 输出: 6
console.log(sum(1, 2, 3, 4, 5)); // 输出: 15

2. 连接字符串函数

使用 arguments 对象：

function concatStrings() {
  let result = "";
  for (let i = 0; i < arguments.length; i++) {
    result += arguments[i];
  }
  return result;
}

console.log(concatStrings("Hello", " ", "World")); // 输出: Hello World

使用剩余参数：

function concatStrings(...strings) {
  return strings.join("");
}

console.log(concatStrings("Hello", " ", "World")); // 输出: Hello World

3. 处理用户信息的函数

假设我们需要一个函数，可以接收用户的姓名和任意数量的爱好，并返回一个包含用户信息的对象。

使用 arguments 对象：

function createUser(name) {
  const hobbies = [];
  for (let i = 1; i < arguments.length; i++) {
    hobbies.push(arguments[i]);
  }
  return {
    name: name,
    hobbies: hobbies,
  };
}

const user = createUser("Alice", "Reading", "Coding", "Hiking");
console.log(user);
// 输出: { name: 'Alice', hobbies: [ 'Reading', 'Coding', 'Hiking' ] }

使用剩余参数：

function createUser(name, ...hobbies) {
  return {
    name: name,
    hobbies: hobbies,
  };
}

const user = createUser("Alice", "Reading", "Coding", "Hiking");
console.log(user);
// 输出: { name: 'Alice', hobbies: [ 'Reading', 'Coding', 'Hiking' ] }

通过这些例子，我们可以看到，使用剩余参数可以使代码更简洁、更易读，也更容易维护。

五、兼容性考虑

虽然剩余参数是 ES6 的特性，但是现在主流的浏览器都已经支持它。如果你需要兼容一些老版本的浏览器，可以使用 Babel 等工具将代码转换为 ES5。

六、总结

arguments 对象曾经是 JavaScript 中处理不定数量参数的重要手段，但随着 ES6 的发展，剩余参数成为了更优雅、更现代的替代方案。使用剩余参数可以提高代码的可读性、可维护性和性能，减少出错的可能性。

所以，为了你的代码更加优雅、健壮，赶紧拥抱剩余参数吧！

七、进阶思考

默认参数与剩余参数结合使用： 剩余参数可以与默认参数结合使用，让你的函数更加灵活。例如：

function greet(name = "Guest", ...messages) {
  console.log(`Hello, ${name}!`);
  for (let message of messages) {
    console.log(message);
  }
}

greet(); // 输出: Hello, Guest!
greet("Bob", "How are you?", "Have a nice day!");
// 输出:
// Hello, Bob!
// How are you?
// Have a nice day!

解构剩余参数： 剩余参数可以与解构赋值结合使用，提取特定位置的参数。例如：

function processCoordinates(...coordinates) {
  const [x, y, ...otherCoordinates] = coordinates;
  console.log("x:", x);
  console.log("y:", y);
  console.log("otherCoordinates:", otherCoordinates);
}

processCoordinates(10, 20, 30, 40, 50);
// 输出:
// x: 10
// y: 20
// otherCoordinates: [ 30, 40, 50 ]

希望今天的讲解对大家有所帮助！记住，代码不仅要能运行，更要让人赏心悦目。使用剩余参数，让你的代码更上一层楼！

发表回复 取消回复

发表回复取消回复