ES6学习之变量的解构赋值
2019-01-11 08:33:34来源：博客园 阅读 ()
前言：什么是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新增的一种使代码更加优美简洁的一种模式，有兴趣的同学可以多去使用学习。
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：05JavaScript语句
- 在JavaScript中尽可能使用局部变量的原因 2020-03-08
- 详解Webstorm 新建.vue文件支持高亮vue语法和es6语法 2020-02-07
- Node.js中环境变量process.env的一些事详解 2020-01-17
- JavaScript判断变量是对象还是数组的方法 2019-12-25
- JavaScript闭包函数访问外部变量的方法 2019-12-24
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
