ES6学习-5.解构:使数据访问更便捷

一、对象解构

1、对象解构

例如以下代码:直接将对象node解析成type和name变量。

2、解析赋值

例如以下代码:本身已经声明了type和name两个变量并初始化,然后将node对象直接赋值给这两个变量,type和name的值就改变了。

3、默认值

在解构的过程中,如果局部变量名称不存在,那么这个变量就会被赋值成undefined,代码如下:value这个值在node对象中不存在,所以输出是undefinded。

然而我们可以给他一个默认值,代码如下:value给了一个默认值true,node对象没有value这个属性,所以value就使用了默认值true。

4、为非同名局部变量赋值

上面的示例都是解构成了对象中相应的属性名相同的变量名,如果要使用不同的变量名,如下面代码:node对象就解构成了localType和localName两个变量。

5、嵌套对象解构

解析复杂的对象,直接看下面的代码:下面的代码直接找的就是node.loc.start的值,要找到某个对象中的一个节点,就要用“{属性名}”去查找。

二、数组解构

1、数组解构

看以下代码:这样就可以不用下标去取值,然后赋值给变量。

2、解构赋值

这个操作和对象解构差不多,只是不需要小括号,看以下代码:变量firstColor和secondColor就变成数组中的第一个值和第二个值。

3、交换两个变量的值

在排序算法中,我们经常会将数组中的两个数进行交换,以前的做法是定义一个tmp,然后进行交换,而解构可以很方便的进行交换,看以下代码:

4、默认值

和对象解构一样,如果没有想应的值,那么变量则会被定义成undefined。看如下代码:

5、嵌套数组解构

和对象解构相似,插入一个数组模型,就可以解构下一层次,看以下代码:

6、不定元素

可以通过"..."将多个元素赋值给一个变量,看以下代码:

使用这个不定元素的方法,我们就可以用来复制一个数组,看以下代码:

三、混合解构

看以下代码:就是将对象解析和数组解析合并使用。

四、解构参数

当定义一个方法的时候,需要传入一个对象作为一个参数,例如以下的方法:

对于使用这个方法的人来说,他并不知道options到底要什么样的对象属性,必须要走到源代码看到了,才能知道,所以这个时候就用解构参数来替换这个options,代码如下:

这样对于使用这个方法的人来说,他就知道第三个参数是要传一个对象,这个对象具体有哪些属性也就一目了然。

解构参数的默认值

对于解构参数,如果要有默认值,可以使用以下代码:

这样第三个参数对象,即使使用者不传入相应的对象值,那么方法也可以使用默认的值。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,951评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,606评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,601评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,478评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,565评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,587评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,590评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,337评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,785评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,096评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,273评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,935评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,578评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,199评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,440评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,163评论 2 366
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,133评论 2 352

推荐阅读更多精彩内容

  • 前面的话   我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段。在ES6中添加了可以简化这种任务的新...
    CodeMT阅读 512评论 0 0
  • 前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段。在ES6中添加了可以简化这种任务的新特性...
    sunnyghx阅读 754评论 0 0
  • 引入 在ES5中,开发者们为了从对象和数组中获取特定数据并赋值给变量,编写了许多看起来同质化的代码 这段代码从op...
    nengzhuan_zhang阅读 624评论 0 0
  • Tips:对象解构、数组解构 解构是一种打破数据解构,将其拆分为更小部分的过程。 为何使用解构功能 在 ES5 之...
    独木舟的木阅读 233评论 0 0
  • 原创文章&经验总结&从校招到A厂一路阳光一路沧桑 详情请戳www.codercc.com 主要知识点:对象解构、数...
    你听___阅读 790评论 0 1