深入理解ES6-第5章-解构：使数据访问更便捷

深入理解ES6 ES6 评论

5.解构：使数据访问更便捷

5.1 为何使用解构功能

　　从对象和数组中获取相应数据并赋值给变量，代码冗余。

5.2 对象赋值

　　对象字面量的语法形式是在一个赋值操作符左边放置一个对象字面量。使用var，let或const声明变量，必须提供初始化程序（也就是等号右侧的值）。

解构赋值

　　我们已经将对象解构应用到了变量的声明中。然而，我们同样可以在给变量赋值时使用解构语法。但是要用一对小括号包裹赋值语句，js引擎将一对开放的花括号视为一个代码块，而语法规定，代码块语句不允许出现在赋值语句左侧，添加小括号后可以将块语句转化为一个表达式，从而实现整个解构赋值的过程。
　　解构赋值表达式的值与表达式右侧的值相等。
　　解构赋值表达式右侧的值为null或者undefined会导致程序抛出错误。

默认值

　　使用解构赋值表达式时，如果指定的局部变量名称在对象中不存在，那这个局部变量会被赋值为undefined。
　　当指定的属性名不存在时，可以随意定义一个默认值，在属性名称后添加一个等号（=）和相应的默认值即可，只有在右边的对象中没有对应的属性或者该属性为undefined时该值生效：

1
2
3
4
5
let node = {
	type: “Identifier”,
	name: “foo”
};
let {type, name, value = true} = node;

为非同名局部变量赋值
1
2
3
4
5
let node = {
	type: “Identifier”,
	name: “foo”
};
let {type: localType, name: localName = “bar” } = node;

　　上面为为localType和localName赋值。

嵌套对象赋值
1
2
3
4
5
6
7
8
9
10
let node = {
	loc: {
		start: {
			line:1,
column:1
}
}
};
let {loc: { start }} = node;           //同名属性
let {loc: { start: localStart }} = node;  //不同名属性

5.3 数组解构

　　使用数组字面量，且解构操作全部在数组内完成。通过值在数组中的位置选取，且可以将其存储在任意变量中。未显示声明的元素直接被忽略。这个过程，原数组不发生变化。

1
2
3
let colors = [“red”, “green”, “blue”];
let [firstColor, secondColor] = colors;  //firstColor=red,secondColor=green
let [ , , thirdColor] = colors;         //thirdColor=blue

解构赋值

　　也可用于定义过的变量，但不需要用小括号包裹表达式。
变换两个变量的值。

1
[a, b] = [b, a];

如果右侧数组解构表达式的值为null或undefined，则会导致程序抛出错误。

默认值

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

1
2
let colors = [“red”];
let [firstColor, secondColor = “green”] = colors;   //firstColor=red,secondColor=green

嵌套数组解构

　　在原有数组模式中插入另一个数组模式，即可将解构过程深入下一层级。

1
2
let colors = [“red”, [“green”, “lightGreen”], “blue”];
let [firstColor, [secondColor]] = colors;  //firstColor=red,secondColor=green

不定元素

　　在数组中，可以通过…语法将数组中的奇遇元素赋值给一个特定的变量。

1
2
let colors = [“red”, “green”, “blue”];
let [firstColor, …restColor] = colors;  //firstColor=red,restColor=[green,blue]

数组复制
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let colors = [“red”, “green”, “blue”];
let […cloneColor] = colors; ``` 
#### 5.4 混合解构
　　可以混合使用对象解构和数组解构来创建更多复杂的表达式。在JSON配置中提取信息时，不再需要遍历整个结构。
#### 5.5 解构参数
　　当一个接受大量可选参数的JavaScript函数时，我们通常会创建一个可选对象，将额外的参数定义为这个对象的属性：
```js
function setCookie(name, value, { secure, path, domain, expires}) {

}
setCookie(“type”, “js”, {
	secure: true,
	expires: 60000
});
必须传值的解构参数

　　由于不能讲解构参数赋值给undefined，所以不传值时会报错。

1
2
3
function setCookie(name, value, { secure, path, domain, expires} = {}) {

}

解构参数的默认值

　　只需在参数后添加等号并制定一个默认值就行，如果解构参数时可选的，还需将整个解构参数设置一个默认值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const setCookieDefaults = {
	secure: false,
	path: “/”,
	domain: “example.com”,
	expires: new Date(Date.now() + 360000000)
};
function setCookie(name, value, 
{
	secure = setCookieDefaults.secure,
   path = setCookieDefaults.path,
   domain = setCookieDefaults.domain,
   expires = setCookieDefaults.expires
} = setCookieDefaults){

}

waldosiaWeb Developer & Designer

尾巴