avaScriptES6值得掌握的五大功能(4)JavaScript解构

在Arrow Functions旁边,这是我每天使用最多的ES6功能。ES6 Destructuring不是一个新功能,而是一种新的赋值语法,它允许您快速从对象属性和数组中解压缩值并将它们分配给单个变量。

成都创新互联公司于2013年成立,是专业互联网技术服务公司,拥有项目网站设计、成都网站设计网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元麻城做网站,已为上家服务,为麻城各地企业和个人服务,联系电话:028-86922220

1

2

3

4

var profile = {name: 'George' , age:39, hobby: 'Tennis' }

var {name, hobby} = profile // destructure profile object

console.log(name) // "George"

console.log(hobby) // "Tennis"

这里我用解构快速提取 name 和  hobby 该属性 profile 的对象。

使用别名,您可以使用不同的变量名称与相应的对象属性相比,您从以下位置提取值:

1

2

3

4

var profile = {name: 'George' , age:39, hobby: 'Tennis' }

var {name:n, hobby:h} = profile // destructure profile object

console.log(n) // "George"

console.log(h) // "Tennis"

嵌套对象解构

解构也适用于嵌套对象,我总是使用它来快速解决来自复杂JSON请求的值:

1

2

3

4

6

7

8

9

10

11

12

13

14

15

16

var jsondata = {

     title: 'Top 5 JavaScript ES6 Features' ,

     Details: {

         date: {

             created: '2017/09/19' ,

             modified: '2017/09/20' ,

         },

         Category: 'JavaScript' ,

     },

     url: '/top-5-es6-features/'

};

var {title, Details: {date: {created, modified}}} = jsondata

console.log(title) // 'Top 5 JavaScript ES6 Features'

console.log(created) // '2017/09/19'

console.log(modified) // '2017/09/20'


本文标题:avaScriptES6值得掌握的五大功能(4)JavaScript解构
转载注明:http://csruizhi.cn/article/gighjg.html

其他资讯

Copyright © 2007-2024 成都优众联杰科技有限公司 All Rights Reserved 蜀ICP备2024116266号
友情链接: 成都网站建设 上市集团网站建设 网站建设公司 成都定制网站建设 成都网站制作 营销网站建设 成都网站制作 成都网站设计制作公司 成都商城网站制作 LED网站设计方案 手机网站建设套餐 响应式网站设计方案 成都企业网站建设 手机网站制作设计 网站建设公司 定制网站设计 重庆网站建设 高端网站建设 定制网站建设多少钱 营销型网站建设 手机网站制作 定制网站制作