## 变量的解构赋值 > 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) ~~~