📜  ES6剩余参数(1)

📅  最后修改于: 2023-12-03 14:41:01.077000             🧑  作者: Mango

ES6 剩余参数

ES6 剩余参数是指函数定义中使用三个点 (...) 表示的参数,它允许我们将一个不定数量的参数表示为一个数组,这样在函数体内就可以用数组的方法来处理这些参数。使用剩余参数能够简化函数定义,也可以让我们方便地处理不知道参数数量的情况。

剩余参数的语法

在函数定义的参数列表中使用三个点 (...) 就可以定义剩余参数,如下所示:

function myFunc(firstArg, ...otherArgs) {
  // function body
}

在上面的代码中,otherArgs 是一个数组,包含了传递给函数的所有额外参数。

剩余参数可以出现在参数列表的任意位置,但在同一个函数定义中最多只能出现一次。例如:

function myFunc(...args, lastArg) {
  // SyntaxError: Rest parameter must be last formal parameter
}

提醒一下,使用剩余参数时,不能在同一个函数定义中再次使用默认参数(即出现在赋值符号左边的参数)。

剩余参数的应用

剩余参数通常用于以下情况:

1. 处理不定数量的函数参数

当定义函数时不知道需要处理多少个参数时,可以使用剩余参数。例如,我们要编写一个函数,计算任意数量的数字的平均值:

function average(...args) {
  let sum = 0;
  args.forEach((num) => {
    sum += num;
  });
  return sum / args.length;
}

然后我们可以传递任意数量的参数来调用这个函数:

average(2, 4, 6); // 4
average(3, 5, 7, 9); // 6
2. 使用剩余参数代替函数的 arguments 对象

在 ES5 中,我们使用 arguments 对象来获取函数的所有参数。但是 arguments 对象并非真正的数组,而是一个类数组对象,不能直接使用数组的方法。而使用剩余参数,我们可以直接得到一个真正的数组,从而方便地处理参数。例如:

function myFunc() {
  console.log(arguments.length); // 3
  console.log(Array.isArray(arguments)); // false
  
  let argsArray = Array.from(arguments); // 转换为真正的数组
  console.log(argsArray.length); // 3
  console.log(Array.isArray(argsArray)); // true
  
  let sum = 0;
  argsArray.forEach((num) => {
    sum += num;
  });
  return sum;
}

myFunc(2, 4, 6); // 12

使用剩余参数,上面的示例代码可以简化为:

function myFunc(...args) {
  console.log(args.length); // 3
  console.log(Array.isArray(args)); // true
  
  let sum = 0;
  args.forEach((num) => {
    sum += num;
  });
  return sum;
}

myFunc(2, 4, 6); // 12
3. 将剩余参数和其他参数结合使用

剩余参数与其他参数可以结合使用。例如,我们要编写一个函数,计算任意数量的数字的平均值,但是还要让用户可以指定一个数字表示忽略多少个最大值和最小值:

function average(excludeMax, excludeMin, ...args) {
  let sum = 0;
  let numArgs = args.length;
  args.sort((a, b) => a - b);
  if (excludeMax > 0) {
    numArgs -= excludeMax;
    args.splice(args.length - excludeMax, excludeMax);
  }
  if (excludeMin > 0) {
    numArgs -= excludeMin;
    args.splice(0, excludeMin);
  }
  args.forEach((num) => {
    sum += num;
  });
  return sum / numArgs;
}

average(1, 1, 2, 4, 6, 8); // 5

在上面的代码中,我们首先用 args.sort() 将参数从小到大排序,然后根据 excludeMaxexcludeMin 的值从排好序的数组中删除指定数量的元素。最后再计算剩余元素的平均值。然后我们可以传递任意数量的参数和要排除的元素数量来调用这个函数。

总结

ES6 剩余参数是一个强大的特性,它允许我们方便地处理不知道参数数量的情况,而且可以结合其他参数使用。剩余参数在处理大量数据时尤其有用,在函数的参数列表中只需要一个参数就可以将传递的所有参数表示为一个数组。