目錄

• 前言
• 使用解構從物件中獲取值
• 使用解構從巢狀物件中獲取值
• 使用物件解構定義一個新變數以及預設值
• 預設值
• 新變數
• 使用 物件解構別名
• 使用物件解構處理CTVTNvW動態名稱屬性
• 在函式引數和返回值中解構物件
• 解構賦值傳參
• 解構函式物件返回值
• 在迴圈中使用物件解構
• 總結

前言

ES6（ES2015）的釋出，給Script 提供了一種更方便快捷的方式來處理物件的屬性。該機制稱為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: CTVTNvW'搞前端的半夏',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 物件解構別名

在 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物件屬性值的函式。這裡我們使用了[],來接受引數，會根據這個鍵對從物件中檢索！

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}`); 
}

直接將值作為函式引數傳遞並在內部使用它們。

consoleLogUCTVTNvWser(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物件解構用法的文章就介紹到這了,更多相關js物件解構用法內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！