您好,登錄后才能下訂單哦!
本篇文章給大家分享的是有關(guān)JavaScript對(duì)象解構(gòu)的用法是什么,小編覺(jué)得挺實(shí)用的,因此分享給大家學(xué)習(xí),希望大家閱讀完這篇文章后可以有所收獲,話(huà)不多說(shuō),跟著小編一起來(lái)看看吧。
ES6(ES2015)的發(fā)布,給JavaScript 提供了一種更方便快捷的方式來(lái)處理對(duì)象的屬性。該機(jī)制稱(chēng)為Destructuring(也稱(chēng)為解構(gòu)賦值)。但是你真的會(huì)用嗎?你真的了解各種場(chǎng)景下,解構(gòu)賦值的用法嗎?
對(duì)象解構(gòu)最基本的用法是從對(duì)象中檢索屬性鍵的值。
例如,我們定義了一個(gè)對(duì)象,他有兩個(gè)屬性:name和age
const User = { name: '搞前端的半夏', age: 18 }
傳統(tǒng)上,我們將使用點(diǎn) (.) 表示法或下標(biāo) ([]) 表示法從對(duì)象中檢索值。下面的代碼片段顯示了使用點(diǎn)符號(hào)檢索對(duì)象的值id和name從對(duì)象中檢索值的示例。employee
在之前我們想要獲取對(duì)象中某個(gè)屬性的值,通產(chǎn)是使用.或者[]。
const name = User['name']; const age = User.age;
當(dāng)然這兩種方式在當(dāng)前情況下是沒(méi)有問(wèn)題的,但是當(dāng)User的屬性多了,我們就要不停的復(fù)制粘貼,產(chǎn)生很多重復(fù)的代碼。
有了結(jié)構(gòu)賦值,我們就可以快速的來(lái)獲取值。例如我們使用對(duì)象的鍵名來(lái)創(chuàng)建變量,并將對(duì)象的值分配給相同的鍵。這樣無(wú)論有多少屬性,我們只要賦值屬性名即可,同樣的也減少了很多重復(fù)代碼。
const { name, age } = User;
在上面的例子中,User只是一個(gè)簡(jiǎn)單的單層對(duì)象,我們?cè)谌粘5拈_(kāi)發(fā)中也會(huì)遇到嵌套的對(duì)象,,那么使用結(jié)構(gòu)賦值,我們?cè)撊绾螜z索嵌套對(duì)象中的值。下面我們重新定義User對(duì)象,給這個(gè)對(duì)象新增一個(gè)contact屬性,它包含著User的phone。。
const User = { name: '搞前端的半夏', age: '18', contact:{ phone:'110', } }
如果我們用.的當(dāng)時(shí)來(lái)回去phone的值,則需要兩次.
const phone = User.contact.phone;
如果使用解構(gòu)賦值的話(huà):則寫(xiě)法如下:
const {contact:{phone}}=User consosle.log(phone) // 輸出10.
無(wú)論是多少層的嵌套,只要按照這個(gè)寫(xiě)法,一定會(huì)拿到具體的值。
當(dāng)然我們?cè)谌粘i_(kāi)發(fā)的過(guò)程中,可能會(huì)遇到很多極端的情況,
例如后端傳過(guò)來(lái)的對(duì)象,可能會(huì)缺失某些字段
const User = { name: '搞前端的半夏', }
或者屬性沒(méi)有具體的值:
const User = { name: '搞前端的半夏', age: '' }
當(dāng)我們使用解構(gòu)賦值的話(huà):無(wú)論是否存在age屬性的話(huà),都會(huì)創(chuàng)建age變量。
const { name, age } = employee;
當(dāng)User.age沒(méi)有具體值得話(huà),我們則可以使用
const { name, age=18 } = employee;
給age一個(gè)默認(rèn)值。
堅(jiān)持,稍等。解構(gòu)部分有更多的魔力展示!如何創(chuàng)建一個(gè)全新的變量并分配一個(gè)使用對(duì)象屬性值計(jì)算的值?聽(tīng)起來(lái)很復(fù)雜?這是一個(gè)例子,
當(dāng)我們想輸出User屬性的組合值的話(huà),應(yīng)該怎么做呢?
const { name,age,detail = `${name} 今年 ${age} `} = User ; console.log(detail); // 輸出:搞前端的半夏 今年 18
在 JavaScript 對(duì)象解構(gòu)中,您可以為解構(gòu)變量alias命名。減少變量名沖突的機(jī)會(huì)非常方便。
const User = { name: '搞前端的半夏', age: '' }
假設(shè)我們想用解構(gòu)賦值獲取age屬性的值,但是代碼中已經(jīng)又age這個(gè)變量了,我們這個(gè)時(shí)候就需要在結(jié)構(gòu)的時(shí)候定義別名。
const { age: userAge } = User; console.log(userAge); //搞前端的半夏
而如果使用age的話(huà),會(huì)報(bào)錯(cuò)。
console.log(age);
。*
我們經(jīng)常將 API 響應(yīng)數(shù)據(jù)作為 JavaScript 對(duì)象處理。這些對(duì)象可能包含動(dòng)態(tài)數(shù)據(jù),因此作為客戶(hù)端,我們甚至可能事先不知道屬性鍵名稱(chēng)。
const User = { name: '搞前端的半夏', age: '' }
當(dāng)我們將鍵作為參數(shù)傳遞時(shí),我們可以編寫(xiě)一個(gè)返回User對(duì)象屬性值的函數(shù)。這里我們使用了[]
,來(lái)接受參數(shù),js會(huì)根據(jù)這個(gè)鍵對(duì)從對(duì)象中檢索!
function getPropertyValue(key) { const { [key]: returnValue } = User; return returnValue; }
const contact = getPropertyValue('contact'); const name = getPropertyValue('name'); console.log(contact, name); // 空 搞前端的半夏
使用對(duì)象解構(gòu)將屬性值作為參數(shù)傳遞給函數(shù)。
const User = { name: '搞前端的半夏', age: 18 }
name現(xiàn)在讓我們創(chuàng)建一個(gè)簡(jiǎn)單的函數(shù),該函數(shù)使用和屬性值創(chuàng)建一條消息dept以登錄到瀏覽器控制臺(tái)。
function consoleLogUser({name, age}) { console.log(`${name} 今年 ${age}`); }
直接將值作為函數(shù)參數(shù)傳遞并在內(nèi)部使用它們。
consoleLogUser(User); // 搞前端的半夏 今年 18
對(duì)象解構(gòu)函數(shù)還有另一種用法。如果函數(shù)返回一個(gè)對(duì)象,您可以將值直接解構(gòu)為變量。讓我們創(chuàng)建一個(gè)返回對(duì)象的函數(shù)。
function getUser() { return { 'name': '搞前端的半夏', 'age': 18 } }
const { age } = getUser(); console.log(age); // 18
我們將討論的最后一個(gè)(但并非最不重要的)用法是循環(huán)解構(gòu)。讓我們考慮一組員工對(duì)象。我們想要遍歷數(shù)組并想要使用每個(gè)員工對(duì)象的屬性值。
const User= [ { 'name': '愛(ài)分享的半夏', 'age': 16 }, { 'name': '搞前端的半夏', 'age': 18 }, { 'name': '敲代碼的半夏', 'age': 20 } ];
您可以使用for-of循環(huán)遍歷User對(duì)象,然后使用對(duì)象解構(gòu)賦值語(yǔ)法來(lái)檢索詳細(xì)信息。
for(let {name, age} of employees) { console.log(`${name} 今年${age}歲!!!`); }
1、能夠嵌入動(dòng)態(tài)文本于HTML頁(yè)面。2、對(duì)瀏覽器事件做出響應(yīng)。3、讀寫(xiě)HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測(cè)訪客的瀏覽器信息。6、控制cookies,包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
以上就是JavaScript對(duì)象解構(gòu)的用法是什么,小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘9ぷ鲿?huì)見(jiàn)到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。