一个令人兴奋的ES6星特性-结构赋值
学完了前4节,今天我给大家带来的是一个令人兴奋的特性:解构赋值。这个章节代码片段有点偏多,不过可以放心,一点都不烧脑,还是老样子:简单易懂。
什么是解构赋值
按照一贯的套路,接下来的内容是解释:什么是解构赋值?
来看看官方的解释:
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。
这句话也不难理解, 来,我们来上一段代码进一步解释一下什么叫解构赋值。
关于给变量赋值,传统的变量赋值是这样的:
var *arr* = [1,2,3];//把数组的值分别赋给下面的变量;
var *a* = *arr*[0];
var *b* = *arr*[1];
var *c* = *arr*[2];
*console*.log(*a*);//a的值为1
*console*.log(*b*);//b的值为2
*console*.log(*c*);//c的值为3
将数组的元素值1,2,3分别赋值给变量a,b,c,结果也是如我们所愿,赋值成功,这是一种传统的赋值方式。
我们今天要介绍解构赋值会是怎样的?一起往下看。
变量的解构赋值:
var [*a*,*b*,*c*] = [1,2,3]; //把数组的值分别赋给下面的变量;
*console*.log(*a*);//a的值为1
*console*.log(*b*);//b的值为2
*console*.log(*c*);//c的值为3
注意到了吗?赋值的代码大大减少了,不需要分别把变量a,b,c分别声明定义和赋值,只需要将变量a,b,c作为一个数组的元素,然后将数组[1,2,3]赋值给数组[a,b,c]即可,变量a,b,c即可分别得到对应的值。
看吧,代码是不是简短了很多,可读性也很强,这种叫做数组的解构赋值。
数组的解构赋值
数组的解构赋值的用法有以下几情况要注意:
1、结构赋值可以嵌套的
var [ *a*,*b*,[ *c1*,*c2* ] ] = [ 1,2,[ 3.1,3.2 ] ];
*console*.log(*c1*);//结果:c1的值为3.1
*console*.log(*c2*);//结果:c2的值为3.2
如我们的预料,数组中即使再嵌套另一个数组,结构赋值也能为我们的变量准确的赋值,c1和c2的值分别为3.1 , 3.2,也就是赋值成功。
2、不完全解构
var [*a*,*b*,*c*] = [1,2];
*console*.log(*a*);//结果:a的值为1
*console*.log(*b*);//结果:b的值为2
当左边的模式(你可以理解为格式)与右边不完全一样的时候,那么赋值过程中,只会给模式匹配成功的部分的变量赋值,例如:变量c没有在右边找到匹配的模式,所以无法进行赋值,但这并不影响变量a和变量b的赋值,因为它们在右边找到与之匹配的模式,这种叫做不完全解构。
3. 赋值不成功,变量的值为undefined
var [*a*,*b*,*c*] = [1,2];
*console*.log(*a*);//结果:a的值为1
*console*.log(*b*);//结果:b的值为2
*console*.log(*c*);//结果:c的值为undefined
还是接着上面的不完全解构例子讲解,变量a和变量b为不完全解构,那么变量c解构不成功会怎么样呢?记住,解构不成功,变量的值就等于undefined。相当于只声明了变量c,但是没赋值。
4. 允许设定默认值
var [*a*,*b*,*c*=3] = [1,2];
*console*.log(*a*);//结果:a的值为1
*console*.log(*b*);//结果:b的值为2
*console*.log(*c*);//结果:c的值为3
例子中变量c已经指定默认值为3,即使右侧没有与之对应的值赋给它也没关系,它都可以成功赋值为3,如果你想覆盖默认值3,只需赋一个有效的值即可。如下:
var [*a*,*b*,*c*=3] =[1,2,4];
*console*.log(*a*);//结果:a的值为1
*console*.log(*b*);//结果:b的值为2
*console*.log(*c*);//结果:c的值为4
这个时候默认值3会被新的值4覆盖,c的值为4;注意:当新的值为undefined的时候,是不会覆盖默认值的。
以上是数组的解构赋值,除了利用数组可以解构赋值外,用JSON对象也可以
对象的解构赋值
对象的解构赋值跟数组的解构赋值很类似,我们来看一段小代码:
var { *a*,*b*,*c*} = {"a":1,"b":2,"c":3};
*console*.log(*a*);//结果:a的值为1
*console*.log(*b*);//结果:b的值为2
*console*.log(*c*);//结果:c的值为3
这段例子的代码是不是跟数组的解构赋值很相似,只不过是数组换成了对象。但是两者有一个不同的地方,我们对上面的代码稍做修改:
var { *a*,*b*,*c* } = {"a":1,"c":3,"b":2};
*console*.log(*a*);//结果:a的值为1
*console*.log(*b*);//结果:b的值为2
*console*.log(*c*);//结果:c的值为3
我把右侧的对象属性b和属性c的位置进行了调换,但这并不会影响赋值的结果,变量b和变量c的值不会改变,依然是b为2,c为3。这就告诉我们对象的解构赋值不会受到属性的排列次序影响(数组则会受影响),它是跟属性名关联起来的,变量名要和属性名一致,才会成功赋值。
如果变量找不到与其名字相同的属性,就会赋值不成功,如下面的例子:
var { *a* } = {"b":2};
*console*.log(*a*);//结果:a的值为undefined
变量a在右侧找不到与之名字匹配的属性a,所以变量a赋值不成功,a的值为undefined。
但也不是完全没有办法补救的,如果你想给一个变量名与属性名不一样的变量解构赋值,可以这样写:
var { b:*a*,} = {"b":2};
*console*.log(*a*);//结果:a的值为2
这样变量a同样可以赋值成功,a的值最终为2。
对象的解构赋值的用法与数组的解构赋值也很类似:
1、对象解构赋值也可以嵌套
var {a:{*b*}} = {"a":{"b":1}};
*console*.log(*b*);//结果:b的值为1
2、可以指定默认值
var {*a*,*b*=2} = {"a":1};
*console*.log(*b*);//结果:b的值为默认值2
字符串的解构赋值
除了对象和数组可以解构赋值外,字符串也可以这么玩,看看下面的例子:
var [*a*,*b*,*c*,*d*,*e*,*f*] = "我就是前端君";
*console*.log(*a*);//我
*console*.log(*b*);//就
*console*.log(*c*);//是
*console*.log(*d*);//前
*console*.log(*e*);//端
*console*.log(*f*);//君
这是因为在解构赋值的过程中,字符串被转换成了一个类似数组的对象。变量a,b,c,d,e,f都分别赋上了对应的值。
解构赋值的用途
介绍了这么多解构赋值的用法,最重要的还是要介绍它的用途。
一、交换变量的值
传统做法最常用的是引入第三个变量来临时存放,如下:
var *x* = 1;
var *y* = 2;
var *z* = *x*;//第三个变量临时存放x的值
*x* = *y*; //把y的值赋给x;
*y* = *z*; //把z的值赋值给y;
*console*.log(*x*); //结果:x为2
*console*.log(*y*); //结果:y为1
但是有了解构赋值,想交换两个变量的值就简单多了。看下面的代码:
var *x* = 1;
var *y* = 2;
[*x*,*y*] = [*y*,*x*];
简单的一句代码即可成功交换x,y的值。
二、提取函数返回的多个值
函数只能返回一个值,我们可以将多个值装在一个数组或者对象中,再用解构赋值快速提取其中的值。
function *demo*(){
return {"name":"张三","age":21}
}
var {*name*,*age*} = *demo*();
*console*.log(*name*);//结果:张三
*console*.log(*age*);//结果:21
将demo函数的运行结果直接通过结构赋值赋给变量name和age,实现快速的提取对应的值。
三、定义函数参数
function *demo*({*a*,*b*,*c*}){
*console*.log("姓名:"+ *a*);
*console*.log("身高:"+ *b*);
*console*.log("体重:"+ *c*);
}
*demo*({a:"张三",b:"1.72m",c:"50kg",d:"8000"});
通过这种写法, 很方便就能提取JSON对象中想要的参数,例如案例中,我们只需要获取实参中的:a,b,c,而不需要关其他的参数,比如:d或者其他更多的参数。
四、函数参数的默认值
传统的参数默认值的实现方式是,先判断该参数是否为undefined,如果是代表没传,需要手动给它赋一个值,如:
function *demo*(*a*){
var name;
if(*a* === undefined){//判断参数书否是否传值
name= "张三"; //没传,赋默认值
}else{
name= *a*;
}
*console*.log(name);
}
但是有了解构赋值,一切都变得简单很多!看下面的代码:
function *demo*({*name*="张三"}){
*console*.log("姓名:"+*name*);//结果:姓名:张三
}
*demo*({});
上面的代码给我们展示了通过解构赋值设定函数参数的默认值,简洁地代码即可实现。函数调用的时候没有传入对应的name参数,此时name就会使用默认值:“张三”,是不是很简洁很方便....
以上介绍了解构赋值的4个用途,你是不是也感觉到了它给我们带来的方便,它使我们的代码量大大的减少,并且语法十分清晰,增加了代码的可读性和表现力。
除了这些用途以外,解构赋值在其他领域都有很好的应用,因为涉及到ES6的其他新知识,就放在在后面的教程再展开讲解。
本节总结
总结:解构赋值给我们一种新的变量赋值方式,主要可以利用数组解构赋值和对象解构赋值。它的用途包括:交换变量值,提取函数返回值,函数参数定义,默认值设定等等,都给我们编程带来便利,在未来的代码中会见到越来越多人使用这个新特性。
更多前端学习内容文章干货请关注我的专栏(不断更新)
阿里名厂标准web前端高级工程师教程目录大全,从基础到进阶,看完保证您的薪资上升一个台阶
在这里我给大家准备了很多的学习资料
一个令人兴奋的ES6星特性-结构赋值的更多相关文章
- JS ES6的变量的结构赋值
变量的结构赋值用户很多 1.交换变量的值 let x = 1; let y = 2; [x,y] = [y,x] 上面的代码交换变量x和变量y的值,这样的写法不仅简洁,易读,语义非常清晰 2.从函数返 ...
- ES6,变量,函数-参数,结构赋值
变量 var 1.可以重复声明. 无法限制修改-, 没有块级作用域 let不能重复声明,变量-可以修改,块级作const不能重复声明,常量-不能修改,块级作 函数——箭头函数function 名字() ...
- ES6结构赋值
解构赋值 从ES6开始,JavaScript引入了解构赋值,可以同时对一组变量进行赋值. 什么是解构赋值?我们先看看传统的做法,如何把一个数组的元素分别赋值给几个变量: var array = ['h ...
- ES6中的变量结构赋值
小编的上一篇文章更新了es6中关于变量定义的问题,这篇文章继续来一些实用的干货,关于数组.对象的赋值问题.特别是在前后端合作项目的时候,对后端数据的拆分,还有就是对于函数的默认值的惰性赋值问题.看完下 ...
- ES6—— 变量的结构赋值
变量的结构赋值.基本概念: 本质上就是一中匹配模式,只要等号两边的模式相同,那么左边的变量就可以被赋予对应的值: 1.数组的结构赋值. 2.对象的结构赋值. 3.基本类型的结构赋值. let [a,b ...
- ES6解构赋值
前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...
- es6 解构赋值
ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值 ...
- es6 解构赋值 新认知/新习惯
es6 的解构赋值其实很早就学习了,但一直纠结于习惯和可读性问题,所以没有大规模使用.最近被 react调教一番之后.已经完全融入认知和习惯中去了.总结一下三个常用的技巧: 对象取值 取值并重命名 剩 ...
- js对象结构赋值const {XXX } =this
样例1: const { xxx } = this.state; 上面的写法是es6的写法,其实就相当于: const xxx = this.state.xxx 样例2: const {comment ...
随机推荐
- Consul+upsync+Nginx 动态负载均衡
1,动态负载均衡 传统的负载均衡,如果修改了nginx.conf 的配置,必须需要重启nginx 服务,效率不高.动态负载均衡,就是可配置化,动态化的去配置负载均衡. 2,实现方案 1. Consul ...
- Redis调用lua生成验证码
场景: 通过微信公众号拿验证码在APP上绑定,为了防止重复,尝试使用reids-lua的方法实现此功能 以下是 php 调用 redis.eval 方法传入的 lua 方法,当然这只是修改后的,保 ...
- 音视频开发-FFmpeg
音视频开发是个非常复杂的,庞大的开发话题,初涉其中,先看一下结合 OEIP(开源项目) 新增例子. 可以打开flv,mp4类型文件,以及rtmp协议音视频数据,声音的播放使用SDL. 把采集的麦/声卡 ...
- redis 练习
redis-server启动服务 redis-cli 进入redis redis 常用的keys键操作: exists key ---检查key是否存在 del key1 key2 ---删除指定的 ...
- Vue 【前端面试题】
前言 看看面试题,只是为了查漏补缺,看看自己那些方面还不懂.切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈.不然,稍微有水平的面试官一看就能看出,是否有真才实学 ...
- 树莓派中Docker部署.Net Core 3.1 (一)
一.背景 受疫情影响,已经在家强制事假一个月了,除了刷简历外就是在家学习,闲来无事,最近买了几个树莓派4B的板子回来,准备用树莓派搭建个自动部署的平台和微服务示例,长话短说,节约时间,直接进入正题吧 ...
- VirtualBox 安装 Arch Linux 并配置桌面环境
最近无聊,就找来 Arch Linux 来玩一玩,去 archlinux wiki上看了一下教程.以下是操作过程. 1. 下载镜像,下载地址; 2. 启动 Archlinux 并选择 Boot Arc ...
- Light of future-测试总结
目录 1.描述项目的测试工作安排 2.测试工具选择和运用 3.测试用例文档pdf的github链接地址 4.测试体会 5.项目测试评述 发布界面 后台CRUD 归属班级 →2019秋福大软件工程实践Z ...
- springboot-mybatis-oracle学习笔记
前言 最近公司的项目是基于 oracle 数据库的,这里记录下 springboot+mybatis+oracle 的踩坑过程. 开发前准备 环境参数 开发工具:IDEA 基础工具:Maven+JDK ...
- MySQL入门,第四部分,学会创建、删除表
一.列完整性约束 列完整性约束:是指对某一列设置的约束条件.该列上的数据必须满足.最常见的有: NOT NULL 该列值不能为空 NULL 该列值可以为空 UNIQUE 该列值不能存在相同 DEFA ...