[TOC] >[success] # 对象解构 ~~~ '对象解构语法'在赋值语句的'左侧'使用了对象字面量，例如： ~~~ <br/> >[success] ## 初始化时解构 ~~~ let node = { type: "Identifier", name: "foo" } let { type, name } = node console.log(type) // "Identifier" console.log(name) // "foo" ~~~ <br/> >[success] ## 赋值时解构 ~~~ 注意：'赋值时解构'必须要用'圆括号'包裹起来'解构赋值语句'，不然js会把'花括号'解析成代码块，而代码 块不允许在'赋值操作符'（即等号）左侧出现， ~~~ ~~~ let node = { type: "Identifier", name: "foo" }, type = "Literal", name = 5; // 这里的分号必须加不然会报错 // 这里需要用括号包裹 ({ type, name } = node) console.log(type) // "Identifier" console.log(name) // "foo" ~~~ <br/> >[success] ## 函数参数解构赋值 ~~~ let node = { type: "Identifier", name: "foo" }, type = "Literal", name = 5; function outputInfo(value) { console.log(value === node) // true } outputInfo({ type, name } = node) console.log(type) // "Identifier" console.log(name) // "foo" ~~~ <br/> >[success] ## 默认值 ~~~ 当你使用'解构赋值'语句时，如果所指定的'本地变量'在对象中没有找到'同名属性'，那么该变量会被赋值为 'undefined'。例如： let node = { type: "Identifier", name: "foo" } let { type, name, value } = node console.log(type) // "Identifier" console.log(name) // "foo" console.log(value) // undefined 你可以选择性地'定义一个默认值'，以便在'指定属性不存在时使用该值'。若要这么做，需要在属性名后面 '添加一个等号并指定默认值'，就像这样： let node = { type: "Identifier", name: "foo" } let { type, name, value = true } = node console.log(type) // "Identifier" console.log(name) // "foo" console.log(value) // true ~~~ <br/> >[success] ## 解构变量别名 ~~~ 此代码使用了解构赋值来声明'localType'与'localName'变量，分别获得了'node.type'与'node.name'属性的 值。 'type: localType'这种语法表示要读取名为'type'的属性，并把它的值存储在变量'localType'上。 ~~~ ~~~ let node = { type: "Identifier", name: "foo" } let { type: localType, name: localName } = node console.log(localType) // "Identifier" console.log(localName) // "foo" ~~~ <br/> >[success] ## 解构变量别名，添加默认值 ~~~ 此处的'localName'变量拥有一个默认值 "bar" ，该变量最终被赋予了默认值，因为'node.name'属性并不存在 ~~~ ~~~ let node = { type: "Identifier" } let { type: localType, name: localName = "bar" } = node console.log(localType); // "Identifier" console.log(localName); // "bar" ~~~ <br/> >[success] ## 嵌套的对象解构 ~~~ 这里使用了'花括号'，表示应当到'node'对象的'loc'属性内部去寻找'start'属性。 ~~~ ~~~ let node = { type: "Identifier", name: "foo", loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } } } let { loc: { start } } = node console.log(start.line) // 1 console.log(start.column) // 1 ~~~ <br/> >[success] ## 嵌套的对象別名解构 ~~~ 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 console.log(localStart.line) // 1 console.log(localStart.column) // 1 ~~~ <br/> >[warning] ## 注意 ~~~ 1. 当使用解构来配合'var'、'let'或'const'来声明变量时，必须提供'初始化器'（即等号右边的值）。下面的 代码都会因为缺失'初始化器'而抛出错误： // 语法错误！ var { type, name } // 语法错误！ let { type, name } // 语法错误！ const { type, name } const 总是要求有初始化器，即使没有使用解构的变量；而 var 与 let 则仅在使用 解构时才作此要求。 ~~~ ~~~ 2. 使用'解构赋值'时，'等号'右侧的值为'null'或者'undefined'时都会报错 ~~~ ~~~ 3. 使用'嵌套的解构'时需要小心，因为你可能无意中就创建了一个'没有任何效果'的语句。'空白花括号' 在'对象解构'中是合法的，然而它不会做任何事。例如： // 没有变量被声明！ let { loc: {} } = node ~~~