前言

延續昨天內容今天繼續介紹常用 ES6 語法。

展開其餘

展開運算符有幾個用途

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);//["小明", "杰倫", "阿姨", "老媽", "老爸"]

• 物件組合

const object = {
    name:'Andy',
    age:18
}

const object2 = {
    name:'Andy2',
    age:183
}

const cloneObj = {...object,...object2}; //這邊要注意一下，相同屬性後者會蓋掉前者
console.log(cloneObj); // {name: 'Andy2', age: 183}

其餘參數(Rest Operator)

用途：

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

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

• 解構賦值時使用

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

function addNumber(...argument){
   const array = [...argument];
   console.log(array); //[1,2,3]
}
addNumber(1,2,3);

解構

當我們要取物件、陣列資料時，很常會用到解構方式。

陣列解構賦值方法（Array Destructuring）

• 提示：陣列的解構賦值，必須注意到順序性

過去陣列內的元素在賦值的時候，只能透過直接給值的方式，像是下面這樣：

let list=[a,b];
let a = list[0];
let b = list[1];
console.log(a,b) //a,b

而在 ES6 世界中，我們可以這樣用，而這就是最基本陣列解構賦值方法
備註：解構賦值會將右方的資料往左邊送，然後會一個位置對一個值

第一種
let [a,b,c]=[1,2,3]
console.log(a,b,c) //1,2,3
變數 a = 1, b = 2, c = 3

第二種寫法
let number=[1,2,3];
let[andy,chunwen,jay]=number;
console.log(andy,chunwen,jay) //[1,2,3]

物件解構賦值

首先，必須強調一個觀念。物件的解構賦值強調的是屬性名稱，屬性名稱必須相互對應才能取到值，反之則會無法取值
基本方法如下：

const object = {
   name:'Andy',
   age:26,
   sex:male
}
// 一般來說我們過往取物件的方法可以用點陣法或是物件實字法
1. object.name  //Andy
2. object[name] //Andy

//當我們今天有許多屬性要取出時，我們通常會直接用解構方式直接取得屬性
const { name } = object //只要對應到屬性的 key 就可以直接取出物件 value 

let obj = {
  name: "chunwen",
  country: "Taiwan"
}

let {name, country} = obj;
console.log(name);  // chunwen
console.log(country);  // Taiwan

結論：

陣列的解構賦值強調的是順序，而物件的解構賦值強調的則是屬性名稱，屬性名稱必須相互對應才能夠取得到值

Optional chaining(ES11)

這個寫法可以避免我們取值時如果屬性不存在，程式報錯問題。題外話，目前 Node.js 14版後都有支援這寫法喔！

data?.columnName?.result
// 如果 data 不為 undefined 則會繼續往下取值
// 如果沒有值則直接回傳 undefined

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);  //undefined

參考資料

• [ES6-重點紀錄] 擴展運算子 Spread Operator
• Week8 - 不想再看到undefined的TypeError嗎，你可以試看看JS的Optional chaining operator [Server的終局之戰系列]
• Optional chaining