avaScript ES6值得掌握的五大功能（4）JavaScript解構(gòu)

發(fā)布時(shí)間：2020-08-09 13:18:22 來源：ITPUB博客閱讀：148 作者：cenfeng 欄目：web開發(fā)

在Arrow Functions旁邊，這是我每天使用最多的ES6功能。ES6 Destructuring不是一個(gè)新功能，而是一種新的賦值語法，它允許您快速從對(duì)象屬性和數(shù)組中解壓縮值并將它們分配給單個(gè)變量。

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

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

console.log(name) // "George"

console.log(hobby) // "Tennis"

這里我用解構(gòu)快速提取 name 和 hobby 該屬性 profile 的對(duì)象。

使用別名，您可以使用不同的變量名稱與相應(yīng)的對(duì)象屬性相比，您從以下位置提取值：

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"

解構(gòu)也適用于嵌套對(duì)象，我總是使用它來快速解決來自復(fù)雜JSON請(qǐng)求的值：

五

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'

向AI問一下細(xì)節(jié)

猜你喜歡