ES6充滿著樂趣，它不但真正提升了我們對(duì) JavaScript 的編程體驗(yàn)，而且顯示了 JavaScript 值得活下來。

它有一個(gè)從數(shù)組和對(duì)象中解構(gòu)值的新特性，使得我們很方便的就能從數(shù)組和對(duì)象中提取到數(shù)據(jù)。

讓我們看看是如何做到的，我們先從數(shù)組開始。

從數(shù)組中提取數(shù)據(jù)

假設(shè)我們有一個(gè)存著名字的數(shù)組：

const names = ['Luke', 'Eva', 'Phil'];  

接下來讓我們用解構(gòu)來從中提取數(shù)據(jù)。

從數(shù)組中提取元素

讓我們從最最基本的提取第一個(gè)元素開始：

const [first] = names;
console.log(first); // Luke

現(xiàn)在，我們來分析這段代碼做了些什么。一個(gè)變量被方括號(hào)包含，這就意味著我們想從 names 數(shù)組拿到第一個(gè)元素并且將這個(gè)元素賦值給變量，在我們的例子中首先把數(shù)組中第一個(gè)元素的值賦給了變量。

現(xiàn)在，假如我們想從數(shù)組中拿到多個(gè)元素的值，比如說第一和第二個(gè)，我們?cè)撊绾巫觯?其實(shí)很簡單，我們只需要在方括號(hào)中添加多個(gè)變量就可以實(shí)現(xiàn)。這樣在數(shù)組前列的新元素就會(huì)被提取并且賦值給定義的變量。

const [first, second] = names;
console.log(first, second); // Luke Eva

元素不存在時(shí)的默認(rèn)值

假設(shè)我們從只有三個(gè)元素的數(shù)組中解析四個(gè)元素，會(huì)發(fā)生什么?

const [first, second, third, fourth] = names;  
console.log(fourth); // undefined  

在這種情況下，fourth 為 undefied 。
我們可以給第四個(gè)元素設(shè)置一個(gè)默認(rèn)的值，當(dāng)結(jié)構(gòu)時(shí)數(shù)組元素不足時(shí)，第四個(gè)值默認(rèn)就是我們?cè)O(shè)置的值。

const [first, second, third, fourth='Martin'] = names;  
console.log(fourth); // 'Martin'  

略過數(shù)組中的值

現(xiàn)在我們已經(jīng)知道了從數(shù)組開始時(shí)解構(gòu)，但是，我們經(jīng)常遇見我們只需要數(shù)組中一部分的值，所以就會(huì)存在略過數(shù)組的值的情況。
不過很棒的地方就是，解構(gòu)其實(shí)可以滿足我們這種需求：

var [first, , second] = names;  
console.log(first, second); // 'Luke' 'Phil'  

其實(shí)很簡單只需要把略過的值得逗號(hào)加上，就可以略過數(shù)組中的值。

把數(shù)組中剩下的部分賦值給變量

解構(gòu)不同的值現(xiàn)在變得很簡單，但是很多情況下我們需要保留一部分沒有被解構(gòu)的數(shù)組。
我們現(xiàn)在來看看如何做到：

var [first, ...rest] = names;  
console.log(rest); // ['Eva','Phil']  

在變量前加上 ... 就能夠?qū)⑹Ｏ虏糠謹(jǐn)?shù)組保存到變量中。

解構(gòu)對(duì)象

我們已經(jīng)知道了如何解構(gòu)數(shù)組， 現(xiàn)在讓我們來看看如何從對(duì)象中解構(gòu)值，先看這個(gè)對(duì)象

const person = {  
  name: 'Luke',
  age: '24',
  facts: {
    hobby: 'Photo',
    work: 'Software Developer'
  }
}

從這個(gè)對(duì)象中解構(gòu)值

我們從最基礎(chǔ)的開始，從Person 對(duì)象中解構(gòu)name 和 age 的值。
···
const {name, age} = person;
console.log(name, age); // 'Luke' '24'
···
我們可以看到，幾乎和數(shù)組的寫法一致，只是把方括號(hào)換成大括號(hào)。

解構(gòu)嵌套的值

假設(shè)我們現(xiàn)在想解構(gòu)對(duì)象深層次的值，比如說 person 對(duì)象的 hobby：

const {facts: {hobby}} = person;  
console.log(hobby); // 'Photo'  

通過冒號(hào)，我們可以找到屬性的路徑，從而可以解析我們需要哪個(gè)值。

當(dāng)沒有解構(gòu)成功時(shí)的默認(rèn)值

我們?cè)诮馕鰯?shù)組時(shí)可以給解構(gòu)變量設(shè)置默認(rèn)值，對(duì)象也同樣可以。為了看到是怎樣做的，我們我們可以嘗試解構(gòu)默認(rèn)值為 Unknow 的 hometown。

const {hometown = 'Unknown'} = person;  
console.log(hometown); // 'Unknown'  

解構(gòu)函數(shù)參數(shù)

結(jié)束之前，我們來看看解構(gòu)最后一個(gè)應(yīng)用，函數(shù)參數(shù)解構(gòu)。假設(shè)你的函數(shù)有一個(gè)對(duì)象類型的參數(shù)，然后你就可以直接在參數(shù)表中解構(gòu)變量。
我們嘗試寫一個(gè)叫做 tostring 的函數(shù)，函數(shù)中將打印一個(gè)人的名字和年齡。

const toString = ({name, age}) => {  
  return `${name} is ${age} years old`;
}

toString(person); // Luke is 24 years old  

譯者注

本文翻譯至這里，譯者水平有限，錯(cuò)漏缺點(diǎn)在所難免，希望讀者批評(píng)指正。另：歡迎大家留言討論。