2018-06-08深入浅出ES6(解构赋值)

当我们定义多个变量的时候还要一个一个去命名的和赋值,很麻烦。用结构赋值那么就是:

let [a,b,c] = [1,2,3];
console.log(a,b,c); //1,2,3

他会默认的吧右边赋的值都解出来分配给左边的变量,一一对应进行赋值

结构赋值的意思就是说两侧的结构和格式都必须一模一样

let [a,b,c] = [1,[2,3]];
console.log(a,b,c); //1 [2,3] undefined

两侧不一致就会导致想上面这样的结果 ,解决方式就是:

let [a,[b,c]] = [1,[2,3]];
console.log(a,b,c); //1 2 3

数组还有一种玩法就是:

let [a,b,c='暂无数据'] = [1,2];
console.log(a,b,c); //1 2 暂无数据

方然上面这两种方法用处不大,但是在交换两个变量的值得时候,正常是还得找第三个变量打配合就行转换,现在不需要了:

let a = 1;
let b = 2;
[a,b] = [b,a];
console.log(a,b); //2 1

以上者是数组的结构赋值,下面看一下json的解构赋值是怎样的:

let {name,age,gender} = {
  name: 'Cyril',
  age: 25,
  gender: 'male'
}

解构赋值一般用在和后台进行数据交互的时候,后台数据大多都是json形式的传递的,数据多的时候都是json嵌套json,以至于有很多,这是就可以用解构赋值全部都解出来就可以了

let json = {
  name: 'Cyril',
  age: 25,
  gender: 'male'
}
let {name,age,gender} = json;
console.log(name,age,gender); // Cyril 25 male

第二种写法:

let json = {
  name: 'Cyril',
  age: 25,
  gender: 'male'
}
let {name:a,age:b,gender:c} = json;
console.log(a,b,c); // Cyril 25 male

注意:如果给变量起了名字之后,下面调用时候里面的参数还是写以前的名字,name就会报错is not defined

解构赋值的小应用

function getPos(){
  return {
    l:10,
    t:20
  }
}
let {l,t} = getPos();
console.log(l,t); //10 20 

当然解构赋值也可以作为参数进行传递,用法都是一样的,保持一一对应即可。给大家插入一个小tip(提示).

function show(a,b,c){
  console.log(a,b,c); //1 2 3
}
show(1,2,3,);

仔细看会发现在我们传值的时候,多传了一个逗号,但是数据依然能够显示出来,这个看似没用,但是在与后台交互的时候,往往会因为多了个逗号而导致程序报错;微信小程序,里面有一个配置文件app.json,是用来配置整个小程序所有的页面的,当我们想把另一个作为首页访问的话,还要特意去删除掉那个多余的逗号。


GitHub个人主页 :https://github.com/Cyrildog

如果一件事情你不能拒绝,就学会去享受它!

你活得有多精彩,你赢的可能就有多高!

ByeBye

image

推荐阅读更多精彩内容

  • ☞☞ 个人主页欢迎访问 ☜☜ 大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了let和c...
    苏日俪格阅读 1,600评论 0 1
  • 前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段。在ES6中添加了可以简化这种任务的新特性...
    sunnyghx阅读 613评论 0 0
  • 亲爱的葳葳: 这是妈妈写给你的第二封情书。今天写的时候,心头涌起2个字"温暖"! 前两天你发烧了,晚上一直要喝水上...
    毕丹丹阅读 72评论 0 2
  • 这两天我二姐结婚办酒席,一些亲戚都过来了,还是挺热闹的。我家里有几张麻将桌,位置也好,一整天都有太阳晒着...
    天空蓝上阅读 74评论 0 0
  • 第一章:你要去往何方? 在我们打算行动时,首先要知道的就是我们想要什么。如果没有一个明确的目标,那么我们可能只会白...
    冰海寒星0816阅读 3,734评论 0 4
  • 今天周五买菜做饭啦,时间有点赶画了简笔画~o(〃''〃)o 画好辅助线真的很重要呢 看圈子里的小伙伴都画的很好,我...
    panda每天变好一点点阅读 158评论 1 6