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
複製代碼