首頁 > 文章 > web前端 > 在 JavaScript 中按屬性從物件陣列中提取唯一對象

在 JavaScript 中按屬性從物件陣列中提取唯一對象

PHPz轉載: 2023-08-29 15:33:12968瀏覽

在 JavaScript 中按属性从对象数组中提取唯一对象

在本教程中，我們將學習按屬性從物件陣列中提取唯一物件。有時，我們需要根據特定屬性從物件陣列中過濾物件。

例如，我們有一個 id 作為標識物件的鍵。因此，我們需要確保數組僅包含具有單一 id 的單一物件。如果兩個或多個物件包含相同的主鍵值，就會導致物件唯一標識的問題。

在這裡，我們將學習根據特定屬性從陣列中過濾所有唯一物件的不同方法。

使用地圖和 for 迴圈

在JavaScript中，Map可以儲存唯一的鍵值對。此外，我們可以使用 Map 的鍵以 O(1) 的時間複雜度從 Map 中取得任何值。因此，我們將迭代物件數組並將鍵值對儲存在 Map 中。此外，我們還將檢查 Map 是否包含具有特定屬性值的物件；我們不會將該物件新增到新物件的陣列中。

文法

您可以按照以下語法使用地圖從陣列中提取唯一物件。

const employees = [
   { emp_id: 1, emp_name: "Shubham", emp_age: 22 },
   { emp_id: 1, emp_name: "Joe", emp_age: 23 },
];     
var map = new Map();
for (let employee of employees) {
   map.set(employee["emp_id"], employee);
}
var iteratorValues = map.values();
var uniqueEmployess = [...iteratorValues];

在上面的語法中，我們使用映射來儲存具有唯一 emp_id 的物件。

演算法

第 1 步 - 建立一個物件數組，其中包含多個具有重複 emp_id 的物件。
第 2 步 - 使用 Map 建構子建立一個 Map() 物件。
第 3 步 - 使用 for-of 記憶體迭代「employees」陣列的每個物件。
第 4 步 - 對於地圖，使用 emp_id 作為鍵，使用整個物件作為值。在 for-of 系統中，使用 Map 物件的 set() 方法將該物件設定為 emp_id 鍵的值。
第 5 步 - 映射是一個迭代器。因此，要取得迭代器的所有值，請套用values() 方法。
第 6 步 - 使用展開運算子將所有物件從 iteratorValues 複製到 uniqueEmployees 陣列。
第 7 步 - uniqueEmployees 陣列包含具有唯一 emp_id 的所有對象，使用者可以迭代它來取得對象值。

範例

在下面的範例中，我們使用 Map 和 for-of 系統實作了按屬性提取唯一物件的演算法。我們創建了員工數組，其中包含具有重複 emp_id 值的四個不同對象，並且我們正在使用上述演算法來提取所有唯一對象。

<html>
<body>
   <h3>Extracting the unique objects by the emp_id attribute of an array of objects using the <i> Map and for-loop. </i></h3>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
      // creating the array of employees, which contains multiple objects.
      const employees = [
         { emp_id: 1, emp_name: "Shubham", emp_age: 22 },
         { emp_id: 2, emp_name: "Joe", emp_age: 23 },
         { emp_id: 2, emp_name: "Sam", emp_age: 62 },
      ];
      var map = new Map();
      for (let employee of employees) {
         // setting up the employee object for unique emp_id value
         map.set(employee["emp_id"], employee);
      }
      var iteratorValues = map.values();
      var uniqueEmployess = [...iteratorValues];
      for (let uniqueEmp of uniqueEmployess) {
         output.innerHTML += "The new unique object values is </br>";
         output.innerHTML +=  "emp_id :- " + uniqueEmp.emp_id +
            ", emp_name :-  " + uniqueEmp.emp_name +
            ", emp_age :- " + uniqueEmp.emp_age +" </br> ";
      }
   </script>
</body>
</html>

使用 array.filter() 方法和 Map

我們可以使用filter()方法來過濾陣列中的值。它將回調函數作為參數，並根據回調函數傳回的布林值過濾值。

與上面的範例一樣，我們將使用映射來儲存屬性值並檢查映射是否已包含該值。如果是這樣，我們就會繼續前進；否則，我們會將這些值加到地圖和過濾數組中。

文法

使用者可以依照下列語法過濾所有具有唯一屬性值的物件。

var map = new Map();
let uniqueObjects = websites.filter((web) => {
   if (map.get(web.website_name)) {
      return false;
   }
   map.set(web.website_name, web);
   return true;
});

演算法

第 1 步 - 使用 Map() 物件建立地圖。
第 2 步 - 使用 filter() 方法從陣列中過濾值。
步驟 3 - 將回呼函數作為過濾器方法的參數傳遞，該方法將網路作為參數。網路是引用數組中的一個物件。
第 4 步 - 檢查地圖是否已包含 website_name 作為鍵，然後透過從回呼函數傳回 false 來繼續。
第5 步驟 - 如果地圖不包含website_name，則將website_name 和物件作為鍵值對添加到地圖中，並傳回true 以在uniqueObjects 數組中將其過濾掉.

範例

在這個範例中，我們使用filter()方法從陣列中按website_name過濾所有網站物件。在輸出中，使用者可以觀察到 filter() 方法只傳回兩個包含唯一 website_name 的物件。

<html>
<body>
   <h3>Extracting the unique objects by the website_name attribute of an array of objects using the <i> Map and filter() method. </i></h3>
   <div id="output"></div>
   <script>
      let output = document.getElementById("output");
         //creating the array of websites object. A single website can have multiple domains
      const websites = [
         { website_name: "TutorialsPoint", domain: "tutorialspoint.com" },
         { website_name: "TutorialsPoint", domain: "qries.com" },
         { website_name: "Tutorix", domain: "tutorix.com" },
      ];
      var map = new Map();
      let uniqueObjects = websites.filter((web) => {
         if (map.get(web.website_name)) {
            return false;
         }
         // If website_name is not found in the map, return true.
         map.set(web.website_name, web);
         return true;
      });
      // iterating through the unique objects and printing its value
      for (let web of uniqueObjects) {
         output.innerHTML += "The new unique object values is </br>";
         output.innerHTML += "website_name :- " + web.website_name +
            ", domain :-  " +  web.domain +  " </br> ";
     }
   </script>
</body>
</html>

本教學教導我們兩種透過特定屬性值來提取唯一物件的方法。我們在兩種方法中都使用了映射，但使用了不同的迭代器方法來迭代物件的陣列。使用者可以使用for-of循環或filter()方法來迭代數組。

以上是在 JavaScript 中按屬性從物件陣列中提取唯一對象的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript Array 运算符 for 构造函数 Filter 回调函数循环 map 对象算法

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：Backbone.js 為單頁 ToDo 應用程式提供支持下一篇：Backbone.js 為單頁 ToDo 應用程式提供支持

看更多