原文：How to Destructure an Array in JavaScript，作者：Madison Kanna
数组解构是一种从存储在数组中的数据中提取多个值的有效方法。
在这篇文章中，我们将学习数组解构。我们将通过示例来了解数组解构如何工作的细节。
我还制作了本教程的视频：
让我们开始吧。
首先打开网络浏览器，然后打开 JavaScript 控制台，我们将在那里编写代码。你可以在这里找到关于如何打开控制台的说明。
如何解构数组中的元素
接下来，我们将创建一个数组，名为 animals，并添加值 dog、cat 和 horse。
const animals = ['Dog', 'Cat', 'Horse']
接下来，假设我们要创建一个只有 dog 值的变量。我们称这个变量为 dogVar，是 dog 变量的缩写。在 ES6 中引入数组解构之前，我们会这样做：
dogVar = animals[0]
接下来我们希望 cat 和 horse 的值也包含在它们自己的变量中，这样写：
const catVar = aniamls[1]
const horseVar = animals[2]
在这里，我们编写了 3 行单独的代码。让我们改用数组解构，写 1 行代码而不是 3 行。
解构如何工作
使用数组解构，我们可以只写 1 行代码：
const [firstElement, secondElement, thirdElement] = animals
看起来我们在这里创建了一个数组，但并不是。我们正在解构这个数组。解构可以将数组中的值分解为不同的变量。
解构获取左侧数组中的每个变量，并将其映射到 animals 数组中相同索引处的元素。
当我们写出 firstElement 时，我们是说我们想要访问动物数组中的第一个元素并将其分配给 firstElement 的变量。
使用 secondElement，我们说我们想要访问数组中的第二个元素并将其分配给 secondElement 的变量。thirdElement 变量也是如此。
这里的关键点是这些名称 [firstElement, secondElement, thirdElement] 无关紧要。重要的是顺序。
解构的顺序将告诉我们数组中的哪些元素分配给了哪些变量。
让我们看看解构数组的第一行代码。让我们把它的这一部分 [firstElement, secondElement, thirdElement] 想象成一个数组。
如果这是一个数组，firstElement 将位于数组的位置 0。JavaScript 将看到这个 firstElement 变量位于位置 0，然后它将进入 animals 数组并找到位于位置 0 的元素，并将该元素分配给变量 firstElement。
（请记住，数组是基于零索引的，这意味着我们从 0 而不是 1 开始计算它们。）
解构时，我们可以给变量取任何我们想要的名字。同样，重要的是顺序，而不是命名。例如我们可以这样写：
const [dog, cat, horse] = animals
现在我们有了所有的值。如果我们写出 dog, cat, horse，我们可以得到所有具有正确值的变量名：
dog // returns 'Dog'
cat // returns 'Cat'
horse // returns 'Horse'
如果我们回到这个例子开头的代码，我们有 3 行代码来为 dog、cat 和 horse 创建变量。使用数组解构，我们只使用 1 行代码。解构只是一条捷径。这是一种从数组中提取多个值的简单、快速的方法。
但是，如果你只想从数组中获取一个元素，比如数组中的第二个或第三个元素，然后将该元素存储在一个变量中呢？
如何解构数组中的第二个或第三个元素
接下来，假设我们有一个数组 Fruits：
const Fruits = ['banana', 'apple', 'orange']
如果我们只想获取 apple 的值，并将其分配给 apple 的变量名怎么办？
我们不能只是写 const [apple] = animals。为什么不能？如果我们这样做，那么变量 apple 的值将出错，是 'banana'。为什么是这样？
这是因为，顺序很重要。使用 const [apple] = fruits，JavaScript 会查看 apple，发现它位于位置 0，然后在 Fruits 数组中的位置 0 处找到元素，即 'banana'，并将该元素分配给 apple 变量。
我们不希望这种情况发生，那么应该怎么写呢？
我们应该写：const [, apple] = fruits
这个逗号充当一种占位符，告诉 JavaScript 就像第一个元素在那里一样，所以这个 apple 变量现在是这里的第二个元素。换句话说，apple 现在在位置 1。
假设我们只需要变量中的 orange 值，而不关心 apple 或 banana 元素。我们可以再次像这样使用逗号：
const [, , orange] = fruits
如果我们在控制台中写出 orange，会看到我们成功创建了 orange 变量，并且它的值为 'orange'。
最后要注意的一件事是，如果你学习 React，你可能会经常使用带有 React hooks 的数组解构。例如，你可能会看到如下内容：
const [count, setCount] = useState(0)
好啦，我们已经了解了数组解构的所有内容。
感谢你阅读本文！
如果你喜欢这篇文章，请加入我的编程俱乐部，我们每周日一起进行编程挑战，并在学习新技术时互相支持。
如果你对这篇文章有任何反馈或问题，可以在 Twitter @madisonkanna 联系我。