ES6解构 - 数组解构

nanaistaken

解构不仅可以用于对象类型,还可以用于数组。对象的解构是利用对象的属性名,而数组的解构是利用位置(坐标)的一一对应。本篇我们依然来看一下数组解构的基本用法:
一:数组解构的使用场景
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

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

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

阅读 8.8k

前端
主要是前端的一些东西
437 声望
15 粉丝
0 条评论
437 声望
15 粉丝
宣传栏