今天是第 16 天，昨天跟大家分享了 Spread Operator 展開運算子的使用方法，有一個叫做 Rest Parameter 其餘參數 (也有人說 Rest Operator)，它也是 " ... " 這個關鍵字，不過作用與 Spread Operator 展開運算子完全不一樣~~

Rest Parameter

使用對象與作用：

• 在 Function 中，用來表示不確定的參數數量，引數被當作 Array 型態的元素，傳遞進去

使用場景：

• 不確定 Function 的參數有幾個時，可以隨著引數的數量，有幾個就有幾個
• 確定 Function 的參數有幾個，如果引數數量大於參數數量，剩下的引數會被忽略

語法

function fn (a, b, ...theArgs) {
  // …
}

在 Function 中定義的最後一個參數，使用 " ... "來表示為 Rest Parameter，一定要是唯一而且是最後一個。

一般用法

function myFunction1 (x, y, ...moreArgs) {
  console.log("x：", x)  // x： one
  console.log("y：", y)  // y： two
  console.log("moreArgs：", moreArgs)  // moreArgs： ['three', 'four', 'five', 'six']
}

myFunction1 ("one", "two", "three", "four", "five", "six")

上圖中，函式 myFunction1 的最後一個參數，使用了其餘參數，而我們要傳入的引數有 6 個，執行之後，去掉前面兩個參數(x、y)，可以看到其餘參數印出來是後面 4 個。

如果引數是 8 個呢？

myFunction1 ("one", "two", "three", "four", "five", "six", "seven", "eight")
// moreArgs： ['three', 'four', 'five', 'six', 'seven', 'eight']

沒錯，就會是後面 6 個！

如果只剛好給 2 個引數，印出來則是空陣列。

myFunction1 ("one", "two")  // moreArgs： []

Argument 長度

function myFunction2(...theArgs) {
  console.log(theArgs.length);
}

myFunction2()  // 0
myFunction2(1)  // 1
myFunction2(1, 2, 3)  // 3

結合已知參數使用其餘參數

就是函式裡前面已知的參數，與後面其餘參數結合使用。

function plus (a, ...theArgs) {
  return theArgs.map((element) => a + element)
}

const array1 = plus(2, 30, 45, 63)
console.log(array1)  // [32, 47, 65]

就是把 a 當成基數，a 是 2，後面其餘參數各自加上這個 2。
2 + 30 = 32
2 + 45 = 47
2 + 63 = 65
會印出 [32, 47, 65]

把 Arguments 變成 Array

Array-Like Object 之一的 arguments 想使用 array 的方法時，需要先將 arguments 轉換成標準數組才可使用，在其餘參數出來之前，是使用以下方法，

function myFunction3(a, b, c) {
  const normalArray1 = Array.prototype.slice.call(arguments)  
  const normalArray2 = [].slice.call(arguments)  
  const normalArray3 = Array.from(arguments)  

  console.log(normalArray1)  // ['one', 'two', 'three']
  normalArray1.shift()       // test 能否用標準數組的方法
  console.log(normalArray1)  // ['two', 'three']，成功
}

myFunction3("one", "two", "three")

這時候就可以直接使用其餘參數，

function myFunction4(a, b, c) {
  const normalArray4 = [...arguments]

  console.log(normalArray4)  // ['one', 'two', 'three', 'four']
  normalArray4.shift()       // test 能否用標準數組的方法
  console.log(normalArray4)  // ['two', 'three', 'four']，成功
}

myFunction4("one", "two", "three", "four")

已知參數數量，但引數大於參數數量時，會被忽略

const array2 = [9, 6, 3, 1, 2]

function myFunction5(x, y ,z) {
    console.log(x + y + z)  // 18
}

myFunction5(...array2)

可以看到函式 myFunction5 有 3 個參數，引數卻有 5 個。當使用其餘參數時，傳遞進去的就會只有 array2 的前 3 個元素，剩下的 2 個元素就會被忽略掉。
所以前 3 個為 9 + 6 + 3 = 18，最後印出 18。

比較 Spread Operator 與 Rest Parameter

相同點都是使用 " ... "。

兩者不同的是 Spread Operator 是將收集的元素，展開成單個元素。
Rest Parameter 則是將剩餘的元素收集到一個 array 中。

Demo

以上是我這兩天整理出來的筆記~~

參考資料：
MDN - Rest parameters
ES6: What is the difference between Rest and Spread?
JavaScript Rest vs Spread Operator – What’s the Difference?

文章同步更新於 medium