文档章节

读书笔记:深入理解ES6 (五)

张森ZS
 张森ZS
发布于 10/22 11:28
字数 1072
阅读 35
收藏 0

第五章 解构:使数据访问更便捷

第1节 为什么使用解构功能?

  在ES5中,开发者们从对象、数组中获取特定数据并赋值给变量,编写了很多看起来同质化的代码。例如:

复制代码
1 let options = {
2     repeat: true,
3     save: false
4 };
5 
6 //从对象中提取数据
7 let repeat = options.repeat,
8     save = options.save;
复制代码

  解构功能的目的就是为了简化获取信息的过程

 

第2节 对象解构

  1. 对象解构的语法是在一个赋值操作符的左边,设置一个对象字面量。举例:

复制代码
1 let node = {
2     type: "Identifier",
3     name: "foo"
4 }

5 let {type, name} = node;
6 
7 console.log(type); // "Identifier"
8 console.log();    //"foo"
复制代码

  2. 默认值。

  对解构赋值中不存在的属性可以随意定义一个默认值。举例:

复制代码
1 let node = {
2     type: "Identifier",
3     name: "foo"
4 }

5 let {type, name, value=true} = node;

6 console.log(type); //"Identifier"
7 console.log(name); //"foo"
8 console.log(value); //true
复制代码

  3. 为非同名局部变量赋值。

    如果希望用不同命名的局部变量来存储对象属性的值,可以用这样一个扩展语法来实现。举例:

复制代码
1 let node = {
2     type: "Identifier",
3     name: "foo"
4 }
5 
6 let {type:localType, name:localName} = node;
7 
8 console.log(localType); //"Identifier"
9 console.log(localName); //"foo"
复制代码

  4. 嵌套对象解构。

  解构嵌套对象与对象字面量的语法相似。可以拆解以获取想要的信息。举例:

复制代码
 1 let node = {
 2     type: "Identifier",
 3     name: "foo",
 4     loc: {
 5         start: {
 6             line: 1,
 7             column: 1
 8         },
 9         end: {
10             line: 1,
11             column: 4
12         }
13     }
14 };
15 
16 let { loc: {start} } = node;
17 
18 console.log(start.line); //1
19 console.log(start.column); // 1
复制代码

 

第3节 数组解构

  1. 数据解构和对象解构类似,看一个例子:

1 let colors = [ "red", "green", "blue" ];
2 let [firstColor, secondColor] = colors;
3 console.log(firstColor); //"red"
4 console.log(secondColor); // "green"

  2. 解构赋值。举例:

复制代码
1 let colors = [ "red", "green", "blue" ],
2     firstColor = "black";
3     secondColor = "purple";
4 
5 let [firstColor, secondColor] = colors;
6 
7 console.log( firstColor ); //"red"
复制代码

  3. 设定默认值。

  也就是可以为不存在的属性添加默认值。举例:

1 let colors = ["red"];
2 let [firstColor, secondColor="green"] = colors;
3 
4 console.log(firstColor); //"red"
5 console.log(secondColor); //"green"

  4. 嵌套类数据解构。

  与嵌套对象解构语法类似,在原有的数组模式中插入另一个数组模式。举例:

1 let colors = [ "red", ["green", "lightgreen"], "blue" ];
2 let [firstColor, [secondColor]] = colors;
3 
4 console.log(firstColor); //"red"
5 console.log(secondColor); //"green"

  5. 不定元素。

  在数组中,可以通过 “...” 语法,将数组中的其余元素赋值给一个特定的变量。举例:

复制代码
1 let colors = [ "red", "green", "blue" ];
2 let [firstColor, ...restColors] = colors;
3 
4 console.log(firstColor); //"red"
5 console.log(restColors.length); //2
6 console.log(restColors[0]); //"green"
7 console.log(restColors[1]); //"blue"
复制代码

 

第4节 混合解构

  混合了对象解构和数组解构的解构方法。大体与上面对象解构和数组解构的方法类似。详细信息请见该书P.101。

 

第5节 解构参数

  1. 解构参数,即将参数,尤其是对象数据类型的参数解构为更加易读的代码。举例:

  有一个最开始的函数,如下:

复制代码
 1 function setCookie(name, value, options) {
 2     options = options || {};
 3 
 4     let secure = options.secure,
 5         path = options.path,
 6         domain = options.domain,
 7         expires = options.expires
 8 
 9     //设置cookie代码
10 }
11 
12 //第三个参数映射到options中
13 setCookie("type", "js", {
14     secure: true,
15     expires: 60000
16 });
复制代码

  如果我们来解构参数的话,可以这么写:

复制代码
1 function setCookie(name, value, {secure, path, domain, expires}) {
2     //设置cookie代码
3 }
4 setCookie("type", "js", {
5     secure: true,
6     expires: 60000
7 });
复制代码

  但是这种情况下,如果不传递参数会报错,所以我们可以将其优化为:

复制代码
1 function setCookie( name, value, {secure, path, domain, expires} = {} ) {
2     //设置cookie代码
3 }
4 setCookie("type", "js", {
5     secure: true,
6     expires: 60000
7 });
复制代码

  这样,即使不传参数,那么也有一个默认的空对象供使用,程序就不会抛出错误了。

 

  2. 为了防止解构参数报错,还可以使用给解构参数赋默认值的做法,但是实际应用过程中可能用的地方不太多。有兴趣的读者可以参考该书的P.104、P105。

 

(本节完)

© 著作权归作者所有

张森ZS
粉丝 0
博文 24
码字总数 28351
作品 0
海淀
私信 提问
我的RabbitMQ的学习成果

背景 在研发分布式事务的最终一致性事务模式时,使用了RabbitMQ。 在这之前也接触过RabbitMQ,但没有特别深入的去了解它的特性与原理。这次决定系统的学习一次,所以业余时间阅读大神们的书籍...

XuePeng77
04/15
285
0
【面试总结】记一次失败的 bilibili 面试总结(2)

上一篇文章能受到这样的关注度,感谢各位同学的点赞和评论,给了我很多动力继续去更新这个系列,也希望它们能够对大家有一定的帮助。蟹蟹大家。 传送门 面试总结(1):HTML布局、CSS选择器及J...

一颗赛艇🚤
03/13
0
0
用思维导图来学java虚拟机,轻松易懂!

说明 本篇文章是对周志明的《深入理解Java虚拟机》的读书笔记,思维导图使用Mindjet MindManager。曾经看到过这样一句话: 关于教育,有一个经典的定义是:把在学校里学到的东西全部忘掉,最...

小刀爱编程
2018/10/12
180
0
告诉你1年读100本书的方法

《书都不会读,你还想成功》是一本小说,由韩国作家二志成和郑会一合著,书的内容为一个焦躁的职场人士通过读书的方式,彻底改变了自己的思维方式,进而改变了自己的生活的故事。 下面就说说...

anda0109
2016/12/22
0
0
UNIX网络编程卷2进程间通信读书笔记汇总

UNIX网络编程卷2进程间通信读书笔记(一)—概述 http://blog.chinaunix.net/u/22935/article_52711_2.html UNIX网络编程卷2进程间通信读书笔记(二)—管道 (1) http://blog.chinaunix.ne...

长平狐
2012/09/03
247
0

没有更多内容

加载失败,请刷新页面

加载更多

BigDecimal 去后面无用的0的方法

BigDecimal a=new BigDecimal("0.1000"); System.out.println(a.stripTrailingZeros().toPlainString());...

xiaodong16
16分钟前
4
0
JAVA--高级基础开发

[集合版双色球] 十二、双色球规则:双色球每注投注号码由6个红色球号码和1个蓝色球号码组成。红色球号码从1—33中选择;蓝色球号码从1—16中选择;请随机生成一注双色球号码。(要求同色号码...

李文杰-yaya
昨天
14
0
聊聊rocketmq broker的CONSUMER_SEND_MSG_BACK

序 本文主要研究一下rocketmq broker的CONSUMER_SEND_MSG_BACK CONSUMER_SEND_MSG_BACK rocketmq/common/src/main/java/org/apache/rocketmq/common/protocol/RequestCode.java public class......

go4it
昨天
3
0
API常见接口(下)

system类 StringBuilder和StringBuffer 包装类 1.System类 (java.lang包中) 提供了大量的静态方法,可以获取与系统相关的信息或系统级操作。 常用方法: public static long currentTimeMi...

Firefly-
昨天
4
0
MySQL系列:一句SQL,MySQL是怎么工作的?

对于MySQL而言,其实分为客户端与服务端。 服务端,就是MySQL应用,当我们使用net start mysql命令启动的服务,其实就是启动了MySQL的服务端。 客户端,负责发送请求到服务端并从服务端获取数...

杨小格子
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部