第五章 解构：使数据访问更便捷
第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。
（本节完）