前言

解構賦值是 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 解構賦值