ES6：解構——JavaScript 從陣列和物件中提取資料的優雅方法

鬍子大哈發表於2017-04-24
JavaScript陣列物件

本文編譯：鬍子大哈

翻譯原文：huziketang.com/blog/posts/…

英文連線：ES6: Destructuring — an elegant way of extracting data from arrays and objects in JavaScript

轉載請註明出處，保留原文連結以及作者資訊

ES6：解構——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 感興趣的童鞋，歡迎指點。

相關文章