前言
该部分为书籍 深入理解ES6 第五章(解构: 更方便的数据访问)笔记
解构的作用
把数据结构分解为更小的部分时，从中提取你要的数据
对象解构
1. 语法 -- 变量声明
- 对象解构语法在赋值语句的左侧使用了对象字面量
let node = { type: 'Identifier', name: 'foo' }; let { type, name } = node; console.log(type); // "Identifier" console.log(name); // "foo"
当使用解构来配合 var 、 let 或 const 来声明变量时，必须提供初始化器（即等号右边的值）
// 语法错误！ var { type, name }; // 语法错误！ let { type, name }; // 语法错误！ const { type, name };
- 当解构赋值表达式的右侧（ = 后面的表达式）的计算结果为 null 或 undefined 时，会抛出错误
2. 解构赋值 -- 先声明变量, 在赋值
注意你必须用圆括号包裹解构赋值语句，这是因为暴露的花括号会被解析为代码块语句，而块语句不允许在赋值操作符（即等号）左侧出现。
let node = {
type: "Identifier",
name: "foo"
},
type = "Literal",
name = 5;
// 使用解构来分配不同的值
({ type, name } = node);
3. 默认值
指定默认值, 可以在解构对应的属性缺失、或对应的属性值为 undefined 的情况下, 该默认值才会被使用
let node = {
type: "Identifier",
name: "foo"
};
let { type, name, value = true } = node;
4. 赋值给不同的本地变量名 -- 别名
允许你在给本地变量赋值时使用一个不同的名称，而且该语法看上去就像是使用对象字面量的非简写的属性初始化
// 该语法实际上与传统对象字面量语法相反，传统语法将名称放在冒号左边、值放在冒号右边；而在本例中，则是名称在右边，需要进行值读取的位置则被放在了左边。
let node = {
type: "Identifier",
name: "foo"
};
let { type: localType, name: localName } = node;
console.log(localType); // "Identifier"
console.log(localName); // "foo"
5. 嵌套对象解构
使用类似于对象字面量的语法，可以深入到嵌套的对象结构中去提取想要的数据
每当有一个冒号在解构模式中出现，就意味着冒号之前的标识符代表需要检查的位置，而冒号右侧则是赋值的目标。当冒号右侧存在花括号时，表示目标被嵌套在对象的更深一层中。
let node = {
type: "Identifier",
name: "foo",
loc: {
start: {
line: 1,
column: 1
},
end: {
line: 1,
column: 4
}
}
};
// 提取 node.loc.start
let { loc: { start: localStart }} = node;
语法难点:
解构赋值时, 需要用 () 括号包起来, 因为在JS中, {} 表示一个代码块
当 = 右值为 undefined 和 null时会报错, 其他的则正常
使用嵌套的解构时需要小心，因为你可能无意中就创建了一个没有任何效果的语句。空白花括号在对象解构中是合法的，然而它不会做任何事。
// 没有变量被声明！ let { loc: {} } = node;
数组解构
1. 语法 -- 变量声明
-
数组解构时, 解构作用在数组内部的位置上, 而不是作用在对象的具名属性上 (所以也就没有别名的说法, 因为定义的就是需要存储的变量标识符)
-
数组解构时, 是由于他们在数组中的位置, 实际的变量名称是任意的, 与之对应的对象解构, 关注的是其属性名
let colors = [ "red", "green", "blue" ]; let [ firstColor, secondColor ] = colors; console.log(firstColor); // "red" console.log(secondColor); // "green" -
也可以在解构模式中忽略一些项, 并且只给感兴趣的项提供变量名
let colors = [ "red", "green", "blue" ]; let [ , , thirdColor ] = colors; console.log(thirdColor); // "blue" -
当解构赋值表达式的右侧（ = 后面的表达式）的计算结果不是 Iterable(null 或 undefined 或 数字 或 对象 等等, 字符串是Iterable) 结构数据时, 会抛出错误
2. 解构赋值 -- 先声明变量, 在赋值
跟对象解构赋值类似, 不同的是, 数组解构赋值不需要将表达式包含在圆括号内
let colors = [ "red", "green", "blue" ],
firstColor = "black",
secondColor = "purple";
[ firstColor, secondColor ] = colors;
3. 默认值
与对象一样, 数组解构赋值同样允许在数组任意位置指定默认值
let colors = [ "red" ];
let [ firstColor, secondColor = "green" ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
4. 嵌套数组的解构
与解构嵌套的对象相似，可以用类似的方式来解构嵌套的数组。在整个解构模式中插入另一个数组模式，解构操作就会下行到嵌套的数组中
let colors = [ "red", [ "green", "lightgreen" ], "blue" ];
// 随后
let [ firstColor, [ secondColor ] ] = colors;
console.log(firstColor); // "red"
console.log(secondColor); // "green"
5. 剩余项
-
类似于函数的剩余参数概念, 数组解构有个类似的、名为剩余项（ rest items ）的概念，它使用 ... 语法来将剩余的项目赋值给一个指定的变量
let colors = [ "red", "green", "blue" ]; let [ firstColor, ...restColors ] = colors; console.log(firstColor); // "red" console.log(restColors.length); // 2 console.log(restColors[0]); // "green" console.log(restColors[1]); // "blue" -
与函数的剩余参数一样, 解构的剩余项必须是数组解构模式中最后的部分, 之后不能再有逗号, 否则就是语法错误
混合解构
-
对象与数组解构能被用在一起, 以创建更复杂的解构表达式
-
对应从 JSON 配置结构中抽取数据来说, 这种方法尤其有用, 因为它不需要探索整个结构
let node = { type: "Identifier", name: "foo", loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } }, range: [0, 3] }; let { loc: { start }, range: [ startIndex ] } = node; console.log(start.line); // 1 console.log(start.column); // 1 console.log(startIndex); // 0
参数解构
参数解构的规则跟对象解构, 数组解构一致, 可以使用默认参数、混合解构， 或使用与属性不同的变量名
1. 参数是必须的.
因为不能对 undefined 进行解构, 所以解构参数是必须的。但若你要求它是可选的，可以给解构的参数提供默认值来处理这种行为
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}
2. 参数解构的默认值
你可以为参数解构提供可解构的默认值，就像在解构赋值时所做的那样，只需在其中每个参数后面添加等号并指定默认值即可。
function setCookie(name, value,
{
secure = false,
path = "/",
domain = "example.com",
expires = new Date(Date.now() + 360000000)
} = {}
) {
// ...
}
网友评论