【读书笔记】ES6之解构赋值

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

谁可以解构

数组可以用数组解构，对于 Set 结构，也可以使用数组的解构赋值。
解构赋值的规则是，只要等号右边的值不是对象或数组，就先将其转为对象。

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

1
2

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

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
2
3
4
5
6
7
8
9
10
11

上面代码中，fibs 是一个 Generator 函数（参见 Generator 函数），原生具有 Iterator 接口。解构赋值会依次从这个接口获取值。上面的语句都会报错，因为等号右边的值，要么转为对象以后不具备 Iterator 接口（前五个表达式），要么本身就不具备 Iterator 接口（最后一个表达式）。
当解构赋值表达式的右侧（=后面的表达式）的计算结果为 null 或 undefined 时，会抛出错误。因为任何读取 null 或 undefined 的企图都会导致“运行时”错误（runtime error）。

解构缺少初始化报错

当使用解构来配合 var 、let 或 const 来声明变量时，必须提供初始化器（即等号右边的值）。下面的代码都会因为缺失初始化器而抛出错误：

//	语法错误！
var	{type,name};
//	语法错误！
let	{type,name};
//	语法错误！
const {type,name};

1
2
3
4
5
6

与对象解构相似，在使用 var 、let 、const 进行数组解构时，你必须提供初始化器。

已声明变量用于解构赋值

对象

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

1
2
3
4

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

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

1
2
3

数组

你可以在赋值表达式中使用数组解构，但是与对象解构不同，不必将表达式包含在圆括号内，例如：

let	colors=["red","green","blue"	],
let	firstColor	=	"black",
let	secondColor	=	"purple";
[firstColor,secondColor	]	=	colors;
console.log(firstColor);//	"red"
console.log(secondColor);//	"green"

1
2
3
4
5
6

解构赋值表达式的值

解构赋值表达式的值为表达式右侧（在 = 之后）的值。也就是说在任何期望有个值的位置都可以使用解构赋值表达式。例如，传递值给函数：

let	node={type:	"Identifier",name:	"foo"},
let type = "Literal",
let name = 5;
function	outputInfo(value)	{
	console.log(value	===	node);	//	true
}

outputInfo({type,name}=node);

console.log(type);//	"Identifier"
console.log(name);//	"foo"

1
2
3
4
5
6
7
8
9
10
11

数组的解构赋值

数组解构赋值表达式的右值报错

如果等号的右边不是数组（或者严格地说，不是可遍历的结构，参见 Iterator），那么将会报错。
如果左边是用{}来解构，会把右值转为对象，除了 null 和 undefined 以外都不会报错。

// 报错
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

1
2
3
4
5
6
7

一维数组的解构

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

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

嵌套数组的解构

let [firstColor, [secondColor]] = ['red', ['green', 'lightgreen'], 'blue'];
console.log(firstColor); //	"red"
console.log(secondColor); //	"green"

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo; // 1
bar; // 2
baz; // 3

1
2
3
4
5
6
7
8

不完全解构

let [, , third] = ['foo', 'bar', 'baz'];
third; // "baz"

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

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

let [, firstColor, [secondColor]] = ['red', 'blue', ['green', 'lightgreen']];
firstColor; //blue
secondColor; //["green","lightgreen"]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

解构不成功

当指定位置的项不存在、或其值为 undefined ，则解构不成功，变量的值就等于 undefined。

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

1
2

默认值

当指定位置的项解构不成功时，那么该默认值就会被使用。
注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员严格等于 undefined，默认值才会生效。
如果一个数组成员是 null，默认值就不会生效，因为 null 不严格等于 undefined。

let colors = ['red'];
let [firstColor, secondColor = 'green'] = colors;
console.log(firstColor); //"red"
console.log(secondColor); //	"green"

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

1
2
3
4
5
6
7

如果默认值是一个表达式，那么这个表达式是惰性求值的，即只有在用到的时候，才会求值。

function f() {
  console.log('aaa');
}

let [x = f()] = [1];

1
2
3
4
5

上面代码中，因为 x 能取到值，所以函数 f 根本不会执行。上面的代码其实等价于下面的代码。
默认值可以引用解构赋值的其他变量，但该变量必须已经声明。

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
3
4

剩余项解构

数组解构有个类似的、名为剩余项（ rest items ）的概念，它使用...语法来将剩余的项目赋值给一个指定的变量。

let [head, ...tail] = [1, 2, 3, 4];
head; // 1
tail; // [2, 3, 4]

1
2
3

但它还有另一个有用的功能。方便地克隆数组在 JS 中是个明显被遗漏的功能。在 ES5 中开发者往往使用的是一个简单的方式，也就是用 concat() 方法来克隆数组。

var colors = ['red', 'green', 'blue'];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"

1
2
3

而在 ES6 中，你可以使用剩余项的语法来达到同样效果。实现如下：

let colors = ['red', 'green', 'blue'];
let [...clonedColors] = colors;
console.log(clonedColors); //"[red,green,blue]"

1
2
3

注意！剩余项必须是数组解构模式中最后的部分，之后不能再有逗号，否则就是语法错误。

对象的解构赋值

解构不仅可以用于数组，还可以用于对象。对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
对象的解构赋值的解构和数组的差不多，只是[]换为了{}，嵌套对象多了个：，还有对象不在乎属性的顺序，所以对象的不完全解构是不必要像数组那样的，想要哪个属性直接写属性名就行了，同时还多了个别名的设置。

//普通对象的解构
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
foo; // "aaa"
bar; // "bbb"

//嵌套对象的解构
let obj = {
  p: ['Hello', { y: 'World' }]
};
let {
  p: [x, { y }]
} = obj;
//注意，这时p是模式，不是变量，因此不会被赋值。
//如果p也要作为变量赋值，可以写成下
//let { p, p: [x, { y }] } = obj;
x; // "Hello"
y; // "World"
//另一个例子
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}
//注意，最后一次对line属性的解构赋值之中，只有line是变量，loc和start都是模式，不是变量。

//默认值
var { x = 3 } = {};
x; // 3
var { x, y = 5 } = { x: 1 };
x; // 1
y; // 5
//默认值生效的条件是，对象的属性值严格等于undefined
var { x = 3 } = { x: undefined };
x; // 3
var { x = 3 } = { x: null };
x; // null

//解构不成功，变量的值等于undefined。
let { foo } = { bar: 'baz' };
foo; // undefined
// foo这时等于undefined，再取子属性就会报错
let {
  foo: { bar }
} = { baz: 'baz' };

//由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。
let arr = [1, 2, 3];
let { 0: first, [arr.length - 1]: last } = arr;
first; // 1
last; // 3
//length属性
let { length: len } = [1, 2, 3];
len; //3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

设置别名

ES6 有一个扩展语法，允许你在给本地变量赋值时使用一个不同的名称。

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'

1
2
3
4
5
6
7

字符串的解构赋值

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

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

1
2
3
4
5
6

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

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

1
2

数值和布尔值的解构赋值

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

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

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

let {toString} = NaN；
toString === Number.prototype.toString//true

1
2
3
4
5
6
7
8

函数参数的解构赋值

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

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

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

1
2
3
4
5

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

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
2
3
4
5
6
7
8

上面代码中，函数 move 的参数是一个对象，通过对这个对象进行解构，得到变量 x 和 y 的值。如果解构失败，x 和 y 等于默认值。当 JS 的函数接收大量可选参数时，一个常用模式是创建一个 options 对象，其中包含了附加的参数。

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]

1
2
3
4
5
6
7
8

js 会先把实参传进形参的右值，代替左值，如果没传，默认用形参的右值。
undefined 就会触发函数参数的默认值。

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

1
2

用途

交换变量的值

let x = 1;
let y = 2;

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

1
2
3
4

取出从函数返回的值

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

// 返回一个数组

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

// 返回一个对象

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

函数无次序参数的传入

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

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

1
2
3

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

1
2
3
4
5
6
7
8
9
10

函数参数的默认值

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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

遍历 Map 结构

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

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

1
2
3
4
5
6
7
8
9

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

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

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

1
2
3
4
5
6
7
8
9

输入模块的指定方法

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

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

参考文章： ECMAScript 6 入门

【读书笔记】ES6之解构赋值

最后更新时间：2019-02-23 00:09:45

谁可以解构

解构缺少初始化报错

已声明变量用于解构赋值

对象

数组

解构赋值表达式的值

数组的解构赋值

数组解构赋值表达式的右值报错

一维数组的解构

嵌套数组的解构

不完全解构

解构不成功

默认值

剩余项解构

对象的解构赋值

设置别名

字符串的解构赋值

数值和布尔值的解构赋值

函数参数的解构赋值

用途

交换变量的值

取出从函数返回的值

函数无次序参数的传入

提取 JSON 数据

函数参数的默认值

遍历 Map 结构

输入模块的指定方法

TOC

【读书笔记】ES6之解构赋值

最后更新时间：2019-02-23 00:09:45

# 谁可以解构

# 解构缺少初始化报错

# 已声明变量用于解构赋值

# 对象

# 数组

# 解构赋值表达式的值

# 数组的解构赋值

# 数组解构赋值表达式的右值报错

# 一维数组的解构

# 嵌套数组的解构

# 不完全解构

# 解构不成功

# 默认值

# 剩余项解构

# 对象的解构赋值

# 设置别名

# 字符串的解构赋值

# 数值和布尔值的解构赋值

# 函数参数的解构赋值

# 用途

# 交换变量的值

# 取出从函数返回的值

# 函数无次序参数的传入

# 提取 JSON 数据

# 函数参数的默认值

# 遍历 Map 结构

# 输入模块的指定方法

TOC

谁可以解构

解构缺少初始化报错

已声明变量用于解构赋值

对象

数组

解构赋值表达式的值

数组的解构赋值

数组解构赋值表达式的右值报错

一维数组的解构

嵌套数组的解构

不完全解构

解构不成功

默认值

剩余项解构

对象的解构赋值

设置别名

字符串的解构赋值

数值和布尔值的解构赋值

函数参数的解构赋值

用途

交换变量的值

取出从函数返回的值

函数无次序参数的传入

提取 JSON 数据

函数参数的默认值

遍历 Map 结构

输入模块的指定方法