ES6 Function 之参数的处理

这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战

前面在《ES6 Function 之参数默认值的处理》一文中，我们已经提到了 ES5 中如何处理不确定参数的问题，非常简单，就是使用 arguments，arguments 可以获取到当前函数接收到的所有参数。但是 ES6 中不让在函数内部使用 arguments，那该怎么做呢？

下面我们用求和来举例说明：

1. ES5 中函数定义时参数不确定问题的处理

方法 1：使用原型链和 call 方法遍历伪数组 arguments：

function sum () {
  let num = 0
  Array.prototype.forEach.call(arguments, function (item) {
    num += item * 1
  })
  return num
}

console.log(sum(1, 2, 3)) // 6

/* 运行结果：
6
*/

方法 2：使用 ES6 中的 Array.from 方法先将伪数组 arguments 转化为数组，再使用 forEach 方法遍历数组：

function sum () {
  let num = 0
  Array.from(arguments).forEach(function (item) {
    num += item * 1
  })
  return num
}

console.log(sum(1, 2, 3)) // 6

/* 运行结果：
6
*/

总结：ES5 中，用 arguments 获取到所有参数；arguments 是伪数组，可以用 Array 原型链的 forEach，然后使用 call 方法，对 arguments 进行遍历；也可以用 ES6 的 Array.from() 方法将 arguments 转换为数组后再进行遍历。

2. ES6 中函数定义时参数不确定问题的处理

ES6 中使用 Rest parameter（Rest 参数，形如...参数名）替代使用 arguments 的方法，Rest 参数接收函数的多余参数，组成一个数组，放在形参的最后，形式如下：

function sum (...nums) {
  let num = 0
  nums.forEach(function (item) { // nums 是个数组，直接使用 forEach
    num += item * 1
  })
  return num
}
console.log(sum(1, 2, 3, 5))

/* 运行结果：
11
*/

假如我们需要对传入函数的第一个参数单独处理，可以这样写：

function sum (base, ...nums) {
  let num = 0
  nums.forEach(function (item) {
    num += item * 1
  })
  return base * 2 + num // 第一个参数 base 乘以 2 后再与其它参数相加
}
console.log(sum(1, 2, 3)) // 7

前面讲述了使用 Rest 参数处理不确定参数的内容，即函数在定义时，参数是不确定的，这时就可以用 Rest 参数将这些不确定的参数收敛进 Rest 参数这个数组中来。那么，还有一种与之相反的情况，就是函数在设计参数的时候，参数是确定的，但是函数在接收参数时，接收到的是一个收敛了所有参数的数组参数。

还是用求和来举例说明：

3. ES5 中函数调用时参数的处理

function sum (x = 1, y = 2, z = 3) {
  return x + y + z
}
let data = [4, 5, 6] // 假设为后端给的数据，需要是一个数组
// 方法 1：通过索引把数据一个一个取出来
console.log(sum(data[0], data[1], data[2])) // 15
// 方法 2：使用 apply 方法
console.log(sum.apply(this, data)) // 15

4. ES6 中函数调用时参数的处理

function sum (x = 1, y = 2, z = 3) {
  return x + y + z
}
let data = [4, 5, 6] // 假设为后端给的数据，需要是一个数组
// 方法 3（ES6 中的做法）：使用 Spread Operator “...”
console.log(sum(...data)) // 15