ECMAScript6 解构赋值

简介

结构赋值是一种赋值模式，通过将 属性/值 从 对象/数组 中取出，赋值给其他变量。

语法

注意：

• 不完全解构左右匹配时，右侧值多则顺位匹配，左侧值多则未能匹配右边值的变量会赋予初值undefined；
• 结构赋值允许指定默认值，但是 需要在解构赋值表达式上使用 ，无匹配时变量值为该初值。ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以只有当一个数组成员严格等于undefined，默认值才会生效，如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined，如 let [a = 1] = [undefined];// a:1 而 let [a = 1] = [null];// a:null；
• 左值遍历顺序为从左至右 ，如 let [a = 1, b = a] = [1, 2]; // a:1; b:2 正确，而 let [a = b, b = 1] = []; // ReferenceError: b is not defined 报错
• 某种数据结构具有 Iterator 接口，都可以采用数组形式的解构赋值 （有iterator接口：Array Map Set String ） ，反之等号右边的值，转为对象以后不具备 Iterator 接口或者本身就不具备 Iterator 接口的都会报错。

var a, b, rest, k=1;
[a, b, k] = [10, 20];
console.log(a); // 10
console.log(b); // 20
console.log(k); // undefined,这里右边没有值给到k了，所以undefined
[a, b, k=2] = [10, 20];
console.log(a); // 10
console.log(b); // 20
console.log(k); // 2

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

// Stage 4（已完成）提案中的特性
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

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

解构数组赋值

基本用法

// 变量声明并赋值时的解构
var foo = [1, 2];

var [one, two] = foo;
console.log(one); // 1
console.log(two); // 2

// 变量先声明后赋值时的解构
var a, b;

[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
1
2
3
4
5
6
7
8
9
10
11
12
13

默认值

防止从数组中取出一个值为undefined的对象，可以在表达式左边的数组中为任意对象预设默认值。

var a, b;

[a=0, b=2] = [1];
console.log(a); // 1
console.log(b); // 2

1
2
3
4
5
6

交换变量

在一个解构表达式中可以交换两个变量的值。
注意：没有解构赋值的情况下，交换两个变量需要一个临时变量（或者用低级语言中的XOR-swap 技巧）

var a = 1;
var b = 2;

[a, b] = [b, a];
console.log(a); // 2
console.log(b); // 1

1
2
3
4
5
6
7

解构由函数返回值提供的数组

返回值是数组的都符合这种模式，如正则表达式的exec()。

function f() {
  return [1, 2];
}

var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
1
2
3
4
5
6
7
8

忽略部分赋值

以[, ,]的形式忽略对应位置的值。

var foo = [1, 2, 3];

var [a, , b] = foo;
console.log(a); // 1
console.log(b); // 3
1
2
3
4
5

剩余数组赋值

当解构一个数组时，可以使用剩余模式，将数组剩余部分赋值给一个变量。

var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
1
2
3

注意：如果剩余元素右侧有逗号，会抛出 SyntaxError，因为剩余元素必须是数组的最后一个元素。

var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma
1
2

解构对象赋值

基本用法

var o = {a: 1, b: true};

var {a, b} = o;
console.log(a); // 1
console.log(b); // true
1
2
3
4
5

无声明赋值

一个变量可以独立于其声明进行解构赋值。
注意：

• 赋值语句周围的 圆括号 ( … ) 在使用对象字面量无声明解构赋值时是 必须 的；
• {a, b} = {a: 1, b: 2} 不是有效的独立语法，左边的 {a, b} 被认为 是一个块 而不是对象字面量；
• ({a, b} = {a: 1, b: 2}) 是有效的，正如 var {a, b} = {a: 1, b: 2}；
• ( … ) 表达式之前需要有一个分号，否则它 可能会被当成上一行中的函数 执行。

var a, b;

({a, b} = {a: 1, b: 2});
console.log(a); // 1
console.log(b); // 2
1
2
3
4
5

默认值

与数组解构类似的，变量可以先赋予默认值，当要提取的对象对应属性解析为 undefined，变量就被赋予默认值。

var {a = 0, b = 2} = {a: 1};
console.log(a); // 1
console.log(b); // 2
1
2
3

给新变量名赋值

可以从一个对象中提取变量并赋值给和对象属性名不同的新的变量名。

var o = {a: 1, b: true};

var {a: foo, b: bar} = o;
console.log(foo); // 1
console.log(bar); // true
1
2
3
4
5

给新的变量命名并提供默认值

一个属性可以同时从一个对象解构，并分配给一个不同名称的变量或分配一个默认值，以防未解构的值是 undefined。

var {a:aa = 0, b:bb = 2} = {a: 1};
console.log(aa); // 1
console.log(bb); // 2
1
2
3

参考：
1.《Destructuring assignment - JavaScript | MDN》；
2.《变量的解构赋值 - ECMAScript 6入门》；