关于 JavaScript 中的解构赋值，你需要知道的一切

有一个事实不容否认——任何事物一旦建成，都可能被摧毁。这个概念同样适用于编程。在本文中，我将讨论 JavaScript 中的解构赋值。

在 JavaScript 中，解构是指将对象的属性或数组的索引分解，从而创建特定的变量。但这并不意味着这些被分离的对象或数组在程序中就不能再次使用。

不过，在开始之前，我先简要概述一下数组和对象之间的一些重要区别。数组使用数字索引，而对象使用字符串索引。此外，数组和对象的语法也不同。

在 JavaScript 中，我们可以将对象放入数组中，也可以将数组放入对象中，这种语法允许我们将所有内容放在任何我们想要的位置。

现在我们来谈谈主要内容：解构。解构一个对象或数组并不意味着你会将其从程序中删除，使其永远无法再次使用，而是意味着你会获取到它的特定部分。让我们以著名的库 Axios 为例。我们可以发送一个 HTTP 请求（例如使用 Fetch API 或 XmlHttpRequest），它会返回以下对象的 schema：

我们将重点关注 data 属性！它是一个包含服务器所有响应数据的对象。假设我们想通过 NodeJS API 和 MongoDB 数据库获取所有用户，我们可以执行类似以下代码的操作。

在这种情况下，req常量将是一个与之前相同的模式的对象。因此，要获取用户数据，我们需要一个req.data包含用户数组的对象。

现在我们已经了解了如何执行 Axios 请求，假设我们只想获取某个用户，而这个用户可以通过路由获取/api/users/:userid。例如，如果目标用户的 ID 是 `user_id` 7，我们就向 `user_id` 发送请求/api/users/7。但是如果 API 返回的是一个数组呢？那么我们可以这样做，req.data[0]这虽然是一种不错的方法，但不如使用析构函数来得实用……

首先，我们来获取data对象。我们可以获取req.data其他请求的属性，但我们并不关心这些属性，所以我们只获取数据。我们将使用对象解构赋值。（终于有点激动人心了！）

是的，我们只获取到了data属性，它创建了一个名为data! 的对象。你已经在 J​​avaScript 中完成了“解构赋值”，太棒了！

例如，我们可以在同一个解构赋值中销毁多个属性，Axios 提供了一个status属性，所以让我们通过解构来获取它！

我们还可以像下面这样为任何已销毁的属性赋予默认值。

已销毁属性的默认值。但是我们对象的名称并不是我们真正想要的，我们希望users对象更容易理解。所以，让我们在不创建任何新变量的情况下赋予对象一个名称。

很酷吧？你可以在同一行代码中将已销毁的属性赋值给新变量，而且看起来一点也不突兀！现在我们就有了一个命名规范的users对象。

即便如此，users它仍然是一个数组，我们又能用它做什么呢？现在，我向你展示数组的解构赋值：

使用数组进行析构赋值：在这种情况下，会创建一个新的常量，它将接收数组的a索引（数组的值为 0 ）。常量声明在析构赋值语句中的位置决定了要获取其值的索引。0[1, 2, 3]1

0在这种情况下，a 是一个新的常量，它将接收数组的索引[1, 2, 3]（数组的值为1）。常量声明在析构赋值语句中的位置决定了将要取值的索引。

与对象类似，我们可以设置默认值和多个声明。它们的位置始终与所选数组的索引相匹配。

我们还可以通过不声明变量的方式绕过任何索引 ,。在下面的例子中，我们将绕过索引 10和12（两个逗号）。c的值将等于第三个索引，其值为6。

绕过数组的析构赋值中的索引 现在我们知道了如何使用数组和对象的析构赋值，我们终于可以解决变量users是一个只有一个索引的数组的情况了。

我们可以嵌套使用解构赋值，而且效果很好。所以，把数组的解构赋值放在对象的解构赋值中，你就能得到相同的结果，选中的属性也会被选中：

总而言之，我们已经销毁了指令data的属性axios.get('/api/users/7')。接下来，我们将数据赋值给一个合适的变量名users。之后，我们使用数组的销毁赋值操作，将该变量定义users为属性的第一个索引data。

就像之前看到的那样，每个解构赋值都可以递归使用，顺序不限。对象的解构赋值可以用于其他对象的解构赋值，数组的解构赋值也是如此。

现在我们已经完全了解如何在 JavaScript 中销毁对象和数组。但还有另一种销毁赋值技巧，称为“剩余模式”或“扩展”。它允许你将剩余的未销毁属性/索引传递给一个新变量。以下是数组的示例，但你也可以对对象执行相同的操作：

感谢阅读，希望你现在已经了解了 JavaScript 中的解构赋值！