前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >es6(二):解构赋值

es6(二):解构赋值

作者头像
用户1149564
发布2018-01-11 17:42:56
5610
发布2018-01-11 17:42:56
举报
文章被收录于专栏:Micro_awake webMicro_awake web

ES中允许按照一定格式从数组,对象值提取值对变量进行赋值,这就是解构(Destructuring)

代码语言:javascript
复制
1 let [a,b,c]=[1,10,100]
2     console.log(a,b,c)//1 10 100
3     //等式两边"模式"进行匹配,从而进行赋值
4     let [i,[[[j]],k]]=[1,[[[2]],3]]//这种看看就好,知道这样也可以执行就行
5     console.log(i,j,k)//1 2 3
6     
7     let [,,x]=[1,2,3]
8     console.log(x)//3

解构不成功,相应的变量为undefined

代码语言:javascript
复制
1 let [i1,i2]=[]
2     console.log(i1,i2)//undefined undefined
3     let [i3,i4]=[10]
4     console.log(i3,i4)//10 undefined

部分解构成功

代码语言:javascript
复制
1 let [i5,i6]=[1,2,3]
2     console.log(i5,i6)//1 2

等式右边不是可遍历的结构,那么将报错

代码语言:javascript
复制
1 let [i7,i8]=1 //1 is not iterable
2 let [i9] =true//true is not iterable

解构赋值允许指定默认值

代码语言:javascript
复制
1 let [i10,i11='hi']=[100]
2     console.log(i10,i11)//100 'hi'

注意这种情况

代码语言:javascript
复制
1 // let [i111=i12,i12=10]=[]//报错,i111=i12 此时i12还未申明
2     // 而:
3     let [i13=i14,i14]=[1,2]
4     console.log(i13,i14)

对象的解构赋值

代码语言:javascript
复制
 1 let {foo,bar}={foo:'name',bar:'age'}
 2     console.log(foo,bar)
 3     //但其实上面解构赋值是下面的缩写
 4     let {foo1:foo1,bar1:bar1}={foo1:'name',bar1:'age'}
 5     console.log(foo1,bar1)
 6     // 如果继续变换
 7     let {foo2:name,bar2:age}={foo2:'name',bar2:'age'}
 8     // console.log(foo2,bar2)//报错
 9     console.log(name,age)//正确写法
10     // 即foo2是模式,name才是赋值的变量

运行结果:

解构赋值的几大应用:

1.交换变量

代码语言:javascript
复制
1 let a10=10,b100=100;
2     [a10,b100]=[b100,a10]
3     console.log(a10,b100)//100 10

2.函数返回中取出多个值

代码语言:javascript
复制
 1 function test10(){
 2       return [1,2,3]
 3     }
 4     function test100(){
 5       return {
 6         nameT:'apple',
 7         ageT:100
 8       }
 9     }
10     let [j1,j2,j3]=test10()
11     console.log(j1,j2,j3)//1 2 3 
12     let {nameT,ageT}=test100()
13     console.log(nameT,ageT) //'apple' 100

3.提取JSON数据

代码语言:javascript
复制
1 function getJSON(){
2       return {
3         "app1":100,
4         "blue":"hello blue",
5         "data": 110
6       }
7     }
8     let {app1,blue,data:number}=getJSON()
9     console.log(app1,blue,number)//100 "hello blue" 110

参考阮一峰ECMASCript入门

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-12-21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档