這篇文章為大家帶來了JavaScript中物件解構用法解析的相關知識,希望對大家有幫助。
ES6(ES2015)的發布,為JavaScript 提供了一個更方便快速的方式來處理物件的屬性。該機制稱為Destructuring(也稱為解構賦值)。但是你真的會用嗎?你真的了解各種場景下,解構賦值的用法嗎?
物件解構最基本的用法是從物件中檢索屬性鍵的值。
例如,我們定義了一個對象,他有兩個屬性:name和age
const User = { name: '搞前端的半夏', age: 18 }
傳統上,我們將使用點(.) 表示法或下標([]) 表示法從物件中檢索值。下面的程式碼片段顯示了使用點符號檢索物件的值id和name從物件中檢索值的範例。 employee
在之前我們想要取得物件中某個屬性的值,通產是使用.或[]。
const name = User['name']; const age = User.age;
當然這兩種方式在當前情況下是沒有問題的,但是當User的屬性多了,我們就要不停的複製貼上,產生很多重複的程式碼。
有了結構賦值,我們就可以快速的來取得值。例如我們使用物件的鍵名來建立變量,並將物件的值分配給相同的鍵。這樣無論有多少屬性,我們只要賦值屬性名即可,同樣的也減少了許多重複程式碼。
const { name, age } = User;
在上面的範例中,User只是一個簡單的單層對象,我們在日常的開發中也會遇到嵌套的對象,,那麼使用結構賦值,我們該如何檢索嵌套對像中的值。下面我們重新定義User對象,並為這個物件新增一個contact屬性,它包含User的phone。 。
const User = { name: '搞前端的半夏', age: '18', contact:{ phone:'110', } }
如果我們用.的當時來回phone的值,則需要兩次.
const phone = User.contact.phone;
如果使用解構賦值的話:則寫法如下:
const {contact:{phone}}=User consosle.log(phone) // 输出10.
#無論是多少層的嵌套,只要依照這個寫法,一定會拿到具體的值。
預設值
#當然我們在日常開發的過程中,可能會遇到很多極端的情況,
例如後端傳過來的對象,可能會缺少某些欄位
const User = { name: '搞前端的半夏', }
或屬性沒有具體的值:
const User = { name: '搞前端的半夏', age: '' }
當我們使用解構賦值的話:無論是否存在age屬性的話,都會建立age變數。
const { name, age } = employee;
當User.age沒有具體值得話,我們則可以使用
const { name, age=18 } = employee;
給age一個預設值。
新變數
堅持,稍等。解構部分有更多的魔力展示!如何建立一個全新的變數並指派一個使用物件屬性值計算的值?聽起來很複雜?這是一個例子,
當我們想要輸出User屬性的組合值的話,該怎麼做呢?
const { name,age,detail = `${name} 今年 ${age} `} = User ; console.log(detail); // 输出:搞前端的半夏 今年 18
在 JavaScript 物件解構中,您可以為解構變數alias命名。減少變數名衝突的機會非常方便。
const User = { name: '搞前端的半夏', age: '' }
假設我們想要用解構賦值來取得age屬性的值,但是程式碼中已經又age這個變數了,我們這個時候就需要在結構的時候定義別名。
const { age: userAge } = User; console.log(userAge); //搞前端的半夏
而如果使用age的話,會報錯。
console.log(age);
使用物件解構處理動態名稱屬性
我們經常將 API 回應資料當作 JavaScript 物件處理。這些物件可能包含動態數據,因此作為客戶端,我們甚至可能事先不知道屬性鍵名稱。
const User = { name: '搞前端的半夏', age: '' }
當我們將鍵作為參數傳遞時,我們可以寫一個傳回User物件屬性值的函數。這裡我們使用了[],來接受參數,js會根據這個鍵對從物件中檢索!
function getPropertyValue(key) { const { [key]: returnValue } = User; return returnValue; }
const contact = getPropertyValue('contact'); const name = getPropertyValue('name'); console.log(contact, name); // 空 搞前端的半夏
在函數參數和傳回值中解構物件
使用物件解構將屬性值作為參數傳遞給函數。
const User = { name: '搞前端的半夏', age: 18 }
name現在讓我們建立一個簡單的函數,該函數使用和屬性值建立一條訊息dept以登入瀏覽器控制台。
function consoleLogUser({name, age}) { console.log(`${name} 今年 ${age}`); }
直接將值作為函數參數傳遞並在內部使用它們。
consoleLogUser(User); // 搞前端的半夏 今年 18
解構函數物件傳回值
物件解構函數還有另一種用法。如果函數傳回一個對象,您可以將值直接解構為變數。讓我們建立一個傳回物件的函數。
function getUser() { return { 'name': '搞前端的半夏', 'age': 18 } }
const { age } = getUser(); console.log(age); // 18
我們將討論的最後一個(但並非最不重要的)用法是循環解構。讓我們考慮一組員工物件。我們想要遍歷數組並且想要使用每個員工物件的屬性值。
const User= [ { 'name': '爱分享的半夏', 'age': 16 }, { 'name': '搞前端的半夏', 'age': 18 }, { 'name': '敲代码的半夏', 'age': 20 } ];
您可以使用for-of循環遍歷User對象,然後使用對象解構賦值語法來檢索詳細資訊。
for(let {name, age} of employees) { console.log(`${name} 今年${age}岁!!!`); }
相關推薦:javascript學習教學
以上是JavaScript物件解構用法解析(實例詳解)的詳細內容。更多資訊請關注PHP中文網其他相關文章!