ES6解构 - 数组解构

李增田发布于2019-08-26 10:28 / 1832人阅读

摘要：对象的解构是利用对象的属性名，而数组的解构是利用位置坐标的一一对应。本篇我们依然来看一下数组解构的基本用法一数组解构的使用场景数组解构用于变量声明后面跟上一对用中括号包裹的变量列表，变量的值为对应位置上的素组元素的值。

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

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

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

服务器托管云服务器对象解构解构函数解构赋值 ES6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106235.html

ES6 学习笔记（一）let，const和解构赋值

摘要：另外对于已经声明的变量进行解构赋值时，要非常小心。因此在行首加，将其强制转化为表达式执行。由于和无法转为对象，所以对它们进行解构赋值，都会报错。 let和const let和const是es6新增的两个变量声明关键字，与var的不同点在于：（1）let和const都是块级作用域，在{}内有效，这点在for循环中非常有用，只在循环体内有效。var为函数作用域。（2）使用let和con...

iOS122 2019-08-23 15:29 评论0 收藏0
ES6学习第二章变量的解构赋值

摘要：前言前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
ES6学习第二章变量的解构赋值

摘要：前言该篇笔记是第二篇变量的解构赋值。这一章原文链接变量的解构赋值解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。对象的解构赋值是根据对象值进行匹配。前言该篇笔记是第二篇变量的解构赋值。这一章原文链接：变量的解构赋值解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对...

番茄西红柿 2021-11-24 09:38 评论0 收藏2637
ES6-变量的解构赋值(3)

摘要：数组的解构赋值特点根据数据的下标来赋值的，有次序。模式能够匹配起来，如长度为数值和布尔值的解构赋值解构赋值的规则是只要等号右边的值不是对象或数组，就先将其转为对象。布尔值解构赋值为字符串的一种。在很多独立细小的方面，解构赋值都非常有用。 1、解构赋值简介官方解释：按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。举个例子，想获取数组中...

Jason_Geng 2019-08-23 16:46 评论0 收藏0
《深入理解ES6》笔记——解构：使数据访问更便捷（5）

摘要：解构，一种黑魔法解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。总结本章讲解了对象解构赋值和数组解构赋值，以及对象和数组混合情况下的解构赋值操作，最后一个知识点是解构函数的参数。解构，一种黑魔法解构是从对象中提取出更小元素的过程。赋值是对解构出来的元素进行重新赋值。下面的代码你可能无法在浏览器上实时测试，推荐在babel官网在线测试代码：在线测试ES6代码...

Drinkey 2019-08-20 18:06 评论0 收藏0