JavaScript高效去重数组对象方法

golang学习网今天将给大家带来《JavaScript高效对比数组对象，提取唯一元素》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

本文将详细讲解如何在JavaScript中高效地比较两个包含对象的数组，以找出在一个数组中存在但在另一个数组中不存在的特定元素。我们将采用结合Array.prototype.map()和Array.prototype.filter()以及Array.prototype.includes()的方法，避免传统嵌套循环的低效性，从而实现代码的简洁性与执行效率的提升。

问题场景描述

在日常开发中，我们经常会遇到需要比较两个对象数组，并根据某个共同的属性（如ID或名称）来识别差异元素的需求。例如，我们有两个数组：fruits（水果列表）和 food（食物列表）。fruits 数组包含水果的ID和名称，而 food 数组包含食物的ID、名称或其他相关信息。我们的目标是找出 fruits 数组中那些名称在 food 数组中不存在的水果，并将其ID和名称提取到一个新的数组中。

示例数据：

const fruits = [
  {id: '1', name: 'Apple'},
  {id: '2', name: 'Orange'},
  {id: '3', name: 'Cherry'}
];

const food = [
  {id: '1', creation_date: '2023-05-13 09:46:25', created_by: '1'},
  {id: '1', food_name: 'Orange'}, // 注意这里id为1，但food_name为Orange
  {id: '2', food_name: 'Bread'},
  {id: '3', food_name: 'Chees'},
  {id: '4', food_name: 'Milk'},
  {id: '5', food_name: 'Salt'}
];

根据上述数据，Orange 在 food 数组中存在（food_name: 'Orange'），而 Apple 和 Cherry 则不存在。因此，期望的结果是 [{id: '1', name: 'Apple'}, {id: '3', name: 'Cherry'}]。

传统的嵌套循环方法虽然直观，但往往会导致代码冗长且效率低下，尤其是在处理大型数据集时。例如，以下尝试的嵌套循环代码存在逻辑错误，且效率不高：

// 错误的尝试示例
var res = {};
var dep_data = [];
for (var j = 0; j < fruits.length; j++) {
  for (var d = 0; d < food.length; d++) {
    // 这里的比较逻辑是错误的，且每次循环都会覆盖res对象
    if (parseInt(fruits[j].id) != parseInt(food[d])) {
      res["id"] = fruits[j].id;
      res["name"] = fruits[j].name;
      dep_data.push(res);
    }
  }
}
console.log(dep_data); // 结果不符合预期

高效解决方案

为了实现高效且简洁的数组对象比较，我们可以利用JavaScript数组的内置方法：map()、filter() 和 includes()。

核心思路：

1. 首先，从作为参照的数组（food）中提取出所有用于比较的键值（例如 food_name），形成一个独立的名称列表。
2. 然后，遍历目标数组（fruits），对于其中的每个元素，检查其对应的键值（例如 name）是否存在于之前生成的名称列表中。
3. 如果不存在，则将该元素保留下来。

实现代码：

const fruits = [
  {id: '1', name: 'Apple'},
  {id: '2', name: 'Orange'},
  {id: '3', name: 'Cherry'}
];

const food = [
  {id: '1', creation_date: '2023-05-13 09:46:25', created_by: '1'},
  {id: '1', food_name: 'Orange'},
  {id: '2', food_name: 'Bread'},
  {id: '3', food_name: 'Chees'},
  {id: '4', food_name: 'Milk'},
  {id: '5', food_name: 'Salt'}
];

// 步骤一：从 food 数组中提取所有 food_name，生成一个名称数组
const foodNames = food.map(f => f.food_name);
// foodNames 现在是: ["Orange", "Bread", "Chees", "Milk", "Salt"]

// 步骤二：过滤 fruits 数组，保留那些名称不在 foodNames 中的水果
const notInFood = fruits.filter(f => !foodNames.includes(f.name));

console.log(notInFood);
// 预期输出: [{id: "1", name: "Apple"}, {id: "3", name: "Cherry"}]

代码解析

1. const foodNames = food.map(f => f.food_name);

   • map() 方法会遍历 food 数组中的每一个对象。
   • 对于每个对象 f，它会返回 f.food_name 的值。
   • 最终，foodNames 将是一个只包含 food 数组中所有 food_name 字符串的新数组。这样做的好处是，我们将复杂的对象数组转换成了一个简单的字符串数组，便于后续的查找操作。

2. const notInFood = fruits.filter(f => !foodNames.includes(f.name));

   • filter() 方法会遍历 fruits 数组中的每一个对象。
   • 对于每个水果对象 f，f.name 表示当前水果的名称（例如 'Apple', 'Orange', 'Cherry'）。
   • foodNames.includes(f.name) 用于检查当前水果的名称是否存在于 foodNames 数组中。includes() 方法返回一个布尔值：如果找到则为 true，否则为 false。
   • !foodNames.includes(f.name) 对 includes() 的结果取反。这意味着只有当水果名称不在 foodNames 中时，条件才为 true。
   • filter() 方法会收集所有使回调函数返回 true 的元素，最终形成 notInFood 数组，其中包含了 fruits 数组中那些名称在 food 数组中不存在的水果对象。

方法优势与进阶考量

这种方法相比于传统的嵌套循环有显著的优势：

• 代码简洁性与可读性： 使用高阶函数（map, filter）使得代码意图清晰，更易于理解和维护。
• 函数式编程风格： 避免了显式的循环和状态管理，符合现代JavaScript的编程范式。
• 效率提升（特定场景）： 虽然 includes 内部仍是线性查找（O(N)），但将查找操作封装在内置方法中，通常会比手动编写的嵌套循环更优化。

进阶考量：使用 Set 优化查找性能

对于非常大的数据集，foodNames.includes(f.name) 的每次查找操作的时间复杂度是 O(N)（N 是 foodNames 的长度）。这意味着整体时间复杂度可能接近 O(M*N)，其中 M 是 fruits 的长度。为了进一步优化查找性能，我们可以将 foodNames 转换为 Set 对象。Set 提供了 O(1) 的平均时间复杂度进行查找（has() 方法）。

const fruits = [
  {id: '1', name: 'Apple'},
  {id: '2', name: 'Orange'},
  {id: '3', name: 'Cherry'}
];

const food = [
  {id: '1', creation_date: '2023-05-13 09:46:25', created_by: '1'},
  {id: '1', food_name: 'Orange'},
  {id: '2', food_name: 'Bread'},
  {id: '3', food_name: 'Chees'},
  {id: '4', food_name: 'Milk'},
  {id: '5', food_name: 'Salt'}
];

// 步骤一：从 food 数组中提取所有 food_name，并存储到 Set 中
const foodNamesSet = new Set(food.map(f => f.food_name));
// foodNamesSet 现在是: Set {"Orange", "Bread", "Chees", "Milk", "Salt"}

// 步骤二：过滤 fruits 数组，保留那些名称不在 foodNamesSet 中的水果
const notInFoodOptimized = fruits.filter(f => !foodNamesSet.has(f.name));

console.log(notInFoodOptimized);
// 预期输出: [{id: "1", name: "Apple"}, {id: "3", name: "Cherry"}]

使用 Set 后，foodNamesSet.has(f.name) 的查找效率大大提高，使得整个操作的平均时间复杂度降低到 O(M + N)。

其他注意事项：

• 比较键的灵活性： 本教程以 name 和 food_name 作为比较键。在实际应用中，你可以根据需求更改为 id 或其他任何属性。
• 大小写敏感性： 字符串比较默认是大小写敏感的。如果需要进行不区分大小写的比较，应在比较前将字符串统一转换为小写或大写（例如 f.name.toLowerCase()）。
• 查找共同元素： 如果你需要查找两个数组中共同存在的元素，只需将 filter 条件中的 ! 运算符移除即可。

总结

通过结合使用 map()、filter() 和 includes()（或 Set.prototype.has()），我们能够以一种声明式、高效且易于理解的方式，在JavaScript中比较两个对象数组并提取差异元素。这种模式在处理各种数据过滤和匹配场景时都非常有用，是现代JavaScript开发中值得掌握的重要技巧。

以上就是《JavaScript高效去重数组对象方法》的详细内容，更多关于的资料请关注golang学习网公众号！