ES6解构赋值学习总结

发布时间:2019-08-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了ES6解构赋值学习总结脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

ES6提供了解构赋值的方式,这样子在赋值多个变量或者进行注释时可以方便很多,不同场景下也有很多新的应用,个人常使用的有数组解构赋值对象的解构赋值函数参数的解构赋值,函数参数的解构赋值之前总结过,这里写下数组的和对象的简单总结吧
函数参数的解构赋值总结点击这里

一、数组的解构赋值

先来个最简单的

let [a, b] = [1, 2];
a;//输出1
b;//输出2

这种模式就容易为多个变量赋值,因为等号右边是数组,所以有需要获取数组元素时,如下使用更为方便

let array = [1,2,3];
let [a, b, c] = array;
a;//输出1
b;//输出2
c;//输出3

当然,数组中的元素是不限类型的

let [a, array, c] = [1, [2,3], 4];
a;//输出1
array;//输出[2,3]
c;//输出4

另外,可将剩余元素赋值给一个变量

let [a, ...b] = [1,2,3,4];
a;//输出1
b;//输出[2, 3, 4]

其实只要等号右边具有ITerator接口均可使用解构赋值

二、对象的解构赋值

先给个最简单的例子

let {name, sex} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
sex;//"male"

这里的赋值是变量名对应属性名赋值,如果变量名与属性名没有对应上的话,则会赋值失败,如下所示

let {name, gender} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
gender;//undefined,因为没有对应属性名

其实以上写法只是如下写法的简写

let {name:name, sex:sex} = {name:"Jonithan", sex:"male"}
name;//"Jonithan"
sex;//"male"

所以其实是把对应的属性名提取出来给一个变量,所以可以这样使用

let {name:username, sex:gender} = {name:"Jonithan", sex:"male"}
username;//"Jonithan"
gender;//"male"

以上仅列出了较为简单的情况,更多具体情况查询MDN吧,或者翻看阮老师的《ES6标准入门》

脚本宝典总结

以上是脚本宝典为你收集整理的ES6解构赋值学习总结全部内容,希望文章能够帮你解决ES6解构赋值学习总结所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。