(Day29) ES6 - 解構賦值

前言

​
解構賦值是 ES6 新增語法糖，若要使用陣列、物件中的值，來見新的變數/常數，可以使用解構賦值的方法，來快速建立。
​

陣列解構

​
陣列解構主要是根據陣列中的順序，再對應的順序建立變數/常數，便可直接獲得陣列中的值。
比如過去要獲得陣列的值會這樣寫：

const array = [1,2]
const a = array[0]
const b = array[1]

​
而現在可使用解構：

const [a,b] = [1,2]
console.log(a, b) // 1, 2

​
關於陣列解構還有其他特殊用法，這邊舉出幾個較容易使用到的：

// 先建立變數，後賦值
let a, b
[a, b] = [1,2]
console.log(a,b) // 1, 2
​
//搭配展開運算子
const [ a, b, ...c ] = [1,2,3,4,5]
console.log(a,b) // 1, 2, [3, 4, 5]
​
// 跳過部分值
const [a, ,c] = [1,2,3]
console.log(a,c) //1, 3

​

物件解構

​
物件要使用解構會和陣列不同，陣列主要是按照順序獲得值，而物件要使用解構則是要讓，變數名稱和物件屬性一致才可以取得物件的值，比如：
​

const school = {
    name:'Taipei University',  
    classes: { 
        teacher: 'Alex',
        student:['Kevin','Clara','Rose']
    },
}
const { teacher, student } = school.classes

​
上面範例就是透過解構，直接將 school.classes 中的 teacher 、 student 屬性中的值變成對應的常數，由於我們現在很常會使用到 Ajax 來獲得後端傳來的物件，因此這個寫法使到頻率其實滿高的，而當然物件解構也有一些特殊用法，這邊舉出幾個較容易使用到的：
​

​
// 使用 : 替換解構賦值的名稱，讓變數/常數改為新名稱。
const school = {
    name:'Taipei University',  
    classes: { 
        teacher: 'Alex',
        student:['Kevin','Clara','Rose']
    },
}
const { name: schoolName } = school 
console.log(schoolName) // Taipei University
​
// 使用 展開運算子 解構物件
const obj = { a:1, b:2, c:3, d:4, e:5 }
const { a,b,...arg } = obj
console.log(a,b,arg) //1, 2, {c: 3, d: 4, e: 5}
​
// 透過函式參數解構物件，獲得物件中的值。
const school = {
    name:'Taipei University',  
    classes: { 
        teacher: 'Alex',
        student:['Kevin','Clara','Rose']
    },
}
​
function getTeacher({ classes : { teacher }}){
    return teacher 
}
console.log(getTeacher(school)) //Alex

​

解構賦值預設值

而解構賦值其實也和函式參數一樣，也能設定預設值，不論是物件見或是陣列，都可以使用 = 運算子，為解構賦值新增的變數/常數 設定預設值，以避免解構賦值時沒有正確獲得值。
​

//未解構賦值設定預設值
const [a, b, c = 3] = [1, 2]
console.log(a, b, c) // 1, 2, 3https://ithelp.ithome.com.tw/articles/10274861/draft
​
const school = {
    name:'Taipei University',  
    classes: { 
        teacher: 'Alex',
        student:['Kevin','Clara','Rose']
    },
}
const { teacher ,student , address = '新北市三峽區大學路151號' } = school.classes

​

參考文獻

• 解構賦值
• 鐵人賽：ES6 解構賦值
  ​
  ​