第五节:一个令人兴奋的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的其他新知识,就放在在后面的教程再展开讲解。
本节总结
总结:解构赋值给我们一种新的变量赋值方式,主要可以利用数组解构赋值和对象解构赋值。它的用途包括:交换变量值,提取函数返回值,函数参数定义,默认值设定等等,都给我们编程带来便利,在未来的代码中会见到越来越多人使用这个新特性。
第五节:一个令人兴奋的ES6新特性:解构赋值相关推荐
- ES6新语法--解构赋值
对象解构赋值 ※很重要 /*** 对象解构赋值:获取元素中属性的值,然后赋值给变量*///声明一个对象 let obj = {name:'chen',age:38,gender:'man',score ...
- ES6变量的解构赋值--对象篇
目录 使用方式 普通形式 嵌套结构 使用默认值 注意事项 上一篇我们讲解了数组的解构赋值,解构还可以用于对象.字符串等等,这里我们来讲解对象的解构赋值. ES6变量的解构赋值--数组_zxn20012 ...
- (34)2021-02-24(ES6变量的解构赋值)
ES6变量的解构赋值 一. 变量的解构赋值 1.什么是解构 2.数组解构赋值 不完全解构 3.对象解构赋值 方法解构 注意点 4.字符串解构 5.函数参数的解构赋值 6.用途 6.1 交换变量的值 6 ...
- Vue学习笔记(三)Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录 一.参考资料 二.运行环境 三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名 四.GitHu ...
- 【ES6(2015)】解构赋值Desctructuring
文章目录 1. 数组解构赋值 2. 对象解构赋值 3. 字符串解构赋值 在 ES6 中新增了变量赋值的方式:解构赋值.允许按照一定模式,从数组和对象中提取值,对变量进行赋值.如果对这个概念不了解,我们 ...
- ES6 数组的解构赋值
数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a = 1; let b = ...
- ES6——变量的解构赋值
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. let [a, b] = [1, 2]; let {c, d} = {c: 3, d: 4};console.log(a ...
- 阮一峰 / ES6 数组的解构赋值
目录 一.定义 二.详情讲解 1.数组解构:数组解构时数组的元素是按次序排列的,变量的取值由它的位置决定 2.对象解构:对象解构时对象的属性没有次序,变量必须与属性同名,才能取到正确的值. 三.用途 ...
- ES6数组的解构赋值( 中)
数组的解构赋值的用法有以下几情况要注意: 1.结构赋值可以嵌套的 数组的解构赋值的用法有以下几情况要注意:1.结构赋值可以嵌套的 var [ a,b,[ c1,c2 ] ] = [ 1,2,[ 3.1 ...
最新文章
- Freetype library not found问题解决
- 20个数据库设计的最佳实践
- linux c++ 调用matlab,ubuntu系统下C++调用matlab程序的方法详解
- 2.5w字长文爆肝 C++动态内存与智能指针一篇搞懂!太顶了!!!
- SpringMVC的上传和下载
- 案例:按照JSP Model2思想实现用户注册功能
- java重定向post_java实现响应重定向发送post请求操作示例
- 微信开发 调用摄像机拍照(录像)功能
- 准备系统地学习一下Python
- CMU 15-213 Introduction to Computer Systems学习笔记(18) Dynamic Memory Allocation: Basic Concepts
- 基于51单片机的自动电梯控制模拟系统设计
- Unity自定义Script模板
- 第十一届“蓝狐网络杯”湖南省大学生计算机程序设计竞赛 B - 大还是小? 字符串水题...
- Python爬虫实战(一) QQ音乐评论爬取及可视化分析
- 用MATLAB绘图 等边三角形,信标节点位于等边三角形顶点的MATLAB仿真
- Centos 安装 mysql5.7 示例教程
- Control Egress TCP Traffic
- Vue-router:二级路由跳转另一条路由下的子级
- 一篇文章带你更好了解热门Java开发工具IDEA!
- 行泊一体方案「换道超车」,TOP10本土供应商领跑新赛道
热门文章
- NETGEAR拒绝连接请求_破案:Kubernetes/Docker 上无法解释的连接超时
- 2015年《大数据》高被引论文Top10文章No.3——我国政府数据开放现状和保障机制...
- 作者:杨晋吉(1968-),男,华南师范大学计算机学院教授。赵淦森(1977-),男,博士,华南师范大学计算机学院教授、副院长。...
- 【Python】处理 pydotplus.graphviz.InvocationException: GraphViz’s executables not found
- 【OJ】洛谷试炼场の新手村整合(Java语言描述)
- 坑爹的Java除法取整(记洛谷P5709题WA的经历,Java语言描述)
- linux下Mariadb的二进制安装
- 之前是围棋下不过机器人,这回连打字也不行
- UIActivityViewController实现系统原生分享
- 学习Javascript的书籍(转)