变量解构赋值的那些事儿

变量解构赋值的那些事儿

下面是会从数组、对象、字符串、数值/布尔值、函数以及最后的一些包括使用原括号的场景和解构赋值的用途的总结来讲述ES6关于解构赋值的那些事儿。

数组：
1、数组的元素是按次序排列的，变量的取值由它的位置决定
2、ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。另外因为null与undefined不严格相等，所以是个有效的赋值。
举例：

let [x = 1] = [undefined];
x // 1

let [x = 1] = [null];
x // null

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

对象：
1、而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
2、对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

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

first和last只是模式，如果first和last也要赋值 写成let {first,last, first: f, last: l } = obj;

3、设置默认值，同样，默认值生效的条件是，对象的属性值严格等于undefined。

var {x = 3} = {};
x // 3

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

let x;({x} = {x: 1});

5、由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。

let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3

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

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

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

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

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

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

函数参数的解构赋值 ：
1、函数参数的解构也可以使用默认值。

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等于默认值。

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}

move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。这种是没有默认值的，只有当没参的时候才会传(0,0)

2、undefined就会触发函数参数的默认值。

[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

总结：
1、圆括号不可以使用的场景：
（1）变量声明语句
（2）函数参数
（3）赋值语句的模式
2、可以使用圆括号的场景（唯一）
赋值语句的非模式部分，可以使用圆括号。

[(b)] = [3]; // 正确
({ p: (d) } = {}); // 正确
[(parseInt.prop)] = [3]; // 正确

上面三行语句都可以正确执行，因为首先它们都是赋值语句，而不是声明语句；其次它们的圆括号都不属于模式的一部分。第一行语句中，模式是取数组的第一个成员，跟圆括号无关；第二行语句中，模式是p，而不是d；第三行语句与第一行语句的性质一致。
3、解构赋值的用途
（1）交换变量的值
（2）从函数返回多个值

// 返回一个数组

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

// 返回一个对象

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

（3）函数参数的定义
（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]

（5）函数参数的默认值

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

（6）遍历 Map 结构
（7）输入模块的指定方法