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 相关文章推荐
js写的评论分页(还不错)
Dec 23 Javascript
JS中的构造函数详细解析
Mar 10 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
Mar 14 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
五种js判断是否为整数类型方式
Dec 03 Javascript
Bootstrap3制作自己的导航栏
May 12 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
jQuery简单倒计时效果完整示例
Sep 20 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
微信小程序实现多选框全选与取消全选功能示例
May 14 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
一个ftp类(ini.php)
2006/10/09 PHP
php 生成饼图 三维饼图
2009/09/28 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
javascript encodeURI和encodeURIComponent的比较
2010/04/03 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
JS及PHP代码编写八大排序算法
2016/07/12 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
判断iOS、Android以及PC端的示例代码
2018/11/15 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
2020/07/23 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[19:15]DK战队纪录片
2014/09/02 DOTA
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
python新手学习使用库
2020/06/11 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
本科生职业生涯规划书范文
2014/01/21 职场文书
学习标兵获奖感言
2014/02/20 职场文书
喝酒检查书范文
2014/02/23 职场文书
村干部培训方案
2014/05/02 职场文书
师德师风演讲稿
2014/05/05 职场文书
CSS中使用grid布局实现一套模板多种布局
2022/07/15 HTML / CSS
TS 类型收窄教程示例详解
2022/09/23 Javascript