5.变量的解构赋值 - JS

什么是解构赋值

1. 通过类似（或相同）的构型，将已知数据的元素/属性解构并提取出来，再赋值到相应变量，可以是新建的变量，也可以是已存在的变量/属性等；
2. 最常见的是数组和对象的解构赋值，基本语法如下。

/* 绑定模式：变量同用一个声明let/const */
/* 数组 */
const [a, b] = array;
let [a, , b] = array;
const [a = aDefault, b] = array;
let [a, b, ...rest] = array;
const [a, , b, ...rest] = array;
let [a, b, ...{ pop, push }] = array;
const [a, b, ...[c, d]] = array;
/* 对象 */
const { a, b } = obj;
let { a: a1, b: b1 } = obj;
const { a: a1 = aDefault, b = bDefault } = obj;
let { a, b, ...rest } = obj;
const { a: a1, b: b1, ...rest } = obj;
let { [key]: a } = obj;

/* 赋值模式：变量的声明各自独立 */
let a, b, a1, b1, c, d, rest;
let pop, push;
[a, b] = array;
[a, , b] = array;
[a = aDefault, b] = array;
[a, b, ...rest] = array;
[a, , b, ...rest] = array;
[a, b, ...{ pop, push }] = array;
[a, b, ...[c, d]] = array;

({ a, b } = obj); // 必须加上 ()
({ a: a1, b: b1 } = obj);
({ a: a1 = aDefault, b = bDefault } = obj);
({ a, b, ...rest } = obj);
({ a: a1, b: b1, ...rest } = obj);

• 可以看到，声明和解构赋值在同一语句的是绑定模式；先声明再赋值的是赋值模式；
• 下面根据不同数据类型，进行语法总结。

---

数组的解构赋值

将可迭代对象解构，赋值给数组模式里对应位置上的变量。

基本语法

1. 完全的模式匹配，构型完全一致；

let [a, b] = [1, 2];
let [a, [b, c], [d], e] = [1, [2, 3], [4], 5];

2. 数据更多，只赋值指定位置；

let [a, b] = [1, 2, 3]		// a=1,b=2
let [a, , b] = [1, 2, 3, 4]	// a=1,b=3,跳过第二个位置

3. 数据更少，多余的变量赋值为 undefined；

let [a, b, c] = [1, 2]			// c=undefined
let [a, [b, c], d] = [1, [2]]	// c=d=undefined

4. 结合剩余参数，将剩余的数据作为数组赋值给最后一个变量；

let [a, ...rest] = [1, 2, 3, 4]				// rest = [2, 3, 4]
let [a, , ...rest] = [1, 2, 3, 4]			// rest = [3, 4]
let [a, [b, ...rest], c] = [1, [2, ], 3, 4]	// rest = []

5. 带默认值的解构赋值；

let [a=1] = []			// a=1
let [a=1] = [undefined]	// a=1
let [a=1] = [null]		// a=null

6. *将前面变量用作后面变量的默认值。

let [x, y=x, z=2*x] = [1]	// y=1,z=2
let [x, y=x] = [1, 10]		// y=10
let [x=y, y] = [1, 10]		// 这种写法易错、且没有太多意义，因为匹配是从左到右的

扩展部分

1. 一个数据交换的便捷语法 [b, a] = [a, b]；
2. 一般的可迭代对象（Map、Set、String等）都可以通过数组模式进行解构赋值；
3. *在函数参数列表中，起提取相应参数的作用，只有被提取的参数，后续会被传入函数。

let [a, b] = new Map([
  [1, 2],				// a=[1,2]
  [3, 4],				// b=[3,4]
]);

function* gen() {
	yield* [1, 2, 3]
}
let [x, y, z] = gen()	// x=1,y=2,z=3

function firstPlusThird([first, ,third]) { return first + third; }
firstPlusThird([1, 2, 10, 20])	// 11

注意事项

1. 可以嵌套；
2. 剩余参数必须在最后一个位置；
3. 只有在没有匹配成功的时候，才会执行默认值的表达式；
4. 数组模式的右端的期待值是可迭代对象；
5. 不要将可能匹配失败的变量，作为默认值。

let [a, ...rest, b] = [1, 2, 3, 4]	// 报错，剩余参数rest不能在中间
let [a=console.log(1)] = [1]		// a=1且不会执行console.log(1)
let [a=console.log(1)] = []			// a=undefined且执行console.log(1)
let [x=y,y] = []					// 报错，y没有匹配到就赋值给x，x、y都没有声明成功
let [x, y] = 1						// 报错
let [x] = null						// 报错

对象的解构赋值

解构对象的属性，给相同属性名的变量进行赋值；和数组模式不同的是属性没有次序，要根据属性名赋值。

基本语法

1. 同名的属性（匹配成功->属性值赋值给对应变量） / 没有同名的属性（匹配失败->undefined）；

const employee = {
  id: 42,
  isAdmin: true,
  salary: '1.8w',
};
let { id, isAdmin } = employee;	// id=42,isAdmin=true
let { isAdmin, id } = employee;	// id=42,isAdmin=true
let { wage } = employee;		// wage=undefined

2. 将匹配到的属性赋值给其他名称的变量；

/*
*  : 后的才是变量名
*  : 前的是要匹配的属性名
*/
let { id:ID } = employee;		// ID=42,没有id这个变量
let { salary:wage } = employee; // wage='1.8w'

3. 带有默认值；

const employee2 = {  }
let { id=1 } = employee;		// id=42,匹配成功了
let { id=1 } = employee2;		// id=1,匹配失败了
let { id:ID=1 } = employee;		// ID=42,匹配成功了
let { id:ID=1 } = employee2;	// ID=1,匹配失败了

4. 嵌套；

const o = {
	done: false,
	materials: [ ['copper',], { obsidian: '3kg', granite: '10t' } ],
	rate: '0%',
	plus() { this.rate = 1 + +this.rate.slice(0, -1) + '%' }
}
let { materials: m } = o;		// m=[ ['copper',], { obsidian: '3kg', granite: '10t' } ]
let { materials: [a, b] } = o;	// a=['copper'],b={ obsidian: '3kg', granite: '10t' }
let { materials: [, { obsidian }] }	// obsidian='3kg'

5. 带有计算属性。

let employee3 = { 
	id: 12,
	isAdmin: true
};
let x = 'id'
let { [x]: theId } = employee3		// theId=12

扩展部分

1. 数组/字符串等基本数据类型是特殊的对象，有自己的属性（length、0/1/…等索引），甚至原型链上的方法都可以赋值（尽管不能正常使用）；
2. 还有一些内置对象，Math、Date 等一些好用的方法，可以独立使用的方法，都可以通过解构赋值的语法赋值给变量，使得调用更方便；
3. *在函数参数列表中，起提取相应参数的作用，只有被提取的参数，后续会被传入函数；
4. 当解构一个对象时，如果属性本身没有被访问，它将沿着原型链继续查找，如上面第1点。

let { 0:firstPos, 1:secondPos, length:len, at } = [1, 2, 3, 4]
firstPos	// 1
secondPos	// 2
len			// 4
at(0)		// 报错，因为没有指向的对象，脱离了数组

let { max, sin, PI:pi } = Math
max(1, 4, 2)// 4
sin(pi/2)	// 1

let user = { id: 32,name: 'Li Ming' }, user2 = {};
function getUserId({ id }) {
	return id;
}
getUserId(user)		// 32
getUserId(user2)	// undefined

注意事项

1. 将属性赋值给其他名字的变量时，: 前的是属性名，不是建立的变量，也不会建立；
2. {} 可以没有变量；
3. null、undefined 不能解构的数据类型；
4. 先声明再赋值的情况，需要用 () 包围。先声明后赋值模式的语句 + ()。

let { x:y } = { x: 1 }		// 将属性x 的值赋值给y，创建了变量y，没有创建变量x
let { a: 1 } = null			// 报错
let {  } = null				// 报错
let { a: 1 } = undefined	// 报错
let {  } = undefined		// 报错
let m;
{ m } = { m: 'M' }			// 报错
({ m } = { m: 'M' })		// m=1
({} = { a: 1, b: 2 })		// 这样是允许的,尽管很怪

字符串的解构赋值

字符串既可以作为类数组，进行数组模式的解构赋值；也可以作为对象，进行对象的解构赋值。

let str = 'Hello';
let strArr;
/* 作为数组被解构 */
let [a, b, , ,c] = str;			// a='H',b='e',c='o'
/* 作为对象被解构 */
let { length:n, 0:firstChar }	// n=5,firstChar='H'
({ 0:strArr[0], [str.length-1]:strArr[1] } = str)
strArr	// ['H', 'o']

函数参数的解构赋值

上面数组和对象的解构赋值，扩展部分提到过。在参数列表中做解构的类型一般就是数组和对象模式：

1. 数组模式，根据位置上匹配数据，提取出来并进行指定传参；
2. 对象模式，根据属性名匹配到属性值，提取出来并进行指定传参；
3. 匹配失败，传 undefined 。

let arr = [1, 2, 10, 20], obj = { value: 100 };
function getM([a, ,b], { value }) {
	return a + b > value ? a + b: value; // 取大
}

getM(arr, obj)	// 100

应用

1. 简单地，交换变量的值；
2. 从函数返回多个值；
3. 函数的解构参数；
4. 提取 JSON 数据；
5. 等等等等。

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

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