資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學從 JavaScript 物件陣列中按屬性提取唯一物件
在本教程中，我們將學習如何從物件陣列中按屬性提取唯一物件。有時，我們需要根據特定屬性過濾物件陣列中的物件。
例如，我們使用 id 作為鍵來標識物件。因此，我們需要確保陣列中只有一個物件具有單個 id。如果兩個或多個物件包含相同的主鍵值，則可能會導致無法唯一標識物件的問題。
在這裡，我們將學習不同的方法來根據特定屬性過濾陣列中所有唯一物件。
使用 Map 和 for 迴圈
在 JavaScript 中，Map 可以儲存唯一的鍵值對。此外，我們可以使用其鍵在 O(1) 的時間複雜度內從 Map 獲取任何值。因此，我們將遍歷物件陣列並將鍵值對儲存在 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];
在上面的語法中，我們使用 map 來儲存具有唯一 emp_id 的物件。
演算法
步驟 1 − 建立一個物件陣列，其中包含多個具有重複 emp_id 的物件。
步驟 2 − 使用 Map 建構函式建立一個 Map() 物件。
步驟 3 − 使用 for-of 迴圈遍歷“employees”陣列的每個物件。
步驟 4 − 對於 map，使用 emp_id 作為鍵，整個物件作為值。在 for-of 迴圈中，使用 Map 物件的 set() 方法將物件設定為 emp_id 鍵的值。
步驟 5 − map 是一個迭代器。因此，要獲取迭代器的所有值，請應用 values() 方法。
步驟 6 − 使用擴充套件運算子將所有物件從 iteratorValues 複製到 uniqueEmployees 陣列。
步驟 7 − uniqueEmployees 陣列包含所有具有唯一 emp_id 的物件，使用者可以遍歷它以獲取物件值。
示例
在下面的示例中，我們實現了使用 Map 和 for-of 迴圈按屬性提取唯一物件的演算法。我們建立了 employees 陣列，其中包含四個具有重複 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() 方法從陣列中過濾值。它將回調函式作為引數，並根據回撥函式返回的布林值過濾值。
與上面的示例類似，我們將使用 map 來儲存屬性值，並檢查 map 是否已經包含該值。如果是，我們將繼續前進；否則，我們將這些值新增到 map 和已過濾的陣列中。
語法
使用者可以按照以下語法過濾所有具有唯一屬性值的屬性。
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() 物件建立一個 map。
步驟 2 − 使用 filter() 方法從陣列中過濾值。
步驟 3 − 將回調函式作為 filter 方法的引數傳遞，該方法將 web 作為引數。web 是來自引用陣列的物件。
步驟 4 − 檢查 map 是否已經包含 website_name 作為鍵，並透過從回撥函式返回 false 來繼續前進。
步驟 5 − 如果 map 不包含 website_name，則將 website_name 和物件作為鍵值對新增到 map 中，並返回 true 以將其過濾到 uniqueObjects 陣列中。
示例
在這個例子中，我們使用了 filter() 方法根據 website_name 從陣列中過濾所有 website 物件。在輸出中，使用者可以看到 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>
本教程向我們介紹了兩種按特定屬性值提取唯一物件的方法。我們在兩種方法中都使用了 map，但使用了不同的迭代器方法來遍歷物件的陣列。使用者可以使用 for-of 迴圈或 filter() 方法來遍歷陣列。
6K+ 次瀏覽
