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,代码如下:

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

解构参数的默认值

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

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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