[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 ~~~