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