## 變量的解構賦值 > 1.數組的解構賦值 2.對象的解構賦值 3.字符串的解構賦值 4.數值和布爾值的解構賦值 5.函數參數的解構賦值 ### 數組結構賦值 ES6 允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring） ~~~ let a = 1; let b = 2; let c = 3; ~~~ 解構寫法 ~~~ let [a, b, c] = [1, 2, 3]; ~~~ 其他的結構寫法 ~~~ let [foo, [[bar], baz]] = [1, [[2], 3]]; foo // 1 bar // 2 baz // 3 let [ , , third] = ["foo", "bar", "baz"]; third // "baz" let [x, , y] = [1, 2, 3]; x // 1 y // 3 ~~~ 無法匹配的值 ~~~ let [foo] = []; let [bar, foo] = [1]; // foo 的值都是undefined ~~~ 模式完全 不匹配的情況 ~~~ // 報錯 let [foo] = 1; let [foo] = false; let [foo] = NaN; let [foo] = undefined; let [foo] = null; let [foo] = {}; ~~~ 默認值 ~~~ let [foo = true] = []; foo // true let [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ['a', undefined]; // x='a', y='b' ~~~ ### 對象的解構賦值 解構不僅可以用于數組，還可以用于對象 ~~~ let { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" ~~~ 對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。 ~~~ let { bar, foo } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb" let { baz } = { foo: "aaa", bar: "bbb" }; baz // undefined ~~~ 如果變量名與屬性名不一致，必須寫成下面這樣。 ~~~ let { foo: baz } = { foo: 'aaa', bar: 'bbb' }; baz // "aaa" let obj = { first: 'hello', last: 'world' }; let { first: f, last: l } = obj; f // 'hello' l // 'world' ~~~ 與數組一樣，解構也可以用于嵌套結構的對象 ~~~ let obj = { p: [ 'Hello', { y: 'World' } ] }; let { p: [x, { y }] } = obj; x // "Hello" y // "World" ~~~ ### 字符串的解構賦值 字符串也可以解構賦值。這是因為此時，字符串被轉換成了一個類似數組的對象 ~~~ const [a, b, c, d, e] = 'hello'; a // "h" b // "e" c // "l" d // "l" e // "o" ~~~ ### 數值和布爾值的解構賦值 解構賦值時，如果等號右邊是數值和布爾值，則會先轉為對象 ~~~ let {toString: s} = 123; s === Number.prototype.toString // true let {toString: s} = true; s === Boolean.prototype.toString // true ~~~ ### 函數參數的解構賦值 函數的參數也可以使用解構賦值。 ~~~ function add([x, y]){ return x + y; } add([1, 2]); // 3 ~~~ ~~~ function move({x = 0, y = 0} = {}) { return [x, y]; } move({x: 3, y: 8}); // [3, 8] move({x: 3}); // [3, 0] move({}); // [0, 0] move(); // [0, 0] ~~~ ### 課后習題 1.下面代碼的運行結果是什么？ ~~~ let {x=2} = {x:3} console.log(x); ~~~ ~~~ let [a,b,c] =[1,,2] console.log(a,b,c); ~~~ ~~~ function sub([x,y]) { return x - y; } sub(5,4) ~~~ ~~~ let obj = { x: [1,2,3] } let {x:[a,b,c,d=0]} = obj console.log(a,b,c) ~~~