必須要懂的JS之（rest引數與spread語法）

rest引數與spread語法

rest引數指的是這樣的結構：

function sumAll(...args) { // 陣列名為 args
  let sum = 0;

  for (let arg of args) sum += arg;

  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

以上的…args傳參的方式就是rest引數，這種形式的傳參可以解決不固定引數的情況，而且值得注意的是，傳入的不固定數量的引數是可以進行迴圈解構的！
在沒有rest之前我們可以利用arguments來獲取傳入的引數，但是arguments並非是一個陣列，所以關於陣列的方法比如map就不適用，注意的一點就是rest引數需要放在末尾。
spread語法：

let arr = [3, 5, 1];
alert( Math.max(...arr) ); // 5（spread 語法把陣列轉換為引數列表）

以上結構屬於spread語法，展示了一個返回陣列中最大值的操作，…arr將陣列中的值進行結構並匯入Math.max方法中。
這種語法需要注意的點有以下幾種;
一、

let arr1 = [1, -2, 3, 4];
let arr2 = [8, 3, -8, 1];
alert( Math.max(...arr1, ...arr2) ); // 8

我們可以對多個陣列進行解構。
二、

let arr = [3, 5, 1];
let arr2 = [8, 9, 15];
let merged = [0, ...arr, 2, ...arr2];
alert(merged); // 0,3,5,1,2,8,9,15（0，然後是 arr，然後是 2，然後是 arr2）

可以對陣列進行合併。
三、

let str = "Hello";
alert( [...str] ); // H,e,l,l,

對於字串依然可以使用。
四、

let arr = [1, 2, 3];
let arrCopy = [...arr]; // 將陣列 spread 到引數列表中
                        // 然後將結果放到一個新陣列

// 兩個陣列中的內容相同嗎？
alert(JSON.stringify(arr) === JSON.stringify(arrCopy)); // true

// 兩個陣列相等嗎？
alert(arr === arrCopy); // false（它們的引用是不同的）

// 修改我們初始的陣列不會修改副本：
arr.push(4);
alert(arr); // 1, 2, 3, 4
alert(arrCopy); // 1, 2, 3

對陣列進行深拷貝