展開...

• 兩組的陣列，我們想把他合併到同一個變數上
• *...*=>它其實一次又一次的 return 陣列中的值。

let groupA = ['小明', '杰倫', '阿姨'];
let groupB = ['老媽', '老爸'];

const groupAll = [...groupA, ...groupB];
// ['小明', '杰倫', '阿姨', '老媽', '老爸'];

淺層的複製...

• 陣列與物件相同都有著傳參考的特性，所以當把陣列賦予到另一個值上時，修改其中一個另一個也會跟著變動。
• 展開運算子 它是一個一個將值寫入，所以他也有淺層的複製(shallow copy)

let groupA = ['小明', '杰倫', '阿姨'];
let groupB = [...groupA];
groupB.push('阿明');
console.log(groupA); // ['小明', '杰倫', '阿姨'];

類陣列轉成純陣列...

常見的就是 DOM 陣列，這也可以透過展開運算子轉為純陣列。

let doms = document.querySelectorAll('p');
console.log(doms);
let spreadDom = [...doms];
console.log(spreadDom);

_______________________________

其餘參數

用途類似arguments，但不同的是：

• arguments不是真的陣列，其餘參數則是
• arguments不能混用自訂傳入的參數

let mingCard = {
    name: '小明',
    value: 0
  };
  //帶入card與金錢並使用累加器，最後,ming.value移除就變成個別算法，留著會持續使用card
  function updateEasyCard(mingCard, ...money) {
    console.log(money); // 其餘參數的陣列
    mingCard.value = money.reduce(function (accumulator, currentValue) {
      // 分別為前一個回傳值, 當前值
      return accumulator + currentValue;  // 與前一個值相加
    }, mingCard.value);
    console.log(${mingCard.name} 的卡現在有 ${mingCard.value});
  }
  let money = [10, 50, 100, 50, 5, 1, 1, 1, 500]
  updateEasyCard(mingCard, ...money); // 718
updateEasyCard(mingCard, 50, 100, 50, 70, 200); // 小明 的卡現在有 1188