Javascript ... 展開運算符(Spread Operator)與其餘運算符(Rest Operator)

展開運算符(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 }

特別注意: 在使用解構賦值時一樣只能用一個其餘運算符，位置也只能放在最後一個。