avaScript ES6值得掌握的五大功能（4）JavaScript解构

2024-11-11 技术教程

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

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的对象。

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

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请求的值：

五

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'

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。