ES6变量的解构赋值

　变量的解构赋值

　　　1.数组的解构赋值

　　　2.对象的解构赋值

　　　3.字符串的解构赋值

　　　4.数值和布尔值的解构赋值

　　　5.函数参数的解构赋值

　　　6.圆括号问题

　　　7.用途　

　　　

---

　　　　

　　1.数组的解构赋值

　　　ES6 允许写成下面这样。

　　　　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 [head, ...tail] = [1, 2, 3, 4];
　　　　head // 1
　　　　tail // [2, 3, 4]

　　　　let [x, y, ...z] = ['a'];
　　　　x // "a"
　　　　y // undefined
　　　　z // []

　　　如果解构不成功，变量的值就等于undefined。代码如下：

　　　　

　　　　let [foo] = [];
　　　　let [bar, foo] = [1];

　　　

　 以上两种情况都属于解构不成功，foo的值都会等于undefined。

　　   另一种情况是不完全解构，即等号左边的模式，只匹配一部分的等号右边的数组。这种情况下，解构依然可以成功。

　　　　

　　　　let [x, y] = [1, 2, 3];
　　　　x // 1
　　　　y // 2

　　　　let [a, [b], d] = [1, [2, 3], 4];
　　　　a // 1
　　　　b // 2
　　　　d // 4
　　上面两个例子，都属于不完全解构，但是可以成功。注意：如果等号的右边不是数组，那么将会报错。

　　解构赋值允许指定默认值。
　　　　

　　　　let [foo = true] = [];
　　　　foo // true

　　　　let [x, y = 'b'] = ['a']; // x='a', y='b'
　　　　let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

---

　　2.对象的解构赋值

　　　解构不仅可以用于数组，还可以用于对象。

　　　　

　　　　let { foo, bar } = { foo: "aaa", bar: "bbb" };
　　　　foo // "aaa"
　　　　bar // "bbb"

　　如果变量名与属性名不一致，必须写成下面这样。

　　　　let obj = { first: 'hello', last: 'world' };
　　　　let { first: f, last: l } = obj;
　　　　f // 'hello'
　　　　l // 'world'
　　

　　 如果解构失败，变量的值等于undefined。

　　　　let {foo} = {bar: 'baz'};
　　　　foo // undefined

　　 如果解构模式是嵌套的对象，而且子对象所在的父属性不存在，那么将会报错。

　　　　// 报错
　　　　let {foo: {bar}} = {baz: 'baz'};

---

　3.字符串的解构赋值

　　字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

　　　　const [a, b, c, d, e] = 'hello';
　　　　a // "h"
　　　　b // "e"
　　　　c // "l"
　　　　d // "l"
　　　　e // "o"

　　类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

　　　　let {length : len} = 'hello';
　　　　len // 5

---

　　　　

　4.数值和布尔值的解构赋值

　　解构赋值时，如果等号右边是数值和布尔值，则会先转为对象。

　　　　let {toString: s} = 123;
　　　　s === Number.prototype.toString // true

　　　　let {toString: s} = true;
　　　　s === Boolean.prototype.toString // true

　　上面代码中，数值和布尔值的包装对象都有toString属性，因此变量s都能取到值。

　　解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。由于undefined和null无法转为对象，所以对它们进行解构赋值，都会报错。

　　　　let { prop: x } = undefined; // TypeError
　　　　let { prop: y } = null; // TypeError

---

　5.函数参数的解构赋值　

　　函数的参数也可以使用解构赋值。

　　　　function add([x, y]){
　　　　  return x + y;
　　　　}

　　　　add([1, 2]); // 3

　　上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。

　　下面是另一个例子。

　　　　[[1, 2], [3, 4]].map(([a, b]) => a + b);
　　　　// [ 3, 7 ]

　　函数参数的解构也可以使用默认值。

　　　　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]

　　上面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。

---

　6.圆括号问题

　　解构赋值虽然很方便，但是解析起来并不容易。对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道。由此带来的问题是，如果模式中出现圆括号怎么处理。ES6 的规则是，只要有可能导致解构的歧义，就不得使用圆括号。但是，这条规则实际上不那么容易辨别，处理起来相当麻烦。因此，建议只要有可能，就不要在模式中放置圆括号。

　　

---

　　7.用途

（1）交换变量的值

　　　　let x = 1;
　　　　let y = 2;

　　　　[x, y] = [y, x];

　　上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。

（2）从函数返回多个值

　　函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

　　　　// 返回一个数组

　　　　function example() {
　　　　  return [1, 2, 3];
　　　　}
　　　　let [a, b, c] = example();

　　　　// 返回一个对象

　　　　function example() {
　　　　  return {
  　　　　  foo: 1,
  　　　　  bar: 2
　　　　  };
　　　　}
　　　　let { foo, bar } = example();

（3）函数参数的定义

　　解构赋值可以方便地将一组参数与变量名对应起来。

　　　　// 参数是一组有次序的值
　　　　function f([x, y, z]) { ... }
　　　　f([1, 2, 3]);

　　　　// 参数是一组无次序的值
　　　　function f({x, y, z}) { ... }
　　　　f({z: 3, y: 2, x: 1});

　（4）提取 JSON 数据

　　解构赋值对提取 JSON 对象中的数据，尤其有用。

　　　　let jsonData = {
 　　　　 id: 42,
 　　　　 status: "OK",
 　　　　 data: [867, 5309]
　　　　};

　　　　let { id, status, data: number } = jsonData;

　　　　console.log(id, status, number);
　　　　// 42, "OK", [867, 5309]

　　上面代码可以快速提取 JSON 数据的值。