ECMAScript/ES6数组解构

ECMAScript/ES6数组解构

解构是将复杂的结构分解为更简单的部分。 使用解构语法，可以从对象和数组中提取较小的片段。用于变量的赋值和声明。

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

下面我们通过使用一些示例来理解数组的解构：

var arr = ["Hello", "World"]  

// destructuring assignment  
var [first, second] = arr;  

console.log(first); // Hello  
console.log(second); // World

在上面的示例中，解构分配的左侧用于定义从源变量解包所需的值。

Hello
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

执行上面示例代码，得到以下结果：

Violet
Indigo
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的数组，其中包含七个元素。 但是显示给定数组中的三种随机颜色，即Violet, Blue 和 Yellow。 这些数组元素位于位置0、2和4中。

销毁期间，需要为未选择的元素留出空间，如上例所示。 否则会得到意想不到的结果。

Violet
Blue
Yellow

注意：不能使用数字进行销毁。 使用数字将引发错误，因为数字不能是变量的名称。

1.数组解构和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' ]

2. 数组解构和默认值

如果要从数组中获取一个值，并且该值未定义，则可以为变量分配默认值。

var x, y;  

[x=50, y=70] = [100];  
console.log(x); // 100  
console.log(y); // 70

执行上面示例代码，得到以下结果：

100
70

3.交换变量

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

示例代码：

var x = 100, y = 200;  
[x, y] = [y, x];  
console.log(x); // 200  
console.log(y); // 100

执行上面示例代码，得到以下结果：

200
100

4.从函数解析返回的数组

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

我们通过下面一个例子来理解。

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。

100
200
300

目录
ECMAScript/ES6数组解构