ES6 变量的解构赋值

---

解构的含义

解构：ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。

---

1. 数组的解构赋值

数组的解构赋值，其解构赋值的结果有3种：

第一种，解构成功，即等号两边的模式完全相同，左边的变量会被赋予右边对应位置的值。

示例1.1：let [a,b,c] = [1,2,3] 
// 将等号右边的数组元素值按照元素位置，依次赋值给左边数组的对应元素。此时a=1,b=2,c=3。

示例1.2：let [ , ,third] =["a","b","c"] 
// 此时third = "c"

第二种，解构不成功，左边数组的长度大于右边数组的长度，未获得值的变量值为undefined。

示例2.1：let [a] = [ ]  // 此时a的值为undefined

示例2.2： let [a,b,c] = [1]  // 此时a的值为1，b和c的值都是undefined

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

示例3.1：let [x,y] = [1,2,3]  // 这里x=1，y=2

示例3.2：let [a,[b],c] = [1,[2,3],4]  // 这里a=1，b=2，c=3

如果等号两边对应位置的模式的数据类型无法转换，则会报错。

// 报错
let [foo] = 1;

注：数组的解构赋值，变量的取值由它的位置决定。

---

2. 对象的解构赋值

对象的解构赋值，变量必须与属性同名，才能取到正确的值。如果变量没有对应的同名属性，会导致该变量取不到值，最后等于undefined。

例如：let {a , b} = { first: "hello", second: "world"}
// 此时变量a和b都为undefined

对象的解构赋值，可以很好的将现有对象的某个方法，赋值到某个变量。

const { log } = console;
log('hello') // hello

上面代码中，将console对象的log方法赋值给log变量。这样使用后，log变量等同于console.log方法。

如果变量名与属性名不一致，又想要对变量进行赋值，必须写成下面这种形式。

let {first: a , second: b} = { first: "hello", second: "world"}
// 此时变量a的值为"hello"，b的值为"world"

这里涉及到了ES6 对象属性的简洁表示法，即ES6 允许在大括号内直接写入变量和函数，作为对象的属性和方法。

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}

// 等同于
const baz = {foo: foo};

上面代码中，变量foo直接写在大括号里面。这时，属性名就是变量名, 属性值就是变量值。

---

3. 字符串的解构赋值

字符串在解构赋值时，会被转换成一个类似数组的对象。

---

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

解构赋值时，如果等号右边是数值或布尔值，则会先转为对象，再使用对象中的toString属性。

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

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

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

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

---

5. 函数参数的解构赋值

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

上述示例中，map()方法会对调用它的数组中的每个元素进行操作。

---

6. 默认值

ES6内部使用严格相等运算符(===)，判断一个位置是否有值，所以只有当一个数组元素或者对象属性值严格等于undefined，默认值才会生效。

当一个数组成员或者对象属性值等于null，因为null与undefined不严格相等，所以null是一个有效的赋值，此时默认值不会生效。

示例1： var { x = 3} = { x : undefined} // x = 3

示例2： var { x = 3} = { x : null} // x为null

---

7. 注意点

（1）对于一个已经声明的变量用于解构赋值，需要注意其写法。

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

上面代码的写法会报错，因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。

// 正确的写法
let x;
({x} = {x: 1});

上面代码将整个解构赋值语句，放在一个圆括号里面，就可以正确执行。

（2）解构赋值允许等号左边的模式之中，不放置任何变量名。因此，可以写出非常古怪的赋值表达式。

({} = [true, false]);
({} = 'abc');
({} = []);

上面的表达式虽然毫无意义，但是语法是合法的，可以执行。

（3）对于模式中出现圆括号的问题，ES6 的规则是，只要有可能导致解构的歧义，就不得使用圆括号。

不能使用圆括号的具体情况：1. 变量声明语句；2. 函数参数；3. 赋值语句的模式部分。

可以使用圆括号的情况只有一种：赋值语句的非模式部分。

这里的模式可以理解为用来匹配的东西，比如对象的属性名。

---

8. 用途

变量的解构赋值可以用在以下几个地方：

8.1 交换变量的值

let x = 1;
let y = 2;

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

上面代码交换变量x和y的值。

8.2 从函数返回多个值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。

8.3 函数参数的定义

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

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

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

8.4 提取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]

8.5 为函数参数设置默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
} = {}) {
  // ... do stuff
};

8.6 遍历Map解构

任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。

8.7 输入模块的指定方法

加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

const { SourceMapConsumer, SourceNode } = require("source-map");

---

更多详细的介绍请参考： ES6 入门 变量的解构赋值

---