解构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)，如：

你抓到重点了。你有一个重複的程式码，你需要从一个物件(objects)或数组(arrays)内部的某些东西做一个变量。取代创建多个变量，我们可以在一单行(line)中解构它们，如下：

大括号在等号的左边？这不是一块(block)。也不是一个物件(object)。这是新的解构语法。

上面的程式码说，给我一个变量称为 first，一个变量叫 last，从 person 物件取用。我们取 first 属性(property) 和 last属性(property)，并将它们放入两个新的变量，将範围限定到父块(parent block )或窗口(window)！。

同样的，如果我也想要 twitter，我只是到那加进 twitter，我会在我的实际範围 const { first, last, twitter } = person; 得到一个第三个顶级变量。

这在许多使用案例下真的很方便。这只是一个嵌套级别 (nested level)，但是例如，在 React.js 中经常要使用解构，因为数据是如此深的嵌套在 props 或 state 中。

假设我们有一些深层嵌套的数据，比如我们可能从 JSON api 中得到的结果：

我想在这里提取 Twitter 和 Facebook 的网址。我本可以如下做到，就像1994年我们都随身带walkmans听音乐一样：

但我们可以使用解构(destructuring)来做得更好！

注意我们如何解构 wes.links.social 而不只是 wes？这是很重要的，因为我们正在做多几层的深度解构。

原文：A Dead Simple intro to Destructuring JavaScript Objects

输入WESBOS coupon code 获得 ES6 FOR EVERYONE 课程更进一步 USD10 折扣喔 ！

Wes Bos 线上课程

REACT for BEGINNERS (特价中)
ES6 for EVERYONE (特价中)
Sublime TextBook (特价中)