JavaScript对象数组高效比对技巧

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《JavaScript高效对比对象数组找差异》，聊聊，希望可以帮助到正在努力赚钱的你。

本文旨在教授如何在JavaScript中高效比较两个包含对象的数组，并识别出其中一个数组中不存在于另一个数组的特定元素。我们将探讨一种结合使用Array.prototype.map()、Array.prototype.filter()和Array.prototype.includes()方法的优化方案，以取代传统的嵌套循环，从而提升代码的可读性和执行效率，尤其适用于处理大规模数据集的场景。

数组对象比较的常见挑战

在前端开发中，我们经常需要处理结构化的数据，这些数据通常以对象数组的形式存在。一个常见的需求是比较两个这样的数组，找出在第一个数组中存在但在第二个数组中缺失的元素，或者反之。例如，我们可能有两种水果列表，需要找出哪些水果只存在于一个列表中。

考虑以下两个数组：fruits 包含水果的ID和名称，food 包含食物的ID、名称及其他信息。我们的目标是找出 fruits 数组中，其 name 属性值不在 food 数组的 food_name 属性值中出现的水果。

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'}
];

一个初学者可能会尝试使用嵌套的 for 循环来解决这个问题，例如：

// 尝试的代码（存在问题）
var res = {};
var dep_data = [];
for (var j = 0; j < fruits.length; j++) {
  for (var d = 0; d < food.length; d++) {
    // 这里的比较逻辑存在问题：parseInt(food[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); // 输出结果不符合预期

上述尝试存在几个问题：

1. parseInt(food[d]) 会尝试将整个 food 数组中的对象转换为整数，这通常会得到 NaN 或其他非预期结果，导致比较逻辑失效。
2. res 对象在循环外部声明，并在每次找到匹配项时被修改。由于 JavaScript 中对象的引用特性，dep_data 数组中存储的将是 res 对象的多个引用，最终它们都会指向 res 的最后状态，而不是独立的匹配项。
3. 嵌套循环的时间复杂度为 O(n*m)，对于大型数组来说效率较低。

优化方案：使用 map 和 filter

为了更高效、更简洁地实现这一目标，我们可以利用 JavaScript 数组的内置方法：map()、filter() 和 includes()。

核心思路是：

1. 首先，从 food 数组中提取所有 food_name 值，创建一个新的、扁平化的名称数组。这将作为一个查找表。
2. 然后，遍历 fruits 数组，对于每个水果对象，检查其 name 属性是否存在于我们刚刚创建的名称查找表中。

下面是具体的实现代码：

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'}
];

// 步骤1: 使用 map() 从 food 数组中提取 food_name 属性，创建一个名称数组
const foodNames = food.map(f => f.food_name);
// foodNames 现在是 ['Orange', 'Bread', 'Chees', 'Milk', 'Salt']

// 步骤2: 使用 filter() 遍历 fruits 数组，并使用 includes() 检查名称是否存在
const notInFood = fruits.filter(f => !foodNames.includes(f.name));

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

方法解析

• Array.prototype.map(): map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。在这里，我们用它来遍历 food 数组中的每个对象 f，并返回 f.food_name，从而构建了一个只包含食物名称的字符串数组 foodNames。

• Array.prototype.filter(): filter() 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。在这里，我们遍历 fruits 数组中的每个水果对象 f。

• Array.prototype.includes(): includes() 方法用于判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。在 filter 的回调函数中，我们使用 !foodNames.includes(f.name) 来检查当前水果的 name 是否不存在于 foodNames 数组中。如果不存在，则 filter 会将该水果对象包含到最终结果 notInFood 数组中。

注意事项与性能考量

1. 字符串比较的区分大小写: includes() 方法进行的是区分大小写的字符串比较。如果需要不区分大小写的比较，你可能需要在比较前将所有字符串转换为统一的大小写（例如，都转为小写 toLowerCase()）。

   // 不区分大小写的比较
   const foodNamesLower = food.map(f => f.food_name && f.food_name.toLowerCase());
   const notInFoodCaseInsensitive = fruits.filter(f => f.name && !foodNamesLower.includes(f.name.toLowerCase()));

2. 性能优化（针对超大型数据集）: 尽管 map 和 filter 的组合比嵌套循环更具可读性和效率，但 includes() 方法在内部仍可能进行线性搜索（O(N)）。如果 foodNames 数组非常庞大，并且需要进行大量的查找操作，那么将 foodNames 转换为 Set 数据结构可以显著提高查找效率，因为 Set.prototype.has() 方法的平均时间复杂度为 O(1)。

   const foodNameSet = new Set(food.map(f => f.food_name));
   const notInFoodOptimized = fruits.filter(f => !foodNameSet.has(f.name));
   
   console.log(notInFoodOptimized);

   使用 Set 适用于查找操作远多于构建 Set 的场景。

3. 健壮性检查: 在实际应用中，考虑到数据可能不完整，最好在访问对象属性前进行存在性检查，例如 f.name && !foodNames.includes(f.name)，以避免因属性缺失导致的错误。

总结

通过结合使用 map() 和 filter()（并可选地配合 Set），我们可以以声明式、简洁且高效的方式解决对象数组之间的比较问题。这种方法不仅提升了代码的可读性和维护性，而且在处理大规模数据集时，相比传统的嵌套循环，具有显著的性能优势。理解并熟练运用这些高阶函数是现代 JavaScript 开发中的一项重要技能。

今天关于《JavaScript对象数组高效比对技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！