【JS】325- 深度理解ES6中的解构赋值

对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重要的一部分。在编码过程中,我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段。ES6 中添加了可以简化这种任务的新特性:解构。解构是一种打破数据结构,将其拆分为更小部分的过程。

为什么需要解构

我们考虑一个大多数人在使用 Javascript 进行编码时可能遇到过的情况。

假设,我们有一个学生数据,在学生数据中用一个对象表示三个学科(数学、语文、英语)的分数,我们根据这些数据显示学生的分数信息:

使用上面的代码,我们将获得所需的结果。但是,以这种方式编写的代码需要有一些值得注意的地方。由于我们访问的对象 scores 嵌套在另一个对象 student 中,所以,我们的访问链变得更长,这意味着更多的输入, 而由于更多的输入,也就更有可能造成拼写的错误。当然,这并不是什么大问题,但是通过解构,我们可以用更具有表现力 和更紧凑的语法来做同样的事情。

对象的解构赋值

对象解构的语法形式是在一个赋值操作符左边放置一个对象字面量,例如:

这段代码中 details.firstName 的值被存储在变量 firstName 中,details.age 的值被存储在变量 age 中。这是对象解构的最基本形式。

用一张图来解释一下其中的解构过程:

非同名变量赋值

在这个例子中,我们使用与对象属性名相同的变量名称,当然,我们也可以定义与属性名不同的变量名称:

在这里,我们创建了两个局部变量:fullname , place,并将 fullname 映射到 name,place映射到 country。

默认值

使用解构赋值表达式时,如果指定的局部变量名称在对象中不存在,那么这个局部变量会被赋值为 undefined,就像这样:

这段代码额外定义了一个局部变量 age,然后尝试为它赋值,然而在 person 对象上,没有对应属性名称的属性值,所以它像预期中的那样赋值为 undefined。

当指定的属性不存在时,可以定义一个默认值,在属性名称后添加一个等号(=)和相应的默认值即可:

在这个例子中,为变量 age 设置了默认值 20,为非同名变量 sex 设置了默认值 male。只有对象 person 上没有该属性或者属性值为 undefined 时该默认值才生效。

嵌套对象的解构赋值

解构嵌套对象仍然与对象字面量的语法相似,可以将对象拆解以获取你想要的信息。

再来看文中最开始的例子,我们有一个学生数据,在学生数据中用一个对象表示三个学科(数学、语文、英语)的分数,我们根据这些数据显示学生的分数信息。我们可以通过解构赋值优雅的对其进行操作:

在这里,我们定义了四个局部变量:name、math、chinese、english。此外我们还为变量 math、chinese、english 分别指定了默认值。

数组的解构赋值

与对象解构的语法相比,数组解构就简单多了,它使用的是数组字面量,且解构操作全部在数组内完成,而不是像对象字面量语法一样使用对象的命名属性。

在上面的代码中,我们从数组 list 中解构出数组索引 0 和 1 所对应的值并分别存储至变量 houseNo 和 street 中。

在数组的解构中,也可以直接省略元素,只为需要的元素提供变量名:

这段代码中使用解构语法从数组 list 中获取索引 0 和索引 2 所对应的元素,city 前的逗号是前方元素的占位符,无论数组中的元素有多少个,都可用这种方式来提取想要的元素。

用一张图来解释一下其中的解构过程:

默认值

在数组的解构赋值表达式中也可以为数组的任意位置添加默认值,当指定位置的属性不存在或其值为 undefined 时使用默认值:

上面代码中,数组 list 只有两个元素,变量 city 没有对应的匹配值,但有一个默认值 BJ,所以最终 city 的输出结果不是 undefined 而是默认值 BJ。

嵌套数组的解构赋值

就像对象一样,也可以对嵌套数组进行解构操作,在原有的数组解构模式中插入另一个数组解构模式,即可将解构过程深入到下一级:

在这个例子中,我们通过数组的嵌套解构,为变量 firstColor 和 secondColor 分配对应的值。

不定元素

在数组中,可以通过...语法将数组中的其余元素赋值给一个特定的变量,就像这样:

这个例子中,数组 colors 的第一个元素被赋值给了 firstColor ,其他元素被赋值给了 otherColors 数组,所以 otherColors 中包含两个元素:'green' 和 'blue'。

混合解构

可以混合使用对象解构和数组解构来构建更多复杂的表达式,如此一来可以从任何混杂着对象和数组的数据结构中提取你想要的信息。

当使用混合解构语法时,可以从 node 对象中提取任意想要的信息。

混合解构这种方式对于从 JSON 中提取数据时尤其有效,不再需要遍历整个解构了。

作者:云中桥 链接:https://juejin.im/post/5d02f267f265da1bb776648b

本文分享自微信公众号 - 前端自习课(FE-study)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-21

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏CWIKIUS

MessagePack Java 0.6.X 动态类型

我们知道 Java 是一个静态类型的语言。通过输入 Value MessagePack能够实现动态的特性。

8520
来自专栏Android技术分享

看完这篇文章,解决 APP 中 90 % 的内存异常问题

在 Android 中我们写的 .java 文件,最终会编译成 .class 文件, class 又由类装载器加载后,在 JVM 中会形成一份描述 class ...

14930
来自专栏CWIKIUS

MessagePack Java 0.6.X List, Map 对象的序列化和反序列化

为了序列化原生的容器对象例如  List 和 Map 对象,你必须使用 Template。

10740
来自专栏学院君的专栏

Go 语言面向对象教程 —— 接口篇:空接口及使用场景

熟悉 Java 的同学应该都知道,在这个号称血统最纯正的面向对象编程语言中,「万事万物皆对象」,并且所有类都继承自祖宗类「Object」,所以 Object 类...

17030
来自专栏技术从心

我们为什么要使用AOP?

最原始的写法,我要在调用insert()与update()方法前后分别打印时间,就只能定义一个新的类包一层,在调用insert()方法与update()方法前后...

8530
来自专栏学院君的专栏

Go 语言面向对象教程 —— 类的定义、初始化和成员方法

上篇教程我们简单给大家介绍了 Go 语言的类型系统,关于基础类型、复合类型以及值语义和引用语义我们前 面在数据类型系列里面已经基本都介绍过了,接下来,我们就与 ...

15320
来自专栏学院君的专栏

Go 语言面向对象教程 —— 为基本类型添加成员方法

在 Go 语言中,你可以给任意类型(包括基本类型,但不包括指针类型)添加成员方法,但是如果是基本类型的话,需要借助 type 关键字对类型进行再定义,例如:

8320
来自专栏学院君的专栏

Go 语言面向对象教程 —— Go 语言的类型系统

对于面向对象编程的支持,Go 语言的实现可以说是完全颠覆了以往我们对面向对象编程的认知,下面我们先通过对 Go 语言类型系统的介绍让你有一个整体的认知。

12120
来自专栏SmartSi

Spark Streaming 2.2.0 Example

Spark Streaming 是 Spark Core API的一个扩展,它对实时流式数据的处理具有可扩展性、高吞吐量、可容错性等特点。数据可以从诸如Kafk...

8340
来自专栏学院君的专栏

Go 语言面向对象教程 —— 接口篇:接口定义与实现

接口在 Go 语言中有着至关重要的地位,如果说 goroutine 和 channel 是支撑起 Go 语言并发模型的基石,那么接口就是 Go 语言整个类型系统...

8930

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励