在 JavaScript 中按屬性從物件陣列中提取唯一對象
- PHPz轉載
- 2023-08-29 15:33:121006瀏覽
在本教程中，我們將學習按屬性從物件陣列中提取唯一物件。有時，我們需要根據特定屬性從物件陣列中過濾物件。
例如，我們有一個 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中文網其他相關文章！