当前位置:首页 > 日记 > 正文

ECMAScript6--解构

ECMAScript6--解构

大致介绍

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

数组解构

例子:

 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 // truelet {toString: a} = true;a === Boolean.prototype.toString // true

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

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

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

相关文章

ps怎样合成多张照片

ps怎样合成多张照片

照片,方法,多张,电脑软件,ps,  照片如果感觉太单薄,大家可以使用ps来进行合成。很多刚学习的新手小伙伴可能还不知道,下面是小编带来关于ps怎样合成多张照片的内容,希望可以让大家有所收获!ps合成多张照片的方法一、将一张照片粘贴至另一张…

js css自定义分页效果

js css自定义分页效果

分页,自定义,效果,电脑软件,js,网上看了好多分页插件都不太满意,所以根据网上的一些东西自己做了一个,可以搭配mvc和数据库效果图片先来css(样式不喜欢的话可以不用这个).pagelist {padding:10px 0; text-align:center;}.pagelist span,.pageli…

JavaScript中闭包的详解

JavaScript中闭包的详解

闭包,详解,电脑软件,JavaScript,闭包是什么在 JavaScript 中,闭包是一个让人很难弄懂的概念。ECMAScript 中给闭包的定义是:闭包,指的是词法表示包括不被计算的变量的函数,也就是说,函数可以使用函数之外定义的变量。是不是看完这个定义感觉更加…

ppt怎么实现局部区域的黑底白字效

ppt怎么实现局部区域的黑底白字效

区域,白字,黑底,局部,效果,  ppt怎么实现局部区域的黑底白字效果?PPT制作是信息时代下的产物,ppt具有较好的展示功能,能够形象生动的表达意愿和目的;下面小编来告诉你吧。ppt实现局部区域的黑底白字效果的方法:  ①启动PowerPoint2003,插…

怎么在word中给文章添加脚注在word

怎么在word中给文章添加脚注在word

步骤,方法,脚注,文章,电脑软件,  在日常办公室里,我们写文档的时候有时候要注释脚注,如果是新手的话就摸不着头脑,下面小编就教你怎么在word中给文章添加脚注。word中给文章添加脚注的步骤首先打开word文本word中给文章添加脚注的步骤图1 …

node.js实现的装饰者模式示例

node.js实现的装饰者模式示例

装饰者模式,示例,电脑软件,node,js,本文实例讲述了node.js实现的装饰者模式。分享给大家供大家参考,具体如下:装饰者模式的实现更强调类的组合而不是通过继承。这样可以增强灵活性。在node.js 中,可以通过call函数实现。call函数可以在一个对…

怎么去除wrod的背景色去除wrod的背

怎么去除wrod的背景色去除wrod的背

背景色,方法,背景颜色,教程,步骤,  word的背景色大概有三种,一种是页面背景,不管有没有字,页面都是呈现背景色;还有一种所示突出显示,为了让文字突出,给其添加了背景色;最后一种是字符底纹,就是凡是有字的地方就添加上一个底纹颜色。下面小编就…

Angularjs中的ui-bootstrap的使用

Angularjs中的ui-bootstrap的使用

使用教程,电脑软件,Angularjs,ui,bootstrap,1.新建uiBootstrap.html页面,引入依赖的js和css类库2.新建uiBootstrap.js文件,定义一个uiModule 模块,引入依赖的模块/** * Created by zhong on 2015/9/7. */var uiModule = angular.module("uiMo…

jQuery中的deferred使用方法

jQuery中的deferred使用方法

使用方法,电脑软件,jQuery,deferred,deferred简介deferred对象是jQuery的回调函数解决方案,jQuery之前的版本中异步回调这块做的不是很好,所以后期补上了该解决方案。普遍的ajax操作方式我们先来回顾一下jQuery中普通的ajax操作$.ajax({ url:…

word设置表格表头的方法Word怎样设

word设置表格表头的方法Word怎样设

设置,表头,方法,表格,技巧,  在制作表格时,经常回遇到制作表头的情况,那么应该如何制作表头呢?其实制作标题的方法很简单,接下来小编举例简单的例子告诉大家word设置表格表头的方法,希望能帮到大家。word设置表格表头的方法打开word,如果插入…

qq浏览器默认搜索引擎修改方法

qq浏览器默认搜索引擎修改方法

修改,浏览器,默认,方法,搜索引擎,  QQ浏览器安装后默认的搜索引擎并不是百度,这是因为QQ浏览器与搜狐进行了合作,不过搜狐旗下的搜狗有时候会找不到相关的内容,那么怎么把QQ浏览器的默认引擎换成百度呢?下面就跟小编来了解一下吧!qq浏览器默…

js学习心得_一个简单的动画库封装t

js学习心得_一个简单的动画库封装t

封装,动画,学习心得,简单,电脑软件,具体代码如下:~function(){ var myEffect = { Linear:function(t,b,c,d){ return c*t/d+b }, Quad: {//二次方的缓动(t^2); easeIn: function(t,b,c,d){ return c*(t/=d)*t + b; …