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 相关文章推荐
20个最新的jQuery插件
Jan 13 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
node.js集成百度UE编辑器
Feb 05 Javascript
jquery滚动特效集锦
Jun 03 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
深入了解Vue.js 混入(mixins)
Jul 23 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
一些php技巧与注意事项分析
2011/02/03 PHP
php引用地址改变变量值的问题
2012/03/23 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
js实现密码强度检测【附示例】
2016/03/30 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
js实现倒计时效果(小于10补零)
2017/03/08 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
彻底理解js面向对象之继承
2018/02/04 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
vue component 中引入less文件报错 Module build failed
2019/04/17 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
原生js+css调节音量滑块
2020/01/15 Javascript
[28:57]EG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/16 DOTA
仅利用30行Python代码来展示X算法
2015/04/01 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
详解Python解决抓取内容乱码问题(decode和encode解码)
2019/03/29 Python
Python中使用__new__实现单例模式并解析
2019/06/25 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Python应用实现双指数函数及拟合代码实例
2020/06/19 Python
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
酒店员工检讨书
2014/02/18 职场文书
竞选班干部演讲稿500字
2014/08/20 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
Go语言测试库testify使用学习
2022/07/23 Golang