---
tags: ES6, Javascript
disqus: hackmd
---

# [JS]展開運算子(spread operator) 跟 其餘運算子(rest operator)

[[筆記] JavaScript ES6 中的展開運算子（spread operator）和其餘運算子（rest operator）](https://pjchender.blogspot.com/2017/01/es6-spread-operatorrest-operator.html)
[展開運算符與其餘運算符](https://eyesofkids.gitbooks.io/javascript-start-from-es6/content/part4/rest_spread.html)

---

在 ES6 中，新增了一個 "..." 的關鍵字，這個關鍵字在不同時間點有不同的效果，有些時候它會被當作展開運算子(spread operator）使用，有些時候則是被當作其餘運算子（rest operator）使用。

**展開運算子可以用在執行函數時的參數列上，
它可以將一個陣列 (array) 展開，轉為多個逗點隔開的獨立參數**

function foo(x, y, z) {
    console.log(x, y, z);
}

var arr = [1, 2, 3];

// 輸出 1 2 3
// 等同於執行 foo(1, 2, 3)
foo(...arr);

**其餘運算子只能放在最後一個參數，用來獲取其餘的參數，
myArgs 的值是一個陣列 (array)，用來存放獲取的參數。**

其餘運算符(Rest Operator)的主要意義是因為它會用在兩個地方，一個是比較常提及的在函式定義中的傳入參數定義中，稱之為其餘參數(Rest parameters)。另一種情況是用在解構賦值時。

傳入參數定義

function fun1(a, ...myArgs) {
    console.log(a);
    console.log(myArgs);
}

// 顯示 []
fun1();

// 顯示 a
//     [1]
fun1('a', 1);

// 顯示 a, 
//     [5, 6, 7]
fun1('a', 5, 6, 7);

解構賦值

const [x, ...y] = [1, 2, 3]

console.log(x) //1
console.log(y) //[2,3]