ES6 - 解构赋值

483 阅读3分钟

上一篇文章 ES6 --- let、const与作用域

1.什么是解构赋值?

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

1.1解构赋值的几种类型

左右的都是数组,数组解构赋值 左右都是对象,对象解构赋值 左边是数组,右边是字符串,字符串解构赋值 布尔值解构赋值,函数参数解构赋值,数值解构赋值

##2.数组的解构赋值##

2.1 看一种最直接最简单的数组解构赋值

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

在这里,右边的数组有两个值,左边的数组有变量a,b; 通过解构赋值,a=1, b=2;

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

这里用到了 ...rest 这样的格式,可以看到最后输出的rest值是一个数组,所以可以得到一个结论,如果解构赋值时,...rest 对应的值有一个或者多个,就会自动组合成一个数组,并且数组的内容是其位置对应的数组长度。

2.2 未配对成功以及默认值

{
	let a,b,c,rest;
	[a,b,c] = [1,2]; //没有成功配对,c就未undefined
	console.log(a,b,c); //1 2 undefined
}

上面的代码中 C 没有配对成功,右侧的数字只有两个值,所以 c 就是undefined,而a,b的值还是1和2.

//默认值
{
	let a,b,c;
	[a,b,c=3] = [1,2]; 
	console.log(a,b,c); //1 2 3
}

这次的代码中,c 含有默认值等于3,在配对过程中,因为右侧数组只有2个值,所以a,b分别等于1,2。按照上一个例子,c 应该为undefined,但是因为我们给了默认值 = 3 ,所以 c 在没有被赋值成功时,其值等于默认值 3。

  1. 对象的解构赋值

对象的解构赋值其实和数组是类似的,我们这里就展示几个例子,大家就会明白了。

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

和之前的数组的解构赋值对应,这里的a,b 分别为 1,2。

//默认值
{
	let a,b,c;
	({a,b,c=3} = {a:1,b:2}); 
	console.log(a,b,c); //1 2 3
}

默认值的方式也同样适应于对象

3.使用场景

3.1 变量的交换

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

3.2 变量赋值

{
	function f(){
		return [1,2]
	}
	let a,b;
	[a,b] = f();
	console.log(a,b); // 1 2
}

返回多个值的情况下,选择性的去接受一个或者多个变量

{
	function f(){
		return [1,2,3,4,5]
	}
	let a,b;
	[a,,,b] = f();
	console.log(a,b); //1 4
}

在不知道函数返回的数组长度的情况下,只关心第一个,其余的返回一个数组

{
	function f(){
		return [1,2,3,4,5]
	}
	let a,b,c;
	[a,...b] = f();
	console.log(a,b); //1 [2,3,4,5]
}

{
	function f(){
		return [1,2,3,4,5]
	}
	let a,b,c;
	[a,,...b] = f();
	console.log(a,b); //1 [3,4,5]
}

3.3 前后端通信,json对象

{
	let metaData = {
		title: 'abc',
		test: [{
			title: 'test',
			desc: 'description'
		}]
	}
	let {title: esTitle, test:[{title:cnTitle}]} = metaData;
	console.log(esTitle,cnTitle); // abc  test
}

这里有必要说明下,我们定义的title必须和metaData中的title名称一致,下面的test也与metaData的名称一直,只有才能赋值成功。这里的title和test都称为模式,而不是变量。如果title也要作为变量,可以这样写:

{
	let metaData = {
		title: 'abc',
		test: [{
			title: 'test',
			desc: 'description'
		}]
	}
	let {title,title: esTitle, test:[{title:cnTitle}]} = metaData;
	console.log(title,esTitle,cnTitle); //abc abc  test
}

3.4 输入模块的指定方法

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

const { pModule1, pModule2 } = require("p");

如果有不知道为什么使用{} 和 let,const的作用的,请看上一篇文章

ES6 --- let、const与作用域