在本教程中,我们将学习按属性从对象数组中提取唯一对象。有时,我们需要根据特定属性从对象数组中过滤对象。
例如,我们有一个 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 的对象。
第 3 步 - 使用 for-of 循环迭代“employees”数组的每个对象。
第 4 步 - 对于地图,使用 emp_id 作为键,使用整个对象作为值。在 for-of 循环中,使用 Map 对象的 set() 方法将该对象设置为 emp_id 键的值。
第 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() 方法从数组中过滤值。
第 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 中按属性从对象数组中提取唯一对象的详细内容,更多请关注编程之家其它相关文章!
原文地址:https://www.jb51.cc/js/4674565.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。