1、数组的解构赋值
- [1.1 解构模型](#1.1 解构模型)
- [1.2 基本解构](#1.2 基本解构)
- [1.3 不完全解构](#1.3 不完全解构)
- [1.4 错误解构](#1.4 错误解构)
- [1.5 Set 解构赋值](#1.5 Set 解构赋值)
- [1.6 默认值](#1.6 默认值)
[2. 对象的解构赋值](#2. 对象的解构赋值)
- [2.1 解构机制](#2.1 解构机制)
- [2.2 嵌套](#2.2 嵌套)
- [2.3 解构报错](#2.3 解构报错)
- [2.4 解构原型属性](#2.4 解构原型属性)
- [2.5 默认值](#2.5 默认值)
- [2.6 注意点](#2.6 注意点)
[3. 字符串的解构赋值](#3. 字符串的解构赋值)
[4. 数值和布尔值的解构赋值](#4. 数值和布尔值的解构赋值)
[5. 函数参数的解构赋值](#5. 函数参数的解构赋值)
[6. 圆括号问题](#6. 圆括号问题)
- [6.1 不能使用圆括号的情况](#6.1 不能使用圆括号的情况)
- - [6.1.1 变量声明语句](#6.1.1 变量声明语句)
  - [6.1.2 函数参数](#6.1.2 函数参数)
  - [6.1.3 赋值语句的模式](#6.1.3 赋值语句的模式)
- [6.2 可以使用圆括号的情况](#6.2 可以使用圆括号的情况)
[7. 应用](#7. 应用)
- [7.1 交换变量的值](#7.1 交换变量的值)
- [7.2 从函数返回多个值](#7.2 从函数返回多个值)
- [7.3 函数参数的定义](#7.3 函数参数的定义)
- [7.4 提取 JSON 数据](#7.4 提取 JSON 数据)
- [7.5 函数参数的默认值](#7.5 函数参数的默认值)
- [7.6 遍历 Map 结构](#7.6 遍历 Map 结构)
- [7.7 加载模块的指定方法](#7.7 加载模块的指定方法)

1、数组的解构赋值

1.1 解构模型

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运算符的扩展。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

在解构中，有下面两部分参与：

解构的源，解构赋值表达式的右边部分。
解构的目标，解构赋值表达式的左边部分。

1.2 基本解构

javascript 复制代码

let [a, b, c] = [1, 2, 3];

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于"模式匹配"，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用数组进行解构的例子。

可嵌套

javascript 复制代码

let [a, [[b], c]] = [1, [[2], 3]];
// a = 1
// b = 2
// c = 3

可忽略

javascript 复制代码

let [a, , b] = [1, 2, 3];
// a = 1
// b = 3

剩余运算符

javascript 复制代码

let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]

1.3 不完全解构

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

javascript 复制代码

let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

1.4 错误解构

如果等号的右边不是数组（或者严格地说，不是可遍历的结构，《Iterator》），那么将会报错。

javascript 复制代码

// 报错 Uncaught TypeError: 1 is not iterable
let [foo] = 1;	
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口（前五个表达式），要么本身就不具备 Iterator 接口（最后一个表达式）。

1.5 Set 解构赋值

对于Set 结构，也可以使用数组的解构赋值。

javascript 复制代码

let [x, y, z] = new Set(['a', 'b', 'c']);
x // "a"

事实上，只要某种数据结构具有Iterator接口，都可以采用数组形式的解构赋值。

javascript 复制代码

function* fibs() {
  let a = 0;
  let b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}
let [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

1.6 默认值

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

javascript 复制代码

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

ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于undefined，默认值才会生效。

javascript 复制代码

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

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值，下面代码中，因为x能取到值，所以函数f根本不会执行。

javascript 复制代码

function f() {
  console.log('aaa');
}
let [x = f()] = [1];

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

javascript 复制代码

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

2. 对象的解构赋值

解构不仅可以用于数组，还可以用于对象。对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。如果解构失败，变量的值等于undefined。

javascript 复制代码

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

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

javascript 复制代码

// 例一
let { log, sin, cos } = Math;
// 例二
const { log } = console;
log('hello') // hello

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

javascript 复制代码

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'

2.1 解构机制

对象的解构赋值是下面形式的简写

javascript 复制代码

let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };

也就是说，对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

javascript 复制代码

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"
foo // error: foo is not defined

上面代码中，foo是匹配的模式，baz才是变量。真正被赋值的是变量baz，而不是模式foo。

2.2 嵌套

与数组一样，解构也可以用于嵌套结构的对象。

javascript 复制代码

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

注意，这时p是模式，不是变量，因此不会被赋值。如果p也要作为变量赋值，可以写成下面这样。

javascript 复制代码

let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
p // ["Hello", {y: "World"}]

下面代码有三次解构赋值，分别是对loc、start、line三个属性的解构赋值。注意，最后一次对line属性的解构赋值之中，只有line是变量，loc和start都是模式，不是变量。

javascript 复制代码

const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};
let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}

2.3 解构报错

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

javascript 复制代码

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

上面代码中，等号左边对象的foo属性，对应一个子对象。该子对象的bar属性，解构时会报错。原因很简单，因为foo这时等于undefined，再取子属性就会报错。

2.4 解构原型属性

对象的解构赋值可以取到继承的属性。

javascript 复制代码

const obj1 = {};
const obj2 = { foo: 'bar' };
Object.setPrototypeOf(obj1, obj2);
const { foo } = obj1;
foo // "bar"

2.5 默认值

对象的解构也可以指定默认值。

javascript 复制代码

var {x = 3} = {};
x // 3
var {x, y = 5} = {x: 1};
x // 1
y // 5
var {x: y = 3} = {};
y // 3
var {x: y = 3} = {x: 5};
y // 5
var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"

默认值生效的条件是，对象的属性值严格等于undefined。

javascript 复制代码

var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null

2.6 注意点

如果要将一个已经声明的变量用于解构赋值，必须非常小心。下面代码的写法会报错，因为 JavaScript 引擎会将{x}理解成一个代码块，从而发生语法错误。只有不将大括号写在行首，避免 JavaScript 将其解释为代码块，才能解决这个问题。

javascript 复制代码

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

javascript 复制代码

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

解构赋值允许等号左边的模式之中，不放置任何变量名。因此，可以写出非常古怪的赋值表达式。下面的表达式虽然毫无意义，但是语法是合法的，可以执行。

javascript 复制代码

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

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

javascript 复制代码

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

3. 字符串的解构赋值

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

javascript 复制代码

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

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

javascript 复制代码

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

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

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

javascript 复制代码

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

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

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

javascript 复制代码

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

5. 函数参数的解构赋值

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

javascript 复制代码

function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

javascript 复制代码

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

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

javascript 复制代码

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]

javascript 复制代码

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指定默认值，所以会得到与前一种写法不同的结果。

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

javascript 复制代码

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

6. 圆括号问题

解构赋值虽然很方便，但是解析起来并不容易。对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道。

由此带来的问题是，如果模式中出现圆括号怎么处理。ES6 的规则是，只要有可能导致解构的歧义，就不得使用圆括号。

但是，这条规则实际上不那么容易辨别，处理起来相当麻烦。因此，建议只要有可能，就不要在模式中放置圆括号。

6.1 不能使用圆括号的情况

以下三种解构赋值不得使用圆括号。

6.1.1 变量声明语句

javascript 复制代码

// 全部报错
let [(a)] = [1];
let {x: (c)} = {};
let ({x: c}) = {};
let {(x: c)} = {};
let {(x): c} = {};
let { o: ({ p: p }) } = { o: { p: 2 } };

上面 6 个语句都会报错，因为它们都是变量声明语句，模式不能使用圆括号。

6.1.2 函数参数

函数参数也属于变量声明，因此不能带有圆括号。

javascript 复制代码

// 报错
function f([(z)]) { return z; }
// 报错
function f([z,(x)]) { return x; }

6.1.3 赋值语句的模式

将整个模式放在圆括号之中，导致报错。

javascript 复制代码

// 全部报错
({ p: a }) = { p: 42 };
([a]) = [5];

将一部分模式放在圆括号之中，导致报错。

javascript 复制代码

// 报错
[({ p: a }), { x: c }] = [{}, {}];

6.2 可以使用圆括号的情况

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

javascript 复制代码

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

上面三行语句都可以正确执行，因为首先它们都是赋值语句，而不是声明语句；其次它们的圆括号都不属于模式的一部分。第一行语句中，模式是取数组的第一个成员，跟圆括号无关；第二行语句中，模式是p，而不是d；第三行语句与第一行语句的性质一致。

7. 应用

7.1 交换变量的值

javascript 复制代码

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

7.2 从函数返回多个值

javascript 复制代码

// 返回一个数组
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

7.3 函数参数的定义

javascript 复制代码

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

7.4 提取 JSON 数据

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

javascript 复制代码

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

7.5 函数参数的默认值

javascript 复制代码

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

指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

7.6 遍历 Map 结构

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

javascript 复制代码

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

如果只想获取键名，或者只想获取键值，可以写成下面这样。

javascript 复制代码

// 获取键名
for (let [key] of map) {
  // ...
}
// 获取键值
for (let [,value] of map) {
  // ...
}

7.7 加载模块的指定方法

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

javascript 复制代码

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

第3集丨ES6 江湖 —— 解构赋值

目录

1、数组的解构赋值

1.1 解构模型

1.2 基本解构

1.3 不完全解构

1.4 错误解构

1.5 Set 解构赋值

1.6 默认值

2. 对象的解构赋值

2.1 解构机制

2.2 嵌套

2.3 解构报错

2.4 解构原型属性

2.5 默认值

2.6 注意点

3. 字符串的解构赋值

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

5. 函数参数的解构赋值

6. 圆括号问题

6.1 不能使用圆括号的情况

6.1.1 变量声明语句

6.1.2 函数参数

6.1.3 赋值语句的模式

6.2 可以使用圆括号的情况

7. 应用

7.1 交换变量的值

7.2 从函数返回多个值

7.3 函数参数的定义

7.4 提取 JSON 数据

7.5 函数参数的默认值

7.6 遍历 Map 结构

7.7 加载模块的指定方法