JavaScript系列之解构赋值

---

一、解构赋值概述

解构赋值语法是一种 Javascript 表达式。通过解构赋值，可以将属性/值从对象/数组中取出，赋值给其他变量。

二、解构赋值语法

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

[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

三、描述

对象和数组逐个对应表达式，或称对象字面量和数组字面量，提供了一种简单的定义一个特定的数据组的方法。

var x = [1, 2, 3, 4, 5];
1

解构赋值使用了相同的语法，不同的是在表达式左边定义了要从原变量中取出什么变量。

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2
1
2
3
4

四、示例【解构数组】

1、变量声明并赋值时的解构

var foo = ["one", "two", "three"];

var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
1
2
3
4
5
6

2、如果解构不成功，变量的值为undefined。

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

3、变量先声明后赋值时的解构

通过解构分离变量的声明，可以为一个变量赋值。

var a, b;

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

4、默认值

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

var a, b;

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

5、交换变量

在一个解构表达式中可以交换两个变量的值。

没有解构赋值的情况下，交换两个变量需要一个临时变量。

var a = 1;
var b = 3;

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

6、忽略某些返回值

你也可以忽略你不感兴趣的返回值：

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

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

你也可以忽略全部返回值：

[, ,] = f();
1

7、将剩余数组赋值给一个变量

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

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

8、用正则表达式匹配提取值

用正则表达式的 exec() 方法匹配字符串会返回一个数组，该数组第一个值是完全匹配正则表达式的字符串，然后的值是匹配正则表达式括号内内容部分。解构赋值允许你轻易地提取出需要的部分，忽略完全匹配的字符串——如果不需要的话。

function parseProtocol(url) {
	var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
	if (!parsedURL) {
		return false;
	}
	console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]

	var [, protocol, fullhost, fullpath] = parsedURL;
	return protocol;
}

console.log(parseProtocol("https://developer.mozilla.org/en-US/Web/JavaScript")); // "https"
1
2
3
4
5
6
7
8
9
10
11
12

五、示例【解构对象】

1、基本赋值

var o = { p: 42, q: true };
var { p, q } = o;

console.log(p); // 42
console.log(q); // true
1
2
3
4
5

2、无声明赋值

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

var a, b;

({ a, b } = { a: 1, b: 2 });
1
2
3

3、给新的变量名赋值

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

var o = { p: 42, q: true };
var { p: foo, q: bar } = o;

console.log(foo); // 42
console.log(bar); // true
1
2
3
4
5

4、默认值

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

var { a = 10, b = 5 } = { a: 3 };

console.log(a); // 3
console.log(b); // 5
1
2
3
4

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

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

var { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); // 3
console.log(bb); // 5
1
2
3
4

6、函数参数默认值

ES5 版本

function drawES5Chart(options) {
	options = options === undefined ? {} : options;
	var size = options.size === undefined ? "big" : options.size;
	var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
	var radius = options.radius === undefined ? 25 : options.radius;
	console.log(size, cords, radius);
	// now finally do some chart drawing
}

drawES5Chart({
	cords: { x: 18, y: 30 },
	radius: 30
});
1
2
3
4
5
6
7
8
9
10
11
12
13

ES2015 版本

function drawES2015Chart({ size = "big", cords = { x: 0, y: 0 }, radius = 25 } = {}) {
	console.log(size, cords, radius);
	// do some chart drawing
}

drawES2015Chart({
	cords: { x: 18, y: 30 },
	radius: 30
});
1
2
3
4
5
6
7
8
9

7、解构嵌套对象和数组

const metadata = {
	title: "Scratchpad",
	translations: [
		{
			locale: "de",
			localization_tags: [],
			last_edit: "2014-04-14T08:43:37",
			url: "/de/docs/Tools/Scratchpad",
			title: "JavaScript-Umgebung"
		}
	],
	url: "/en-US/docs/Tools/Scratchpad"
};

let {
	title: englishTitle, // rename
	translations: [
		{
			title: localeTitle // rename
		}
	]
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"
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

8、For of 迭代和解构

var people = [
	{
		name: "Mike Smith",
		family: {
			mother: "Jane Smith",
			father: "Harry Smith",
			sister: "Samantha Smith"
		},
		age: 35
	},
	{
		name: "Tom Jones",
		family: {
			mother: "Norah Jones",
			father: "Richard Jones",
			brother: "Howard Jones"
		},
		age: 25
	}
];

for (var {
	name: n,
	family: { father: f }
} of people) {
	console.log("Name: " + n + ", Father: " + f);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"
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

9、从作为函数实参的对象中提取数据

function userId({ id }) {
	return id;
}

function whois({ displayName: displayName, fullName: { firstName: name } }) {
	console.log(displayName + " is " + name);
}

var user = {
	id: 42,
	displayName: "jdoe",
	fullName: {
		firstName: "John",
		lastName: "Doe"
	}
};

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

10、对象属性计算名和解构

计算属性名，如 object literals，可以被解构。

let key = "z";
let { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"
1
2
3
4

11、对象解构中的 Rest

let { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 };
a; // 10
b; // 20
rest; // { c: 30, d: 40 }
1
2
3
4

12、无效的 JavaScript 标识符作为属性名称

通过提供有效的替代标识符，解构可以与不是有效的 JavaScript 标识符的属性名称一起使用。

const foo = { "fizz-buzz": true };
const { "fizz-buzz": fizzBuzz } = foo;

console.log(fizzBuzz); // true
1
2
3
4

13、解构对象时会查找原型链（如果属性不在对象自身，将从原型链中查找）

// 声明对象 和 自身 self 属性
var obj = { self: "123" };
// 在原型链中定义一个属性 prot
obj.__proto__.prot = "456";
// test
const { self, prot } = obj;
// self "123"
// prot "456"（访问到了原型链）
1
2
3
4
5
6
7
8

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！