重新介绍解构赋值

如果您编写 JavaScript，您可能熟悉 ES2015 和所有引入的新语言标准。 一种非常受欢迎的标准是解构分配。 “深入”数组或对象并更直接地引用其中的某些内容的能力。 它通常是这样的。

 const response = { status: 200, data: {} } // instead of response.data we get... const {data} = response //now data references the data object directly const objectList = [ { key: 'value' }, { key: 'value' }, { key: 'value' } ] // instead of objectList[0], objectList[1], etc we get... const [obj, obj1, obj2] = objectList // now each object can be referenced directly

然而，解构赋值是如此强大的语法，以至于许多开发人员，甚至那些从它首次发布就一直在使用它的人，忘记了它可以做的一些事情。 在这篇文章中，我们将介绍对象和数组解构的五个真实示例，有时两者都有！ 只是为了好玩，我将包括一个我前几天遇到的奇怪的例子。

1.嵌套解构

能够访问对象内部的顶级键或数组的第一个元素是强大的，但它也有一定的限制。 它只消除了一个级别的复杂性，我们最终仍然会得到一系列点或[0]引用来访问我们真正想要的内容。

事实证明，解构可以超越顶层。 这样做可能有正当理由。 以来自 HTTP 请求的对象响应为例。 我们想超越数据对象，只访问用户。 只要我们知道我们正在寻找的密钥，这不是问题。

 const response = { status: 200, data: { user: { name: 'Rachel', title: 'Editor in Chief' }, account: {}, company: 'Smashing Magazine' } } const {data: {user}} = response // user is { name: 'Rachel', title: 'Editor in Chief'}

嵌套数组也可以这样做。 在这种情况下，您不需要知道密钥，因为没有密钥。 你需要知道的是你正在寻找的东西的位置。 您需要为每个元素提供一个参考变量（或逗号占位符），直到您要查找的那个（我们稍后会谈到）。 该变量可以命名为任何名称，因为它不尝试匹配数组中的值。

 const smashingContributors = [['rachel', ['writer', 'editor', 'reader']], ['laurie', ['writer', 'reader']]] const [[rachel, roles]] = smashingContributors // rachel is 'rachel' // roles is [ 'writer', 'editor', 'reader' ]

请记住，与任何工具一样，应谨慎使用这些功能。 识别您的用例和代码库的受众。 考虑可读性和易于更改的道路。 例如，如果您只想访问一个子数组，也许地图会更合适。

2.对象和数组解构

对象和数组是常见的数据结构。 事实上，如此普遍，以至于一个经常出现在另一个里面。 除了嵌套解构之外，我们可以访问嵌套属性，即使它们与我们正在访问的外部数据结构类型不同。

以对象内的数组为例。

 const organization = { users: ['rachel', 'laurie', 'eric', 'suzanne'], name: 'Smashing Magazine', site: 'https://www.smashingmagazine.com/' } const {users:[rachel]} = organization // rachel is 'rachel'

相反的用例也是有效的。 对象数组。

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name}] = users // name is 'rachel'

事实证明，在这个例子中我们有一点问题。 我们只能访问第一个用户的名字； 否则，我们将尝试使用 'name' 来引用两个不同的字符串，这是无效的。 我们的下一个解构场景应该解决这个问题。

3.别名

正如我们在上面的例子中看到的（当我们在想要拉出的不同对象中有重复的键时），我们不能以“典型”的方式这样做。 变量名不能在同一个作用域内重复（这是最简单的解释方式，显然比这更复杂）。

 const users = [{name: 'rachel', title: 'editor'}, {name: 'laurie', title: 'contributor'}] const [{name: rachel}, {name: laurie}] = users // rachel is 'rachel' and laurie is 'laurie'

别名仅适用于对象。 这是因为数组可以使用开发人员选择的任何变量名，而不必匹配现有的对象键。

4. 默认值

解构通常假设它所引用的值是存在的，但如果它不存在怎么办？ 乱扔未定义值的代码永远不会令人愉快。 这时候默认值就派上用场了。

让我们看看它们是如何作用于对象的。

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name='Brian', role='publisher'} = user // name is Luke // role is publisher

如果引用的键已经有值，则忽略默认值。 如果对象中不存在该键，则使用默认值。

我们可以对数组做类似的事情。

 const roleCounts = [2] const [editors = 1, contributors = 100] = roleCounts // editors is 2 // contributors is 100

与对象示例一样，如果该值存在，则忽略默认值。 查看上面的示例，您可能会注意到我们正在解构的元素比数组中存在的元素多。 解构更少的元素呢？

5. 忽略价值观

解构的最佳部分之一是它允许您访问作为更大数据结构一部分的值。 这包括隔离这些值并忽略其余内容，如果您愿意的话。

实际上，我们之前已经看到了一个例子，但是让我们隔离我们正在谈论的概念。

 const user = {name: 'Luke', organization: 'Acme Publishing'} const {name} = user // name is Luke

在这个例子中，我们从不解构organization ，这完全没问题。 它仍然可以在user对象内部进行引用，就像这样。

 user.organization

对于数组，实际上有两种“忽略”元素的方法。 在对象示例中，我们通过使用关联的键名专门引用内部值。 当数组被解构时，变量名是按位置分配的。 让我们从忽略数组末尾的元素开始。

 const roleCounts = [2, 100, 100000] const [editors, contributors] = roleCounts // editors is 2 // contributors is 100

我们解构了数组中的第一个和第二个元素，其余的无关紧要。 但是后来的元素呢？ 如果它是基于位置的，我们是否必须解构每个元素直到我们找到我们想要的元素？

事实证明，我们没有。 相反，我们使用逗号来暗示这些元素的存在，但如果没有引用变量，它们将被忽略。

 const roleCounts = [2, 100, 100000] const [, contributors, readers] = roleCounts // contributors is 100 // readers is 100000

我们可以同时做这两件事。 使用逗号占位符在任何我们想要的地方跳过元素。 同样，与对象示例一样，“忽略”的元素仍然可以在roleCounts数组中进行引用。

古怪的例子

解构的力量和多功能性也意味着你可以做一些真正奇怪的事情。 他们是否会派上用场很难说，但值得知道这是一个选择！

一个这样的例子是您可以使用解构来制作浅拷贝。

 const obj = {key: 'value', arr: [1,2,3,4]} const {arr, arr: copy} = obj // arr and copy are both [1,2,3,4]

解构可用于的另一件事是取消引用。

 const obj = {node: {example: 'thing'}} const {node, node: {example}} = obj // node is { example: 'thing' } // example is 'thing'

与往常一样，可读性是最重要的，所有这些例子都应该在司法上使用。 但是了解所有选项可以帮助您选择最好的选项。

结论

JavaScript 充满了复杂的对象和数组。 无论是来自 HTTP 请求的响应，还是静态数据集，能够有效地访问嵌入的内容都很重要。 使用解构赋值是一个很好的方法。 它不仅处理多层次的嵌套，而且允许集中访问并在未定义引用的情况下提供默认值。

即使您多年来一直使用解构，规范中也隐藏着很多细节。 我希望这篇文章能够提醒您该语​​言为您提供的工具。 下次您编写代码时，也许其中一个会派上用场！