ES6学习之变量的解构赋值

时间:2021-01-13 00:27:15

前言:什么是ES6?ECMAScript 6(简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。其中相比较于ES5新增了诸多的特性,并且ES6可转换为ES5的语法。->在线ES6转换为ES5工具
本系列学习随笔参考了阮一峰老师的《ES6标准入门》

一、解构赋值简述

在学习ES6之前,如果我们要从一个数组将值取出来,我们要如何去做?

let arr=[1,2,3];
let a=arr[0];
let b=arr[1];
let c=arr[2];

是不是感觉上面的代码很繁琐,我们仅仅是从简单的数组结构获取数据就需要很多重复的代码,若是更为复杂的数据结构呢,代码量可能更多,需要遍历的次数也更多。
针对于这种情况,ES6推出了解构赋值,所谓的解构赋值就是允许按照一定模式,从数组和对象中提取值,对变量进行赋值。

二、数组的解构赋值

那我们用ES6的解构赋值可以怎么去优化简述中的例子呢?

let [a, b, c] = [1, 2, 3];//表示可以从数组中提取值,按照对应的位置进行一一赋值。

同样的效果,只需要一行代码,是不是更清晰与简洁。 事实上,只要是具有Iterator 接口的都可以解构成功,关于iterable结构请关注我的博客,后续将会介绍,或者也可以去学习阮一峰老师的《ES6标准入门》的 Iterator一章
针对于更复杂的数组结构,也可以进行解析:

let [a, [[b], c]] = [1, [[2], 3]];//a==1,b==2,c==3
let [a,,c]=[1,2,3]//也可以只要其中几个值a==1,c==3
let [a, ...d] = [1, 2, 3, 4];//可以用...表示这个范围内解构成一个数组,a==1,d==[2,3,4]
let [a,b,c]=[1,2];//若是解构不成功,值为undefined,a==1,b==2,c==undefined
let [a] = 1;//若是右边是不可遍历结构,将会报错。输出Uncaught TypeError: 1 is not iterable;
let [a, b, c] = new Set([1, 2, 3]);Set结构也可以解构成功;

解构赋值中允许指定默认值:

let [a,b,c=3]=[1,2];//a==1,b==2,c==3;
//特别注意的是,当一个数组成员严格等于undefined,默认值才会生效。
let [a,b=2,c]=[1,null,3];//a==1,b==2,c==3;

默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

let [a=1,b=a]=[];//a==1,b==1;
let [a=b, b=1] = []; //Uncaught ReferenceError: b is not defined

三、对象的解构赋值

解构赋值不仅可以在数组中使用,对象中也是可以的,但是对象与数组不同的是,数组是按照顺序排列的,所以在进行对象解构赋值时,属性名与变量一定要一样。
接下来我们看下例子:

let {a,b}={a:1,b:2};//a==1,b==2
//若是想要属性名与变量名不一样,我们也可以写成以下这样
let { a: b } = { a: 1, c: 2 };//b==1,对象的解构赋值是先去寻找相同的属性名再去赋值,但是真正赋值的是后者

在对象中也可以像数组一样进行嵌套赋值

let obj = {
a: [
1,
{ c: 2 }
]
};
let { a: [b, { c }] } = obj;//b==1,c==2
//此时a是不赋值的,若是a想赋值,可以写成这样
let { a, a: [b, { c }] } = obj;//a==[1,{c:2}],b==1,c==2

如果我们要对已经声明的变量进行解构赋值,要小心js引擎将{}解析成代码块:

let a;
{a} = {a: 1};//Uncaught SyntaxError: Unexpected token =
//正确的写法如下:
({a} = {a: 1})

我们也可以有更为复杂的嵌套赋值:

let obj = {};
let arr = [];
({ b: obj.a, c: arr[0] } = { b: 1, c: 2 });//obj=={b:1},arr==[2]

我们可以引申出很多精妙的用法:

//将Math中的log,sin,cos方法逐一赋值出来。用的时候更方便。
let { log, sin, cos } = Math;
//操作数组的结构
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;

跟数组一样,我们在对象的解构赋值也可以进行指定默认值

var {a = 1} = {};//a==1

四、字符串的解构赋值

字符串也可以解构赋值:

const [a,b,c,d]=['fish'];//a=='f';b=='i';c=='s';d=='h';
//还可以解构他的属性
const [length:len]=['fish'];//len==5

五、函数参数的解构赋值

函数的参数也能解构赋值

function add([x, y]){
return x + y;
}
add([1, 2]); // 3

上面的例子中,一传入参数就会自动解构赋值成x1 y2
函数参数的解构赋值也能指定默认值

function add({x = 0, y = 0} = {}) {
return x+y;
}
add();//0
add(1);//1

六、用途

解构赋值不单单只能用来纯粹的从对象或者数组里面取值,他还有很多精妙的用途:

let a=1;
let b=2;
[a,b]=[b,a];//此时a==2;b==1;

上面就是一个两个变量交换值的例子,看更加起来简洁清晰易于理解。
平时我们函数如果想返回多个变量怎么办?我门可以将他们先转成数组或者对象,然后再解构赋值:

function getArry(){
return [1,2,3];
}
let [a,b,c]=getArry();//a==1;b==2;c==3

利用解构赋值我们也可以将函数的多个参数一一对应起来;

function a([a,b,c]){};
a([1,2,3]);
//还可以设置函数参数的默认值,上文已提过,这里就不重复说明了。

我们也可以利用解构赋值用来提取json里面的值;

let json={
data:[1,2,3]
}
const [data: num]=json;//num==[1,2,3]

总之,变量的解构赋值是ES6新增的一种使代码更加优美简洁的一种模式,有兴趣的同学可以多去使用学习。