對象的解構賦值 · Javascript基礎篇

[TOC] >[success] # 對象的解構賦值解構不僅可以用于數組，還可以用于對象。 >[success] ## 基本用法 ~~~ let { foo, bar } = { foo: "aaa", bar: "bbb" }; console.log( foo ) // "aaa" console.log( bar ) // "bbb" ~~~ ~~~ 對象的解構與數組有一個重要的不同。'數組的元素是按次序排列的，變量的取值由它的位置決定'；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。 ~~~ ~~~ let { bar, foo } = { foo: "aaa", bar: "bbb" }; console.log( foo ) // "aaa" console.log( bar ) // "bbb" let { baz } = { foo: "aaa", bar: "bbb" }; console.log( baz ) // undefined ~~~ 上面代碼的第一個例子，等號左邊的兩個變量的次序，與等號右邊兩個同名屬性的次序不一致，但是對取值完全沒有影響。第二個例子的變量沒有對應的同名屬性，導致取不到值，最后等于undefined。 >[success] ## 重命名如果變量名與屬性名不一致，必須寫成下面這樣。 ~~~ var { foo: baz } = { foo: 'aaa', bar: 'bbb' }; console.log( baz ) // "aaa" let obj = { first: 'hello', last: 'world' }; let { first: f, last: l } = obj; console.log( f ) // "hello" console.log( l ) // "world"" console.log( first ) // "first is not defined"" console.log( last ) // "last is not defined"" ~~~ 這實際上說明，對象的解構賦值是下面形式的簡寫 ~~~ // 正常寫法 let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" }; // 簡寫 let { foo, bar } = { foo: "aaa", bar: "bbb" }; ~~~ 也就是說，對象的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而不是前者。 ~~~ let { foo: baz } = { foo: "aaa", bar: "bbb" }; console.log( baz ) // "aaa" console.log( foo ) // error: foo is not defined ~~~ 上面代碼中，foo是匹配的模式，baz才是變量。真正被賦值的是變量baz，而不是模式foo。與數組一樣，解構也可以用于嵌套結構的對象。 >[success] ## 對象里面套數組，以及多層對象 ~~~ let obj = { p: [ 'Hello', { y: 'World' } ] }; let { p: [x, { y }] } = obj; console.log( x ) // "Hello" console.log( y ) // "World" ~~~ ~~~ 注意：這時p是'模式，不是變量，因此不會被賦值'。如果p也要作為變量賦值，可以寫成下面這樣。 ~~~ ~~~ let obj = { p: [ 'Hello', { y: 'World' } ] }; let { p, p: [x, { y }] } = obj; console.log( x ) // "Hello" console.log( y ) // "World" console.log( p ) // ["Hello", {y: "World"}] ~~~ 下面是另一個例子。 ~~~ var node = { loc: { start: { line: 1, column: 5 } } }; var { loc, loc: { start }, loc: { start: { line }} } = node; console.log( line ) // 1 console.log( loc ) // Object {start: Object} console.log( start ) // Object {line: 1, column: 5} ~~~ ~~~ 上面代碼有三次解構賦值，分別是對'loc'、'start'、'line'三個屬性的解構賦值。注意，最后一次對line屬性的解構賦值之中，只有line是變量，loc和start都是模式，不是變量。 ~~~ ~~~ 下面是'嵌套賦值'的例子。 ~~~ ~~~ let obj = {}; let arr = []; ({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true }); console.log( obj ) // {prop:123} console.log( arr ) // [true] ~~~ >[success] ## 默認值 ~~~ var {x = 3} = {}; console.log( x ) // 3 var {x, y = 5} = {x: 1}; console.log( x ) // 1 console.log( y ) // 5 var {x: y = 3} = {}; console.log( y ) // 3 var {x: y = 3} = {x: 5}; console.log( y ) // 5 var { message: msg = 'Something went wrong' } = {}; console.log( msg ) // "Something went wrong" ~~~ 默認值生效的條件是，對象的屬性值嚴格等于`undefined`。 ~~~ var {x = 3} = {x: undefined}; console.log( x ) // 3 var {x = 3} = {x: null}; console.log( x ) // null ~~~ 上面代碼中，如果x屬性等于null，就不嚴格相等于undefined，導致默認值不會生效。如果解構失敗，變量的值等于undefined。 ~~~ // 報錯 let {foo: {bar}} = {baz: 'baz'}; ~~~ 上面代碼中，等號左邊對象的foo屬性，對應一個子對象。該子對象的bar屬性，解構時會報錯。原因很簡單，因為foo這時等于undefined，再取子屬性就會報錯，請看下面的代碼。 ~~~ let _tmp = {baz: 'baz'}; _tmp.foo.bar // 報錯 ~~~ ~~~ 如果要將一個'已經聲明的變量用于解構賦值，必須非常小心'。 ~~~ ~~~ // 錯誤的寫法 let x; {x} = {x: 1}; // SyntaxError: syntax error ~~~ 上面代碼的寫法會報錯，因為 JavaScript 引擎會將{x}理解成一個代碼塊，從而發生語法錯誤。只有不將大括號寫在行首，避免 JavaScript 將其解釋為代碼塊，才能解決這個問題。 ~~~ // 正確的寫法 let x; ({x} = {x: 1}); ~~~ 上面代碼將整個解構賦值語句，放在一個圓括號里面，就可以正確執行。關于圓括號與解構賦值的關系，參見下文。解構賦值允許等號左邊的模式之中，不放置任何變量名。因此，可以寫出非常古怪的賦值表達式。 ~~~ ({} = [true, false]); ({} = 'abc'); ({} = []); ~~~ 上面的表達式雖然毫無意義，但是語法是合法的，可以執行。對象的解構賦值，可以很方便地將現有對象的方法，賦值到某個變量。 ~~~ let { log, sin, cos } = Math; ~~~ 上面代碼將Math對象的對數、正弦、余弦三個方法，賦值到對應的變量上，使用起來就會方便很多。由于數組本質是特殊的對象，因此可以對數組進行對象屬性的解構。 ~~~ let arr = [1, 2, 3]; let {0 : first, [arr.length - 1] : last} = arr; first // 1 last // 3 ~~~ 上面代碼對數組進行對象解構。數組arr的0鍵對應的值是1，[arr.length - 1]就是2鍵，對應的值是3。方括號這種寫法，屬于“屬性名表達式”