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

時間 2020-01-11

標籤 avascript es6 值得掌握五大功能 javascript 解構欄目 JavaScript 简体版

原文原文鏈接

在Arrow Functions旁邊，這是我天天使用最多的ES6功能。ES6 Destructuring不是一個新功能，而是一種新的賦值語法，它容許您快速從對象屬性和數組中解壓縮值並將它們分配給單個變量。es6

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

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

console.log(name) // "George"url

console.log(hobby) // "Tennis"對象

這裏我用解構快速提取name和 hobby該屬性profile的對象。ip

使用別名，您能夠使用不一樣的變量名稱與相應的對象屬性相比，您從如下位置提取值：it

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

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

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'

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。