在 JavaScript 中按属性从对象数组中提取唯一对象
- PHPz转载
- 2023-08-29 15:33:121001浏览
在本教程中，我们将学习按属性从对象数组中提取唯一对象。有时，我们需要根据特定属性从对象数组中过滤对象。
例如，我们有一个 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中文网其他相关文章！