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
复制代码