在 JavaScript 中按属性从对象数组中提取唯一对象

PHPz 转载: 2023-08-29 15:33:12 527浏览

在本教程中，我们将学习按属性从对象数组中提取唯一对象。有时，我们需要根据特定属性从对象数组中过滤对象。

例如，我们有一个 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中文网其它相关文章！

PHP课程 HTML视频教程 CSS视频 JS视频教程 Vue视频教程

声明：本文转载于：tutorialspoint，如有侵犯，请联系admin@php.cn删除

上一条：Backbone.js 为单页 ToDo 应用程序提供支持下一条：使用 Konva 操作 HTML5 Canvas：探索基本形状（第 2 部分）