ECMAScript6--解构


Posted in Javascript onMarch 30, 2017

大致介绍

解构:就是将声明的一组变量和与相同结构的数组或者对象的元素数值一一对应,并将变量相对应元素进行赋值

数组解构

例子:

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

可以看到,数组中的a,b,c分别对应1,2,3

嵌套的数组也可以进行解构

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

 let [d,,e] = [1,2,3];
 console.log(e); //3

 let [f,...tail] = [1,2,3];
 console.log(tail); //[2, 3]

在解构不成功时,变量的值就是undefined

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

不完全解构也是可以的

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

也可以设置默认值

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

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

 let [c = 1] = [undefined];
 console.log(c); //1

 let [d = 1] = [null];
 console.log(d); //null

注意:在ES6中使用严格相等运算符(===)。所以如果默认值不严格相等undefined,默认值就不会生效。例如null

默认值也可以是表达式,但是要注意只有默认值在使用时才会触发函数(惰性求值)

function f(){
  alert(1);
 }
 let [a = f()] = [3]; //f()不会执行
 let [b = f()] = [undefined]; //会执行

对象解构

例子:

let {foo,bar} = {foo:1,bar:2};
 console.log(foo); //1

注意:与数组不同,对象解构时不是根据位置对变量赋值的,而是通过变量名进行赋值,即变量名和属性名必须相等才可以进行赋值,位置不重要

let {bar,foo} = {foo:1,bar:2};
 console.log(foo);//1

如果变量名和属性名不相同,则要采取下面的方法

let {first: f,last: l} = {first:1,last:3};
 console.log(l); //3

意思就是先在对象中查找first属性,如果有就赋值给f,其中first是匹配的模式,而f才是真正的变量

所以对象解构的完整形式是:

let {first: first,last: last} = {first:1,last:3}; 

对象解构也可以进行嵌套

let obj = {
  a:1,
  b:[
   'hello',
   {c:'world'}
  ]
 }
 let {a: a,b: [h,{c:w}]} = obj;
 console.log(a); //1
 console.log(h); //hello
 console.log(w); //world

对象解构也可以设置默认值,并且如果解构失败,变量会赋值undefined

let {x: x = 1,y: y=2,z: z=3,w: w} = {x:3,y:null,z:undefined};
 console.log(x) //3
 console.log(y) //null
 console.log(z) //3
 console.log(w) //undefined

字符串解构

字符串之所以能够解构是因为此时字符串转换成了一个数组

let [a,b,c] = 'hello';
 console.log(a); //h
 console.log(b); //e
 console.log(c); //l

数值和布尔值解构

解构赋值时,如果等号右边是数值和布尔值,则会先转为对象

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: a} = true;
a === Boolean.prototype.toString // true

上面代码中,数值和布尔值的包装对象都有tostring属性,因此变量s都能取到值。

解构赋值的规则是,只要等号右边的值不是对象或数组,就先将其转为对象。由于null和undefined无法转为对象,所以对它们进行解构赋值,都会报错。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
javascript中的location用法简单介绍
Mar 07 Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
js switch case default 的用法示例介绍
Oct 23 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
JavaScript体验异步更好的解决办法
Jan 08 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 Javascript
利用js-cookie实现前端设置缓存数据定时失效
Jun 18 Javascript
element ui分页多选,翻页记忆的实例
Sep 03 Javascript
js图片放大镜效果实现方法详解
Oct 28 #Javascript
js a标签点击事件
Mar 30 #Javascript
JS+html5制作简单音乐播放器
Sep 13 #Javascript
TypeScript入门-接口
Mar 30 #Javascript
如何编写jquery插件
Mar 29 #jQuery
基于JavaScript实现瀑布流效果
Mar 29 #Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 #Javascript
You might like
模拟xcopy的函数
2006/10/09 PHP
PHP个人网站架设连环讲(三)
2006/10/09 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
PHP针对JSON操作实例分析
2015/01/12 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
实例分析10个PHP常见安全问题
2019/07/09 PHP
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
JavaScript实现的使用键盘控制人物走动实例
2014/08/27 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
JavaScript中Date.toSource()方法的使用教程
2015/06/12 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
jQuery实现的上传图片本地预览效果简单示例
2018/03/29 jQuery
了解JavaScript函数中的默认参数
2019/05/30 Javascript
vue表单数据交互提交演示教程
2019/11/13 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
Javascript Web Worker使用过程解析
2020/03/16 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
Python标准库06之子进程 (subprocess包) 详解
2016/12/07 Python
python和shell获取文本内容的方法
2018/06/05 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
如何利用Python分析出微信朋友男女统计图
2019/01/25 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
什么是表空间(tablespace)和系统表空间(System tablespace)
2013/02/25 面试题
文化建设工作方案
2014/05/12 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
2014年银行员工工作总结
2014/11/12 职场文书
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python