乐趣区

ES6解构-数组解构

jiezi

解构不仅可以用于对象类型，还可以用于数组。对象的解构是利用对象的属性名，而数组的解构是利用位置（坐标）的一一对应。本篇我们依然来看一下数组解构的基本用法：
一：数组解构的使用场景
1: 数组解构用于变量声明

let color = ['red', 'green', 'blue'];
let [firstColor, secondColor] = color;
console.log(firstColor); //red
console.log(secondColor); //green

let/const/var 后面跟上一对用中括号 [] 包裹的变量列表，变量的值为对应位置上的素组元素的值。
假如我们不想数组前面坐标的数据，而是想要中间位置，或者最后位置的，那么前面位置上的每一个元素留空，用逗号相隔就行了：

let color = ['red', 'green', 'blue'];
let [, , thirdColor] = color;
console.log(thirdColor); // blue

2: 数组解构用于变量赋值

let color = ['red', 'green', 'blue'];
firstColor = 'white';
secondColor = 'black';

[firstColor, secondColor] = color;

console.log(firstColor); //red
console.log(secondColor); //green

已经被初始化了的变量 firstColor 和 secondColor 通过数组解构重新被赋值。数组解构赋值的语法和用于变量声明很像，只是不再需要 let/const/var，整个解构赋值语句也不需要用 () 包裹，这一点和对象的解构赋值不一样。

二：嵌套数组（多维数组）的解构
前面的例子都是一维数组，我们来看看嵌套数组（多维数组）的解构：

let color = ['red', ['white', 'black'],'green', 'blue'];

let [firstColor, secondColor] = color;
let [, [firstChildColor]] = color;

console.log(secondColor); //["white", "black"]
console.log(firstChildColor); //white

color 变量是一个嵌套数组，它的第二个元素又是一个一维数组，所以代码的第二行我们解构出 secondColor 变量，它是一个一位数组（倒数第二行代码打印结果）。

而当我们在 color 变量的第二个元素位置先用一层中括号包裹一个变量（这里的 firstChildColor），那就说明我们解构的是 ’white’ 这个值了。其实这语法大家用逻辑去想就是恨自然而简单的。
三：不定元素（剩余元素）
函数有不定参数，在数组解构这里有个类似的概念：不定元素（或者叫剩余元素）。它就是用 … 展开运算符把数组的多个元素一起赋值给一个变量：

let color = ['red', 'green', 'blue'];
let [firstColor, ...secondColor] = color;
console.log(firstColor); //red
console.log(secondColor); //['green', 'blue']

这里需要特别注意的是不定元素变量（剩余元素变量）必须是解构的最后一个变量，其后面不能再有别的变量，否则会抛出语法错误，例如：

let color = ['red', 'green', 'blue'];
let [firstColor, ...secondColor, error] = color; // Uncaught SyntaxError: Rest element must be last element

既然剩余元素可以是数组的最后几个元素，那它当然也可以是数组的全部元素。我们可以利用这点来实现数组的 copy：

let color = ['red', 'green', 'blue'];
let [...copiedColor] = color;
console.log(copiedColor);// ["red", "green", "blue"]
console.log(color.toString() === copiedColor.toString()); // true
console.log(color == copiedColor); // false
console.log(color === copiedColor); // fasle

这里也要特别注意，剩余元素变量只是把数组元素 copy 到另一个数组，所以它们包含的元素相等，但是这 2 个数组是没有关系的，是不相等的。

四：对象和数组的混合解构
解构可以用在对象和数组，前面我们所有的例子都是单独的对象和数组，接下来我们来看看在一个混合和数组和对象的例子：

let node = {
    personalInfo: {
        basicInfo: {
            name: {
                firstName: 'mike',
                lastName: 'deep'
            },
        }
    },
    levelRange: [1, 3]
};
let {personalInfo: {basicInfo: {name}},
    levelRange: [lowLevel]
} = node;

console.log(name.firstName); // mike
console.log(lowLevel); // 1

其实混合解构和单独的对象解构和数组解构是一样的，对象的地方就用对象解构的语法，数组的地方就用数组解构的语法就对了。

以上，就是数组解构的所有内容。

退出移动版