极客教程JavaScript 从一个对象数组中按属性提取唯一的对象
在本教程中，我们将学习如何从对象数组中按属性提取唯一的对象。有时，我们需要根据一个特定的属性从对象数组中过滤对象。
例如，我们有一个id作为识别对象的关键。所以，我们需要确保数组中只包含一个具有单一id的对象。如果两个或更多的对象包含相同的主键值，会造成唯一识别对象的问题。
在这里，我们将学习不同的方法，根据一个特定的属性，从数组中过滤所有独特的对象。
使用地图和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步 – 对于地图，使用emp_id作为键，整个对象作为值。在for-of循环中，使用Map对象的set()方法来设置对象作为emp_id键的值。
-
第5步 – 地图是一个迭代器。所以，要获得一个迭代器的所有值，应用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是否已经包含该值。如果是，我们将继续前进；否则，我们将把这些值添加到地图和过滤的数组中。
语法
用户可以按照下面的语法来过滤所有具有唯一属性值的对象。
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步 – 将回调函数作为过滤器方法的参数传递，过滤器方法以web为参数。web是参考数组中的一个对象。
-
第4步 – 检查地图是否已经包含网站名称作为一个键，并通过从回调函数返回false来继续前进。
-
第5步 – 如果地图不包含网站名称，在地图中添加网站名称和对象作为键值对，并返回true以在uniqueObjects数组中过滤出它。
示例
在这个例子中，我们用filter()方法从数组中按site_name过滤所有的网站对象。在输出中，用户可以观察到filter()方法只返回两个包含唯一的网站名称的对象。
<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()方法来遍历数组。