展開運算符(Spread Operator)與其餘運算符(Rest Operator)是ES6+中的其中兩種新特性，他們的特點：
? 符號都是三個點(…)
? 與數組，對象有關
? 一個是展開數組、對象中的值；另一個是集合其餘的值成為數組或對象。
一、展開運算符(Spread Operator)的使用
展開運算符是把一個數組或對象展開成（俗稱 拍平-）個別的值的速寫語法，它只會在陣列字面定義與函式呼叫時使用，這個運算符後面必定接著一個陣列。
1. 是用來組合(連接)陣列，對應的陣列方法是concat，以下是一個簡單的範例：
const params = [ "hello", true, 7 ]
const other = [ 1, 2, ...params ] // [ 1, 2, "hello", true, 7 ]let bar = {
a: 1, b: 2 };
let baz = {
...bar,c:3,b:4 }; // {a: 1, b: 4, c: 3}
2. 展開運算符可以作陣列的淺拷貝，當然陣列的淺拷貝有很多種方式，這是簡單的一種。
const arr = [1,2,3]const arr2 = [...arr];//[1,2,3]let bar = {
a: 1, b: 2 };
let baz = {
...bar }; // { a: 1, b: 2 }
3.作為傳入到函數的參數
function sum(a, b, c) {
return a + b + c
}
const args = [1, 2, 3]
sum(…args) // 6；? 對照ES5中的相容語法，則是用apply函式：sum.apply(undefined, args) ;// 6
4. 將可迭代(iterable)對象轉為數組
JavaScript語言中內建的可迭代(iterable)物件有String、Array、TypedArray、Map與Set物件。
例如：
const aString = "foo"
const chars = [ ...aString ] // [ "f", "o", "o" ]
5. 對函數的參數隱藏對象"arguments" 進行操作
例如，將arguments 對象轉為數組
function aFunc(x){
console.log(arguments)console.log(Array.isArray(arguments))//轉為真正的陣列const arr = [...arguments]console.log(arr)console.log(Array.isArray(arr))}aFunc(1)
二. 其余運算符(Rest Operator）
其餘運算符是收集其餘的(剩餘的)這些值，轉變成一個數組或對象。它經常用於函式定義時的傳入參數或者解構賦值時。
1. 用於傳入函數的參數：例如不能確定函數的傳入參數個數時
function sum(…numbers) {
const result = 0；numbers.forEach(function (number) {
result += number；})return result；
}sum(1) ；// 1
sum(1, 2, 3, 4, 5) ;// 15
特別注意:
1） 其餘參數在傳入參數定義中，必定是位於最後一位，並且在參數中只能有一個其餘參數。以下為例子：
const […rest, last] = [1, 2, 3, 4, 5];
// 报错
const [first, …rest, last] = [1, 2, 3, 4, 5];
// 报错
2） 其餘參數的值在沒有傳入實際值時，會變為一個空陣列，而不是undefined，以下的範例可以看到這個結果:
function aFunc(x, ...y){
console.log('x =', x, ', y = ' , y)
}aFunc(1,2,3) //x = 1, y = [2, 3]
aFunc() //x = undefined, y = []
2. 用于解構賦值(解構：腦補一下例如C#類的構造函數，就容易理解和記住了)。解構賦值時，會根據數組或對象的結構，以類似"鏡子"對映樣式(pattern)來進行賦值。
e.g:
const [x, y, z] = [1, 2, 3]console.log(x) //1
const [x, ...y] = [1, 2, 3]console.log(x) //1
console.log(y) //[2,3]
當右邊的值與左邊數量不相等時，"鏡子對映的樣式"就會有些沒對到，用了其餘運算符的那個識別名稱，就會變成空陣列。就會像下面這個例子一樣:
const [x, y, ...z] = [1]
console.log(x) //1
console.log(y) //undefined
console.log(z) //[]
在函式傳入參數中作解構賦值，這個例子也是一種解構賦值的語法，而且加了上一節的函式中的其餘參數的用法。
function f(...[a, b, c]) {
return a + b + c;
}f(1) // NaN (b and c are undefined)
f(1, 2, 3) // 6
f(1, 2, 3, 4) // 6 (the fourth parameter is not destructured)//對象解構賦值
let {
x, y, ...z } = {
x: 1, y: 2, a: 3, b: 4 }
console.log(x) // 1
console.log(y) // 2
console.log(z) // { a: 3, b: 4 }
特別注意: 在使用解構賦值時一樣只能用一個其餘運算符，位置也只能放在最後一個。