ES6学习之变量的解构赋值

Posted 2021-02-02 hongxuquan

前言：什么是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新增的一种使代码更加优美简洁的一种模式，有兴趣的同学可以多去使用学习。