2021-07-25-[筆記]ES6展開其餘

前言：
展開運算式（Spread Operator）與其餘運算式（Rest Operator）使用上的符號是一模一樣的，都是（...）三個點。但會依照使用情況與意義而有所不同。

小結論：

1. 符號都是三個點(…)
2. 展開運算式是運用在陣列 或是 可迭代的物件上
3. Spread Operator 是展開陣列、物件 (ES9 後才可以使用)、函式中的值，Rest Operator 是集合其餘的值成為陣列

---

參考資料：
展開語法
展開運算符與其餘運算符· 從ES6開始的JavaScript學習生活
筆記 JavaScript ES6 中的展開運算子（spread operator）和其餘運算子（rest operator）

---

展開運算符(Spread Operator)

展開運算符有幾個用途

1. 陣列 展開成個別值
2. 字串拆解成陣列
3. 物件 展開成 key-value 方式 ( ES9 後才可以使用)

下面就列舉一些常見展開運算符例子

• 組合陣列

  let groupA = ['小明', '杰倫', '阿姨'];
  let groupB = ['老媽', '老爸'];
  // let groupAll = groupA.concat(groupB); ES6前 組陣列方法
  
  let groupAll=[...groupA,...groupB]; 
  console.log(...groupA);// 小明 杰倫 阿姨
  console.log(groupAll);//["小明", "杰倫", "阿姨", "老媽", "老爸"]

• 淺拷貝-例1

let groupA = ['小明', '杰倫', '阿姨'];
let groupB = groupA ;
groupB.push('春嬌');
console.log(groupA) // ["小明", "杰倫", "阿姨", "春嬌"]

說明：會出現這樣的結果是因為array、object都是pass by reference但，如果改成這樣呢？
A: 因為創造的變數重新賦予到記憶體的另一個空間，所以不會更改到原本的值

let groupA = ['小明', '杰倫', '阿姨'];
let groupB = [...groupA] ; //新陣列groupB.push('春嬌');
console.log(groupA) // ["小明", "杰倫", "阿姨"]

• 淺拷貝-例2

let groupA = ['小明', '杰倫', '阿姨'];
let b=['帥哥'];
let groupB = [...groupA,2,3,...b]; 
//新陣列groupB.push('春嬌');
console.log(groupB);
//["小明", "杰倫", "阿姨", 2, 3, "帥哥", "春嬌"]

備註：
展開運算符在陣列字面中使用時，並沒有限制位置，或是個數

• 字串拆解

let string = 'Andy';
let newString = [...string];
console.log(newString); //["A", "n", "d", "y"]

補充說明： 展開運算符還有一個特別的功能，就是把可迭代(iterable)或與陣列相似(Array-like)的物件轉變為陣列。JavaScript語言中內建的可迭代(iterable)物件有String、Array、TypedArray、Map與Set物件，而與陣列相似(Array-like)的物件指的是函式中的隱藏物件”arguments”。

• 類陣列轉為真正陣列-例1 下面這個例子，是一個類陣列（NodeList） 類陣列：非真正陣列，因此陣列方法並不能使用如：concat

let doms = document.querySelectorAll('li');
console.log(doms); //NodeList

而我們該如何把它轉為陣列呢？

使用展開運算式即可

let doms = document.querySelectorAll('li');
// console.log(doms); //NodeListlet 
newDoms =[...doms];
console.log(newDoms) //array

• 類陣列轉為真正陣列-例2

var originCash = 1000;
function updateEasyCard() {  
// let arg =arguments  
// console.log(arguments) //arguments  
let arg = [...arguments]; 
 
console.log(arg);  
let sum = arg.reduce(function (accumulator, currentValue) {    
return accumulator + currentValue;  }, 0);  
console.log('我有 ' + sum + ' 元');}
updateEasyCard(0); // 我有 0 元
updateEasyCard(10, 50, 100, 50, 5, 1, 1, 1, 500); // 我有 718 元

疑問：這邊的arguments是否指的就是隱藏在物件中的arguments?

對的，function 中有個內建的參數(arguments)

重新認識 JavaScript: Day 17 函式裡的「參數」

其餘參數(Rest Operator)

用途：

1. 其餘參數是將不確定的傳入參數值們在函式中轉變成為一個陣列來進行運算。

function moreMoney(ming ,...money) {           
console.log(ming,money);}
moreMoney('andy',100, 200, 300, 400, 500)//不論數值有幾個都OK

備註：其餘參數在傳入參數定義中，必定是位於最後一位，並且在參數中只能有一個其餘參數，如果不這麼做就會產生下列錯誤訊息

Uncaught SyntaxError: Rest parameter must be last formal parameter

1. 解構賦值時使用

function calculate(...[a,b,c]){
   return a + b + c;
}
calculate(1); // NAN a =1, b,c =undefined
calculate(1,,3) // Uncaught SyntaxError: Unexpected token ','
calculate(1,2,3) //6