3 个有效解构作业的例子

对象解构

数组解构

一起行动，并使用别名！

权力

ECMAScript 不断添加新功能，使我们的代码更加强大。我甚至发起了一个关于大家最喜欢哪些功能的讨论。

你最喜欢 ES2015+ 的哪个新增功能？

Laurie ・ 2019年6月11日 ・ 阅读时长：1分钟

#讨论 #JavaScript #Web开发

我在文档中列出了我的操作是解构赋值。你可以在Mozilla 文档中了解更多信息。

那么，事不宜迟，下面就让我们来看一些这种语法的实际应用示例吧！

对象解构

假设我们有一个想要操作的对象，它看起来像这样：

{
  data: {
    item: "this thing"
  }
}

如果把它传递给一个函数并进行访问，item那就有点混乱了。

(result) => {
   result.data.item
}

通过解构赋值，我们可以把它变成这样！

({data}) => {
   data.item
}

模块的导入和导出经常用到这个概念。

导出、导入和默认值，我的天哪！

Laurie ・ 2019年4月29日 ・ 阅读时长：3分钟

#javascript #react #webdev #beginners

数组解构

如果我们用数组代替呢？

[
  {
    item: "this thing"
  },
  {
    num: 200
  }
]

不进行结构化赋值就访问它是不太理想的做法。

(result) => {
   result[0].item
}

但看看 ES2015+ 的强大之处吧！

([data, status]) => {
   data.item
}

一起行动，并使用别名！

Promise.all前几天在使用的时候，我偶然发现了一个解构赋值的绝佳用例。如果你不熟悉的话，解构Promise.all赋值可以解析多个 Promise 对象，并将结果放入一个数组中。类似这样：

[result1, result2]

现在，想想一个典型的 Promise 响应（尤其是如果是 HTTP 请求），这两个结果可能看起来都与此类似。

{
  data: {
    item: "this thing"
  }
}

我们可以将之前的两个例子结合起来，使访问每个响应对象中的内容变得更加简洁。

Promise.all([
            promise1,
            promise2,
        ]).then(([{ data: result1 }, { data: result2 }]) => {
            result1.item
        });

现在，这里发生了很多事情。

• 我们使用数组解构来单独访问数组中的每个元素。
• 然后，我们对这些数组元素使用对象解构。

但事情还有转折。这是什么？

{data: result1}

这是将一个变量名赋值给数据对象。我们不想使用 ` in` data，因为我们还要访问名为 ` datain`的对象result2。请注意，我们要访问的对象在前，名称在后。以下代码将无法正常工作。

Promise.all([
            promise1,
            promise2,
        ]).then(([{ result1: data }, { result2: data }]) => {
            result1.item
        });

变量名必须唯一（这很正常）。而且在这个例子中，同一个变量名data被用了两次。

权力

瞧，这就是解构赋值带来的效果。看看我们的代码可以变得多么简洁！