数据结构
网络
关系数据库管理系统 (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+ 次浏览
