剩余参数怎样使用？剩余参数计算多个数值

在函数中，当函数实参个数大于形参个数时，剩余的实参可以存放到一个数组中。剩余参数语法允许将一个不确定数量的参数表示为数组。用这种不确定参数的定义方式声明一个未知参数个数的函数非常方便。下面将对剩余参数进行详细讲解。

在ES6之前，JavaScript函数内部有一个arguments对象，可以使用这个对象来获取所有实参。现在ES6提供了一个新的对象来实现这一功能，并且该对象也可以很方便地获取函数中除开始参数之外的其余参数。

下面通过代码演示如何获取剩余参数，示例代码如下。

<script>
  function sum(first, ...args) {
    console.log(first)； //输出结果：10
    console.log (args)； //输出结果：[20,30]
  }
  sum(10, 20, 30)
</script>

上述代码中，第2行代码使用function关键字定义sum0函数，该函数有两个形参。第1个参数声明了一个变量first，剩余的参数会被..args收集成一个数组，这就是剩余参数。第6行代码在函数调用时传递了3个实参，分别为10、20和30。当调用sum0函数后，第1个形参变量的值first对应实参10.第2个形参args在前面加上了3个点“…”，表示args接收剩余的实参，即数组[20, 30]。

剩余参数是程序员自定义的一个普通标识符，接收剩余参数的变量是一个数组(Amray的实例)，能够直接使用所有的数组方法，例如 sort0、map()、forEach()和 pop()等方法。

下面通过代码演示使用剩余参数计算多个数值的求和结果，示例代码如下。

<script>
  const sum = (...args) => (
    let total = 0;
    args.forEach((item) => (
      total += item;
    ));
    // 等价于args.forBach(item=>total+=item)；
    return total;
  };
  console.log(sum(10, 20));     //输出结果：30
  console.log(sum(10,20,30))：  //输出结果：60
</script>

上述代码中，第2行代码使用const关键字声明了一个m常量，用于计算多个数相加，它的值为一个箭头函数。小括号中的args是一个数组，前面加上3个点“...”表示接收所有实参。第3行代码在箭头函数中使用let关键字声明一个tolal变量，用于存储数字相加的总和。第4行代使用forEach0方法来遍历args数组，该方法接收一个回调函数，args数组中有多少项值，这个回调函数就会被执行多少次，item为当前循环数组中的当前项。第8行代码在循环体外返回total值。第10行、第11行代码分别调用sum0函数，并在浏览器控制台中输出结果。

根据箭头函数的特点，第4~6行代码还可以简写成第7行代码注释中的形式。如果箭头函数中只有一个形参item，则item外侧的小括号可以省略;如果箭头函数中只有一个形参item并且箭头函数内部只有一句代码，则可以省略大括号。