JavaScript ES6 的展開運算子(Spread Operator)、其餘運算子(Rest Operator)

展開運算子(Spread Operator)和其餘運算子(Rest Operator)是 ES6 的其中兩種新特性，使用的符號都是(...)，但使用起來的情境跟效果會不一樣。

展開運算子(Spread Operator)

展開運算子是把一個陣列展開成個別數值的速寫語法，簡單來說，就是把陣列裡面的值拆解成一個一個。

基本用法：

let number = [1,2,3,4,5];
console.log(...number);  // 1 2 3 4 5

let str = 'deathhell'
console.log(...str);  // "d" "e" "a" "t" "h" "h" "e" "l" "l"

用這個方法我們可以把陣列合併，取代以往的 concat

let arr1 = [ "hello", "js", "go" ]
let arr2 = [ 1, 2, ...arr1 ]
console.log(arr2) //[1, 2, "hello", "js", "go"]

展開運算子可以作陣列的淺拷貝，使用的時候不會影響到原本的陣列。

let arr3 = [1,2,3]
let arr4 = [...arr3]

arr3.push(4) //不會影響到arr3

也可以用來把陣列展開後傳入函式作為參數值，以下為一個範例：

function count(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3]
let result=count(...numbers) 
console.log(result) // 6

其餘運算子(Rest Operator)

如果我們遇到 function 要接受的參數數量不固定，就可以使用其餘運算子把多的參數併成一個 Array。

範例1：

function sum(...numbers) {
  var result = 0;
  numbers.forEach( (number)=> {
    result += number;
  });
  return result;
}

//傳入一個值
console.log(sum(1)); // 1
//傳入多個值
console.log(sum(1, 2, 3, 4, 5)); // 15

範例2：

如果 function 有先定義別的參數，要先傳入前面的參數，後面剩下的就會塞到其餘參數，這個參數一定是函式的最後一個。

function restArray(x, y, ...others) {
  console.log("x",x);  // x： 1
  console.log("y",y);  // y： 2
  console.log("others",others);  // others： [3, 4, 5]
}

//拆解陣列
restArray(1, 2, 3, 4, 5);