ES6 中使用扩展运算符代替 arguments 的应用场景

在 JavaScript 中，我们经常会用到函数的参数传递，并且经常需要获取所有的参数值。在 ES5 中，我们使用 arguments 对象来获取所有的参数，但是这种方式不太方便，而且会导致代码的混乱和不易维护。幸运的是，在 ES6 中，我们可以使用扩展运算符 ... 来代替 arguments，从而更加方便和清晰地处理函数的参数。

扩展运算符的介绍

在 ES6 中，我们可以使用扩展运算符 ... 来展开一个数组或者类数组对象，例如：

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

上面的代码将两个数组进行了合并，并且没有改变原始数组的值。另外，扩展运算符也可以用来传递函数的参数：

function func(a, b, c) {
  console.log(a, b, c);
}

let arr = [1, 2, 3];
func(...arr); // 1 2 3

使用扩展运算符代替 arguments

在 ES5 中，我们需要通过 arguments 来获取所有函数的参数：

function func() {
  console.log(arguments); // [1, 2, 3]
}

func(1, 2, 3);

但是，在 ES6 中，我们可以使用扩展运算符来代替 arguments：

function func(...args) {
  console.log(args); // [1, 2, 3]
}

func(1, 2, 3);

使用扩展运算符来代替 arguments 有很多的好处，比如：

• 更加方便和清晰：使用扩展运算符可以更加方便地获取所有的参数，并且代码更加清晰，不易混淆。
• 支持 Array 的所有方法：使用扩展运算符后返回的是数组，而不是类数组对象，所以可以直接使用数组的所有方法，比如 map()、reduce() 等。
• 可以和其他参数一起使用：扩展运算符可以和其他参数一起使用，比如：

function func(a, b, ...args) {
  console.log(a, b, args);
}

func(1, 2, 3, 4, 5); // 1 2 [3, 4, 5]

总结

使用扩展运算符代替 arguments 可以让我们更加方便和清晰地处理函数的参数，避免出现代码混乱和难以维护的情况。使用扩展运算符不仅可以获取所有的参数，还可以与其他参数一起使用，让我们的代码更加简洁和易读。如果你还在使用 arguments，不妨尝试一下使用扩展运算符吧！

示例代码：

function sum(...args) {
  return args.reduce((acc, val) => acc + val);
}

console.log(sum(1, 2, 3, 4, 5)); // 15
console.log(sum(2, 5, 9)); // 16

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d4d681b5eee0b525cab107