ES6 数组解构

解构意味着将一个复杂的结构分解成更简单的部分。使用解构的语法，您可以从对象和数组中提取更小的片段。它可以用于变量的赋值和声明。

解构是一种从存储在数组或对象中的数据中提取多个值的有效方法。当解构数组时，我们在赋值中使用它们在数组中的位置（或索引）。

让我们尝试通过一些示例来理解数组解构

示例

在上面的例子中，解构赋值的左侧用于定义需要从源变量中解包的值。

输出

Hello
World

让我们再看一个数组解构的例子。

示例

输出

Violet
Indigo
Blue

示例

如果要从给定的数组中选择随机元素，那么在数组解构中，您可以按如下方式执行：

在上面的例子中，我们定义了一个名为 colors 的数组，其中包含七个元素。但是我们必须从给定的数组中显示三个随机颜色，即 紫色、蓝色和 黄色。这些数组元素位于 0、2 和 4 的位置。

在解构期间，您必须为未选中的元素留出空格，如上例所示。否则，您将得到意外的结果。

输出

Violet
Blue
Yellow

注意：我们不能使用数字进行解构。使用数字会抛出错误，因为数字不能用作变量的名称。

数组解构和 Rest 运算符

通过在数组解构中使用 rest 运算符 (...)，您可以将数组的所有剩余元素放入一个新数组中。

让我们尝试通过一个例子来理解它。

示例

输出

Violet
Indigo
[ 'Blue', 'Green', 'Yellow', 'Orange', 'Red' ]

数组解构和默认值

如果您从数组中取出一个值，并且该值未定义，那么您可以为变量分配一个默认值。

示例

输出

100
70

交换变量

可以在一个解构表达式中交换两个变量的值。数组解构使交换变量的值变得容易，而无需使用任何临时变量。

示例

输出

200
100

从函数解析返回的数组

一个函数可以返回一个值数组。从函数返回一个数组总是可能的，但是数组解构使解析从函数返回的数组更加简洁。

让我们通过一个例子来理解它。

示例

在上面的例子中，我们定义了 array() 函数，它返回一个包含三个元素的数组。我们使用数组解构将上述数组元素解构为代码单行中的特定元素 x、y 和 z。

输出

100
200
300