- ECMAScript/ES6版本
- ECMAScript/ES6开发环境安装
- ECMAScript/ES6语法
- ECMAScript/ES6散布运算符
- ECMAScript/ES6 Rest参数
- ECMAScript/ES6变量
- ECMAScript/ES6运算符
- ECMAScript/ES6循环
- ECMAScript/ES6决策定制
- ECMAScript/ES6函数
- ECMAScript/ES6箭头函数
- ECMAScript/ES6生成器
- ECMAScript/ES6 IIFE(立即调用函数表达式)
- ECMAScript/ES6数组
- ECMAScript/ES6数组方法
- ECMAScript/ES6数组解构
- ECMAScript/ES6映射/Map
- ECMAScript/ES6集合/Set
- ECMAScript/ES6对象
- ECMAScript/ES6对象解构
- ECMAScript/ES6类
- ECMAScript/ES6字符串
- ECMAScript/ES6模板文字
- ECMAScript/ES6事件
- ECMAScript/ES6 Cookies
- ECMAScript/ES6对话框
- ECMAScript/ES6页面重定向
- ECMAScript/ES6 Number对象
- ECMAScript/ES6 void关键字
- ECMAScript/ES6页面打印
- ECMAScript/ES6 Boolean对象
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
扫描二维码
程序员编程王