ES6: 解構(gòu)賦值-一種從數(shù)組或者對(duì)象中提取數(shù)據(jù)的優(yōu)雅方式

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ū)⑹O虏糠謹(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)指正。另:歡迎大家留言討論。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • 基本用法 ES6 允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring...
    嘉奇呦_nice閱讀 791評(píng)論 0 2
  • 1.數(shù)組的解構(gòu)賦值 2.對(duì)象的解構(gòu)賦值 3.字符串的解構(gòu)賦值 4.數(shù)值和布爾值的解構(gòu)賦值 5.函數(shù)參數(shù)的解構(gòu)賦值 ...
    卞卞村長L閱讀 922評(píng)論 0 0
  • 本文通過學(xué)習(xí)阮一峰的博客,外加自己的理解,整理了一下我對(duì)js變量的解構(gòu)賦值的理解。 數(shù)組的解構(gòu)賦值 對(duì)象的解構(gòu)賦值...
    宋樂怡閱讀 498評(píng)論 0 2
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 134,869評(píng)論 18 139
  • 原稿: 我揣著120個(gè)不愿意來到來到咖啡廳,眼前頓時(shí)一亮,這不是我暗戀了三年的男神嗎?我的小心臟開始撲通撲通亂跳。...
    靜聽陌上時(shí)光閱讀 257評(píng)論 5 1