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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
五段实用的js高级技巧
Dec 20 Javascript
javascript 实现map集合
Apr 03 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
Mar 15 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
浅谈Webpack多页应用HMR卡住问题
Apr 24 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 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
PHP5中虚函数的实现方法分享
2011/04/20 PHP
php判断linux下程序问题实例
2015/07/09 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
document.getElementById的简写方式(获取id对象的简略写法)
2010/09/10 Javascript
鼠标事件延时切换插件
2011/03/12 Javascript
JavaScript词法作用域与调用对象深入理解
2012/11/29 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
jquery及原生js获取select下拉框选中的值示例
2013/10/25 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
js 将canvas生成图片保存,或直接保存一张图片的实现方法
2018/01/02 Javascript
深入理解JS的事件绑定、事件流模型
2018/05/13 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
python输入整条数据分割存入数组的方法
2018/11/13 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
浅谈CSS3特性查询(Feature Query: @supports)功能简介
2017/07/31 HTML / CSS
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
转预备党员政审材料
2014/02/06 职场文书
企业新年寄语
2014/04/04 职场文书
班级学习雷锋活动总结
2014/07/04 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
二手车交易协议书标准版
2014/11/16 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书