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>