ES6：解構——JavaScript 從數組和對象中提取數據的優雅方法

本文編譯：鬍子大哈

翻譯原文：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 感興趣的童鞋，歡迎指點。