在Arrow Functions旁边,这是我每天使用最多的ES6功能。ES6 Destructuring不是一个新功能,而是一种新的赋值语法,它允许您快速从对象属性和数组中解压缩值并将它们分配给单个变量。
1 2 3 4 | var profile = {name: 'George' , age:39, hobby: 'Tennis' }<font></font>
var {name, hobby} = profile // destructure profile object<font></font>
console.log(name) // "George"<font></font>
console.log(hobby) // "Tennis"
|
这里我用解构快速提取name
和 hobby
该属性profile
的对象。
使用别名,您可以使用不同的变量名称与相应的对象属性相比,您从以下位置提取值:
1 2 3 4 | var profile = {name: 'George' , age:39, hobby: 'Tennis' }<font></font>
var {name:n, hobby:h} = profile // destructure profile object<font></font>
console.log(n) // "George"<font></font>
console.log(h) // "Tennis"
|
嵌套对象解构
解构也适用于嵌套对象,我总是使用它来快速解决来自复杂JSON请求的值:
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 | var jsondata = {<font></font>
title: 'Top 5 JavaScript ES6 Features' ,<font></font>
Details: {<font></font>
date: {<font></font>
created: '2017/09/19' ,<font></font>
modified: '2017/09/20' ,<font></font>
},<font></font>
Category: 'JavaScript' ,<font></font>
},<font></font>
url: '/top-5-es6-features/' <font></font>
};<font></font>
<font></font>
var {title, Details: {date: {created, modified}}} = jsondata<font></font>
console.log(title) // 'Top 5 JavaScript ES6 Features'<font></font>
console.log(created) // '2017/09/19'<font></font>
console.log(modified) // '2017/09/20'
|
免责声明:
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341