ES6 数组解构
ES6 数组解构
解构意味着将复杂的结构分解为更简单的部分。使用解构语法，您可以从对象和数组中提取更小的片段。它可用于变量的赋值和声明。
解构是一种从存储在数组或对象中的数据中提取多个值的有效方法。解构数组时，我们在赋值中使用它们的位置(或索引)。
让我们尝试通过一些插图来理解数组解构:
示例
var arr = ["Hello", "World"]
// destructuring assignment
var [first, second] = arr;
console.log(first); // Hello
console.log(second); // World
在上面的例子中，解构赋值的左侧用于定义从源变量解包需要哪些值。
输出
再举一个数组解构的例子。
例子
var colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];
// destructuring assignment
var[color1, color2, color3] = colors;
console.log(color1); // Violet
console.log(color2); // Indigo
console.log(color3); // Blue
输出
示例
如果你想从给定的数组中选择随机元素，那么在数组解构中你可以执行如下操作:
var colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];
// destructuring assignment
var[color1, ,color3, ,color5] = colors; //Leave space for unpick elements
console.log(color1); // Violet
console.log(color3); // Blue
console.log(color5); // Yellow
在上面的例子中，我们定义了一个名为colors的数组，它有七个元素。但是我们必须显示给定数组中的三种随机颜色，分别是紫色、蓝色、 和黄色。这些数组元素位于 0、2、 和 4 位置。
在解构过程中，您必须为 unpick 元素留出空间，如上例所示。否则，您会得到意想不到的结果。
输出
注意: 我们不能使用数字进行解构。使用数字会引发错误，因为数字不能是变量的名称。
数组解构和Rest运算符
通过在数组解构中使用rest运算符(...)，可以将数组的所有剩余元素放入
让我们试着用一个例子来理解它。
例子
var colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];
// destructuring assignment
var [a,b,...args] = colors;
console.log(a);
console.log(b);
console.log(args);
输出
Violet
Indigo
[ 'Blue', 'Green', 'Yellow', 'Orange', 'Red' ]
数组解构和默认值
如果您从数组中获取一个值并且该值未定义，那么您可以为变量分配一个默认值。
示例
var x, y;
[x=50, y=70] = [100];
console.log(x); // 100
console.log(y); // 70
输出
交换变量
两个变量的值可以在一个解构表达式中交换。数组解构使得在不使用任何临时变量的情况下轻松交换变量的值。
示例
var x = 100, y = 200;
[x, y] = [y, x];
console.log(x); // 200
console.log(y); // 100
输出
解析函数返回的数组
一个函数可以返回一个值数组。总是可以从函数返回数组，但是数组解构使得解析函数返回的数组更加简洁。
让我们通过一个例子来理解它。
示例
function array() {
return [100, 200, 300];
}
var [x, y, z] = array();
console.log(x); // 100
console.log(y); // 200
console.log(z); // 300
在上面的例子中，我们定义了array()函数，它返回一个包含三个元素的数组。我们使用数组解构将上述数组元素在一行代码中解构为特定的元素 x、y 和 z。
输出
