ES6笔记--剩余参数

剩余参数也用三个连续的点 ( ... ) 表示，使你能够将不定数量的元素表示为数组。它在多种情形下都比较有用。

一种情形是将变量赋数组值时。例如，

const order = [20.17, 18.67, 1.50, "cheese", "eggs", "milk", "bread"];
const [total, subtotal, tax, ...items] = order;
console.log(total, subtotal, tax, items);

Prints: 20.17 18.67 1.5 ["cheese", "eggs", "milk", "bread"]

该代码将 order 数组的值分配给单个变量。数组中的前三个值被分配给了 total、subtotal 和 tax，但是需要重点注意的是 items。

通过使用剩余参数，数组中剩余的值（作为数组）被分配给了 items。

可变参数函数

剩余参数的另一个用例是处理可变参数函数。可变参数函数是接受不定数量参数的函数。

例如，假设有一个叫做 sum() 的函数，它会计算不定数量的数字的和。在运行期间，如何调用 sum() 函数？

sum(1, 2);
sum(10, 36, 7, 84, 90, 110);
sum(-23, 3000, 575000);

实际上有无数种方式可以调用 sum() 函数。不管传入函数的数字有多少个，应该始终返回数字的总和。

使用参数对象

在之前版本的 JavaScript 中，可以使用参数对象处理这种类型的函数。参数对象是像数组一样的对象，可以当做本地变量在所有函数中使用。它针对传入函数的每个参数都包含一个值，第一个参数从 0 开始，第二个参数为 1，以此类推。

如果我们看看 sum() 函数的实现方法，会发现可以使用参数对象来处理传递给它的各种数字。

function sum() {
  let total = 0;  
  for(const argument of arguments) {
    total += argument;
  }
  return total;
}

现在可以正常运行，但是存在问题：

1. 如果查看 sum() 函数的定义，会发现它没有任何参数。
   • 这容易引起误导，因为我们知道 sum() 函数可以处理不定数量的参数。
2. 难以理解。
   • 如果你从未使用过参数对象，那么看了这段代码后很可能会疑问参数对象来自何处。是不是凭空出现的？看起来肯定是这样。

使用剩余参数

幸运的是，出现剩余参数后，你可以重写 sum() 函数，使其阅读起来更清晰。

function sum(...nums) {
  let total = 0;  
  for(const num of nums) {
    total += num;
  }
  return total;
}

这一版本的 sum() 函数更简练、更易读懂。此外，注意 for...in 循环被替换成了新的 for...of 循环。

实战：

使用剩余参数创建一个 average() 函数，该函数会计算不定数量的数字的平均值。

提示：确保使用不同的值测试代码。例如，

average(2, 6) 应该返回 4
average(2, 3, 3, 5, 7, 10) 应该返回 5
average(7, 1432, 12, 13, 100) 应该返回 312.8
average() 应该返回 0

我的代码：

function average(...nums) {
    let total = 0;  
    for(const num of nums) {
        total += num;
    }
    if(nums.length){
        total = total/nums.length;
    } else {
        total = 0;
    }
    return total;
}

console.log(average(2, 6));
console.log(average(2, 3, 3, 5, 7, 10));
console.log(average(7, 1432, 12, 13, 100));
console.log(average());