資訊專欄INFORMATION COLUMN
摘要：跳過(guò)數(shù)組中的元素學(xué)會(huì)了如何按順序從數(shù)組中提取數(shù)據(jù)。解構(gòu)方法中提供了很好的解決方案。從對(duì)象中提取數(shù)據(jù)依然從最基本的開(kāi)始，提取從中提取和。
本文編譯：胡子大哈
翻譯原文：http://huziketang.com/blog/posts/detail?postId=58f41a06a58c240ae35bb8e6
英文連接：ES6: Destructuring — an elegant way of extracting data from arrays and objects in JavaScript
轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息
ES6 有很多新特性，它很大程度上提升了 JavaScript 的編程體驗(yàn)，并且也告訴外界，JavaScript 依舊強(qiáng)勢(shì)。
其中一個(gè)新特性是其對(duì)數(shù)組和對(duì)象的解構(gòu)，通過(guò)解構(gòu)方法從數(shù)組和對(duì)象中提取數(shù)據(jù)變得非常簡(jiǎn)單和方便。接下來(lái)看一下它是如何做到的，我們從數(shù)組開(kāi)始講起。
從數(shù)組中提取數(shù)據(jù)假設(shè)你有如下的數(shù)組，里面是幾個(gè)人的名字：
const names = ["Luke", "Eva", "Phil"];
接下來(lái)，使用解構(gòu)從里面提取數(shù)據(jù)。
從數(shù)組中取元素首先從最基本的開(kāi)始——提取數(shù)組中第一個(gè)元素。
const [first] = names;
console.log(first); // "Luke"
ok，下面分析一下這個(gè)語(yǔ)法都做了什么。把一個(gè)變量用中括號(hào)括起來(lái)，表示我們想要取得 names 數(shù)組中的第一個(gè)元素，并且把它分配給指定的變量，本例中即變量 first。
那么現(xiàn)在想要提取幾個(gè)元素，比如第一個(gè)和第二個(gè)怎么辦呢？很簡(jiǎn)單，在中括號(hào)中添加變量就可以。這樣會(huì)從數(shù)組中順序提取幾個(gè)元素分配給指定的變量。
const [first, second] = names;
console.log(first, second); // "Luke" "Eva"
元素缺失時(shí)的默認(rèn)值
以上面的數(shù)組為例，如果我們要取 4 個(gè)值，而數(shù)組中只有 3 個(gè)值會(huì)發(fā)生什么呢？
const [first, second, third, fourth] = names;
console.log(fourth); // undefined
這種場(chǎng)景下，fourth 是 underfined。
這在很多場(chǎng)景下都是我們不想見(jiàn)到的，所以可以當(dāng)數(shù)組中沒(méi)有那么多的值的時(shí)候，我們可以提前給變量賦上默認(rèn)值。
const [first, second, third, fourth="Martin"] = names;
console.log(fourth); // "Martin"
跳過(guò)數(shù)組中的元素
學(xué)會(huì)了如何按順序從數(shù)組中提取數(shù)據(jù)。現(xiàn)在有這樣的場(chǎng)景：想要跳過(guò)數(shù)組中的某個(gè)元素取值，這樣就可以避免取到不想取的值。解構(gòu)方法中提供了很好的解決方案。
var [first, , second] = names;
console.log(first, second); // "Luke" "Phil"
通過(guò)簡(jiǎn)單的添加逗號(hào)，就可以避免分配相應(yīng)的數(shù)組元素，直接跳到下一個(gè)元素了。如果想要跳過(guò)多個(gè)元素呢？也很簡(jiǎn)單，多加幾個(gè)逗號(hào)就可以了。
分配數(shù)組中剩下的給某元素到現(xiàn)在，已經(jīng)知道了如何從數(shù)組中提取單個(gè)元素，那么對(duì)于想要取數(shù)組中的后面連續(xù)部分的元素怎么辦呢？看下面的解構(gòu)代碼。
var [first, ...rest] = names;
console.log(rest); // ["Eva","Phil"]
通過(guò)在最后一個(gè)變量前加 ... 標(biāo)記，這個(gè)意思是分配數(shù)組中剩下的所有元素給 rest 變量。
解構(gòu)對(duì)象ok，數(shù)組的解構(gòu)已經(jīng)都學(xué)會(huì)了，下面看一下從對(duì)象中提取數(shù)據(jù)，假設(shè)有如下描述一個(gè)人的對(duì)象。
const person = {
name: "Luke",
age: "24",
facts: {
hobby: "Photo",
work: "Software Developer"
}
}
從對(duì)象中提取數(shù)據(jù)
依然從最基本的開(kāi)始，提取從 person 中提取 name 和 age。
const {name, age} = person;
console.log(name, age); // "Luke" "24"
可以看到，和從數(shù)組中提取數(shù)據(jù)的語(yǔ)法都是一樣的，唯一的不同是把方括號(hào)替換成了花括號(hào)。
提取嵌套值假設(shè)想要提取對(duì)象結(jié)構(gòu)中深層次的值該怎么處理？比如 person 中的 hobby。代碼如下。
const {facts: {hobby}} = person;
console.log(hobby); // "Photo"
通過(guò)冒號(hào)可以描述對(duì)象中的路徑，這樣就可以取到對(duì)象中深層的嵌套值了。
數(shù)據(jù)缺失時(shí)的默認(rèn)值如在解構(gòu)數(shù)組時(shí)的處理方案一樣，當(dāng)想要抽取的值不存在時(shí)，也可以給對(duì)象里的值賦默認(rèn)值。如下面代碼，想要提取 hometown 屬性，并且給定 Unknown 默認(rèn)值。
const {hometown = "Unknown"} = person;
console.log(hometown); // "Unknown"
解構(gòu)函數(shù)參數(shù)
在結(jié)束本文之前，我們來(lái)看最后一個(gè)例子——解構(gòu)函數(shù)參數(shù)。
假設(shè)你有一個(gè)函數(shù)，接受一個(gè)對(duì)象作為參數(shù)。那么你可以直接在參數(shù)列表中對(duì)對(duì)象進(jìn)行解構(gòu)。例如下面這個(gè) toString 函數(shù)，打印出 name 和 age。
const toString = ({name, age}) => {
return `${name} is ${age} years old`;
}
toString(person); // Luke is 24 years old
不過(guò)要提醒大家的是，這不是一個(gè)好的編程習(xí)慣，如果別人使用你的函數(shù)，很容易造成誤解，調(diào)試起來(lái)特別不方便，這里只是告訴大家可以這樣進(jìn)行解構(gòu)而已。
ok，那么到現(xiàn)在對(duì)于數(shù)組和對(duì)象的解構(gòu)問(wèn)題大家應(yīng)該都學(xué)會(huì)了，后面也還會(huì)介紹一些 JavaScript 的一些新特性，歡迎大家對(duì)我保持關(guān)注。
如果你認(rèn)為文章中還需要注意什么，或者添加什么，請(qǐng)讓我知道。
我最近正在寫(xiě)一本《React.js 小書(shū)》，對(duì) React.js 感興趣的童鞋，歡迎指點(diǎn)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/82669.html
摘要：被解構(gòu)的數(shù)據(jù)項(xiàng)位于賦值運(yùn)算符的右側(cè)，可以是任何數(shù)組和對(duì)象的組合，允許隨意嵌套。數(shù)組模式位于賦值運(yùn)算符的左側(cè)，被結(jié)構(gòu)的數(shù)組在其右側(cè)。 解構(gòu)是ES6的新特性，用于從JavaScript對(duì)象和數(shù)組中提取數(shù)據(jù)，語(yǔ)法上比ES5所提供的更加簡(jiǎn)潔、緊湊、清晰。它不僅能減少你的代碼量，還能從根本上改變你的編碼方式。用的越多，你就會(huì)發(fā)現(xiàn)越多塑造數(shù)據(jù)和函數(shù)的方式，這些實(shí)現(xiàn)方式在過(guò)去幾乎是不可能的。本文將深...
摘要：的解構(gòu)特性，可以簡(jiǎn)化這項(xiàng)工作。必須傳值的解構(gòu)參數(shù)如果調(diào)用函數(shù)時(shí)不提供被解構(gòu)的參數(shù)會(huì)導(dǎo)致程序拋出錯(cuò)誤程序報(bào)錯(cuò)缺失的第三個(gè)參數(shù)，其值為。 在編碼過(guò)程中，我們經(jīng)常定義許多對(duì)象和數(shù)組，然后有組織地從中提取相關(guān)的信息片段。ES6的解構(gòu)特性，可以簡(jiǎn)化這項(xiàng)工作。解構(gòu)是一種打破數(shù)據(jù)結(jié)構(gòu)，將其拆分為更小部分的過(guò)程。 未使用解構(gòu)的做法 let options = { repeat: true, ...
摘要：模板字符串甚至還能嵌套解構(gòu)賦值允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)。運(yùn)算符使用場(chǎng)景應(yīng)該稍少一些，主要是處理不定數(shù)量參數(shù)，可以避免對(duì)象的使用。 es6中較為常用的書(shū)寫(xiě)風(fēng)格 為了書(shū)寫(xiě)的方便，es6中提出了很多比較友好的書(shū)寫(xiě)方式，其中最為常見(jiàn)的屬于以下幾個(gè)： 字符串模板 `abcdef${test}` 解構(gòu)賦值 let [a, b, c] = [1,...
摘要：前言前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值解構(gòu)賦值允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)。對(duì)象的解構(gòu)賦值是根據(jù)對(duì)象值進(jìn)行匹配。前言該篇筆記是第二篇 變量的解構(gòu)賦值。這一章原文鏈接： 變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)（Destructuring）。解構(gòu)賦值是對(duì)賦值運(yùn)...
摘要：前言該篇筆記是第二篇變量的解構(gòu)賦值。這一章原文鏈接變量的解構(gòu)賦值解構(gòu)賦值允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)變量進(jìn)行賦值，這被稱為解構(gòu)。對(duì)象的解構(gòu)賦值是根據(jù)對(duì)象值進(jìn)行匹配。 前言該篇筆記是第二篇 變量的解構(gòu)賦值。 這一章原文鏈接： 變量的解構(gòu)賦值解構(gòu)賦值ES6 允許按照一定模式，從數(shù)組和對(duì)象中提取值，對(duì)...
閱讀 2944·2023-04-25 18:58
閱讀 1057·2021-11-25 09:43
閱讀 1272·2021-10-25 09:46
閱讀 3567·2021-09-09 11:40
閱讀 1806·2021-08-05 09:59
閱讀 932·2019-08-29 15:07
閱讀 1014·2019-08-29 12:48
閱讀 786·2019-08-29 11:19
