ES6数组解构详细用法解析 _ES6数组

本文概述

数组解构和Rest运算符
数组解构和默认值
交换变量
从函数解析返回的数组

重构意味着将复杂的结构分解为更简单的部分。使用解构语法, 你可以从对象和数组中提取较小的片段。它可以用于变量的赋值和声明。
解构是一种从存储在数组或对象中的数据中提取多个值的有效方法。解构数组时, 我们在分配中使用它们的位置(或索引)。
让我们尝试通过使用一些插图来理解数组的解构：
例子

var arr = ["Hello", "World"]// destructuring assignmentvar [first, second] = arr; console.log(first); // Helloconsole.log(second); // World

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

HelloWorld

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

var colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"]; // destructuring assignmentvar[color1, color2, color3] = colors; console.log(color1); // Violetconsole.log(color2); // Indigoconsole.log(color3); // Blue

输出如下

VioletIndigoBlue

例子
【ES6数组解构详细用法解析】如果要从给定数组中选择随机元素, 则可以在数组分解中执行以下操作：

var colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"]; // destructuring assignmentvar[color1, , color3, , color5] = colors; //Leave space for unpick elementsconsole.log(color1); // Violetconsole.log(color3); // Blueconsole.log(color5); // Yellow

在上面的示例中, 我们定义了一个名为colors的数组, 其中包含七个元素。但是我们必须显示给定数组中的三种随机颜色, 即紫罗兰色, 蓝色和黄色。这些数组元素位于位置0、2和4中。
销毁期间, 你必须为未选择的元素留出空间, 如上例所示。否则, 你会得到意想不到的结果。
输出如下

VioletBlueYellow

注意：我们不能使用数字进行销毁。使用数字将引发错误, 因为数字不能是变量的名称。数组解构和Rest运算符通过在数组解构中使用rest运算符(…), 可以将数组的所有剩余元素放入新数组中。
让我们尝试通过一个例子来理解它。
例子

var colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"]; // destructuring assignmentvar [a, b, ...args] = colors; console.log(a); console.log(b); console.log(args);

输出如下