ES6之解构赋值
发布时间:2017年12月24日 评论数:抢沙发阅读数: 6678
什么是解构?
正统解释:按照一定模式,从数组和对象中提取值,然后对变量进行赋值。
直白理解:模式匹配,映射关系,只要等式放的两边模式一样,一一对应,左边的变量就会被赋予对应的值。
数组解构
变量声明并赋值时的解构
![](http://upload-images.jianshu.io/upload_images/5977941-1194c12dfa732599.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
变量先声明后赋值时解构
![](http://upload-images.jianshu.io/upload_images/5977941-c28de644aab8d7a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
默认值
为了防止从数组中取出一个值为undefined 的对象,可以为这个数组设置一个默认值。
![](http://upload-images.jianshu.io/upload_images/5977941-34eaf03f31e53679.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
交换变量
在没有解构赋值的情况下,交换两个变量需要一个临时变量。
![](http://upload-images.jianshu.io/upload_images/5977941-9127ec7de6985727.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
解析一个从函数中返回的数组
![](http://upload-images.jianshu.io/upload_images/5977941-52a5dc52c196543f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
忽略某些返回值
![](http://upload-images.jianshu.io/upload_images/5977941-1823b9aa36b7627a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
将剩余数组赋值给一个变量
当解构一个数组是,可以使用剩余模式,将数组剩余部分赋值给一个变量。
![](http://upload-images.jianshu.io/upload_images/5977941-67fb18626f718632.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
注意:剩余元素必须是数组的最后一个元素,否则会抛出 SyntaxError 错误。
![](http://upload-images.jianshu.io/upload_images/5977941-4d5d50b7d9ad8c33.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
用正则表达式匹配提取值
用正则表达式方法exec() 匹配字符串会返回一个数组,该数组第一个值是完全匹配正则表达式的字符串,然后的值是匹配正则表达式括号内内容部分。结构赋值允许你轻易的提取出需要的部分,忽略完全匹配的字符串。
![](http://upload-images.jianshu.io/upload_images/5977941-735a43ea43b6788a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
对象解构
基本赋值
![](http://upload-images.jianshu.io/upload_images/5977941-62c81daf08afecbd.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
无声明赋值
![](http://upload-images.jianshu.io/upload_images/5977941-af92ff2148108431.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
注意:赋值语句周围的括号,是使用对象字面解构赋值时不需要声明的语法。{a,b} = {a:2, b:3} 不是有效的独立语法,因为左边的 {a, b} 被认为是一个块而不是对象字面量。然而,({a,b} = {a:2, b:3}) 是有效的,正如 var {a,b} = {a:2, b:3}。需要注意的是:这里的括号表达式需要一个分号在它前面,否则它会被当成一行中的函数执行。
给新的变量名赋值
![](http://upload-images.jianshu.io/upload_images/5977941-fd8e893247cd3e6b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
默认值
![](http://upload-images.jianshu.io/upload_images/5977941-dffbde1c410e3be0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
给新的变量名并提供默认值
![](http://upload-images.jianshu.io/upload_images/5977941-7395249f035f8c8d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
函数参数解构
![](http://upload-images.jianshu.io/upload_images/5977941-ce3a153ee0a9921f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
![](http://upload-images.jianshu.io/upload_images/5977941-066b24f7e2901444.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
如上代码,解构的左边被分配给右手边的空对象字面值,也可以在没有右侧分配的编写情况下编写函数。但是,这样在函数调用时,至少要提供一个参数,而在ES中,你可以直接调用函数,不用提供任何参数。
解构嵌套对象和数组
![](http://upload-images.jianshu.io/upload_images/5977941-fe804aca9789f5e5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
for of 迭代和解构
![](http://upload-images.jianshu.io/upload_images/5977941-a2be9c306500da64.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
从作为实参的函数参数的对象中提取数据
![](http://upload-images.jianshu.io/upload_images/5977941-a91b911ce918d80b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
解构赋值到此,下一章字符串的扩展!
本文地址: https://arbays.com/post-62.html  本文已被百度收录!
版权声明:若无注明,本文皆为“富录-前端开发|web技术博客”原创,转载请保留文章出处。