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

原创
2019/10/22 11:28
阅读数 83

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

第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。

 

(本节完)

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部