上一篇文章 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。
3. 对象的解构赋值
对象的解构赋值其实和数组是类似的,我们这里就展示几个例子,大家就会明白了。
{
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的作用的,请看上一篇文章