2017 年 01 月 03 日

解構JavaScript物件超簡單

本文獲作者WES BOS, ES6 FOR EVERYONE (ES6.io) 的講師 ,授權翻譯

解構(Destructuring )佔ES6很大的部分。如果你想了解所有關於解構的不同部分,請查看我的 ES6.io影片教程或閱讀本部落格上的一些其他文章。這篇文章將讓你覺得解構實際上超簡單。

除了箭頭函數(arrow functions),let 和 const,解構可能是你每一天每一天都會用到的。我發現它非常有用的,無論是我寫客戶端或 Node。

解構是什麼意思?它是一個JavaScript表達式,它允許我們從數組(arrays)、物件(objects),地圖(maps)和集合(sets)中提取數據 – 我們將在未來的ES6.io影片中進一步了解他們自己的變量。它允許我們從一個物件或一個數組中的項目中提取屬性(properties),每次多個。

讓我們來看看JavaScript解構真正解決什麼問題。有時你需要頂級變量(top level variables),如:

w1

你抓到重點了。你有一個重複的程式碼,你需要從一個物件(objects)或數組(arrays)內部的某些東西做一個變量。取代創建多個變量,我們可以在一單行(line)中解構它們,如下:

w6

大括號在等號的左邊?這不是一塊(block)。也不是一個物件(object)。這是新的解構語法。

上面的程式碼說,給我一個變量稱為 first,一個變量叫 last,從 person 物件取用。我們取 first 屬性(property) 和 last屬性(property),並將它們放入兩個新的變量,將範圍限定到父塊(parent block )或窗口(window)!。

w2

同樣的,如果我也想要 twitter,我只是到那加進 twitter,我會在我的實際範圍 const { first, last, twitter } = person; 得到一個第三個頂級變量。

這在許多使用案例下真的很方便。這只是一個嵌套級別 (nested level),但是例如,在 React.js 中經常要使用解構,因為數據是如此深的嵌套在 props 或 state 中。

假設我們有一些深層嵌套的數據,比如我們可能從 JSON api 中得到的結果:

w3

我想在這裡提取 Twitter 和 Facebook 的網址。我本可以如下做到,就像1994年我們都隨身帶walkmans聽音樂一樣:

w4

 

但我們可以使用解構(destructuring)來做得更好!

w5

注意我們如何解構 wes.links.social 而不只是 wes?這是很重要的,因為我們正在做多幾層的深度解構。

原文:A Dead Simple intro to Destructuring JavaScript Objects

輸入WESBOS coupon code 獲得 ES6 FOR EVERYONE 課程更進一步 USD10 折扣喔 !

Wes Bos 線上課程

您可能會有興趣

喜歡我們的服務與分享嗎?歡迎使用以下的社群分享按鈕分享給你的朋友吧!

 

 

 

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s

分類

Web開發

標籤