五: 解构: 更方便的数据访问

前言

该部分为书籍 深入了解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.startlet { loc: { start: localStart }} = node;

语法难点:

1. 解构赋值时, 需要用 () 括号包起来, 由于在JS中, {} 表示一个代码块

2. 当 = 右值为 undefined 和 null时会报错, 其余的则正常

3. 使用嵌套的解构时需要小心，由于你可能无意中就创立了一个没有任何效果的语句。空白花括号在对象解构中是合法的，然而它不会做任何事。

   // 没有变量被公告！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); // 2console.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); // 1console.log(start.column); // 1console.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)    } = {}) {        // ...}