JavaScript数组去重方法：键值对高效处理

大家好，今天本人给大家带来文章《JavaScript数组去重技巧：基于键值对高效处理》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

本文旨在详细阐述如何在 JavaScript 环境（尤其是在 Vuex 的 computed 属性中）对数组对象进行去重操作，使其仅保留指定键（如 trip_class）值唯一的对象。文章将分析常见错误，并提供基于 reduce 方法和 Map 对象的两种高效解决方案，辅以清晰的代码示例和性能考量，帮助开发者正确实现数组对象的去重逻辑。

引言：处理数组对象去重的问题

在前端开发中，我们经常需要处理包含多个对象的数组，并从中提取出满足特定条件（例如某个属性值唯一）的数据。例如，给定一个航班列表，我们可能需要根据 trip_class（行程类别）去重，只保留每种行程类别中的第一个或任意一个代表性航班。这在展示筛选条件、生成唯一列表等场景中尤为常见。

常见误区与问题分析

在尝试对数组对象进行去重时，一个常见的错误是未能正确比较对象的属性值。考虑以下原始数据结构：

[
    {name: 'john', trip_class: 0, lastname: 'lastname'},
    {name: 'Don', trip_class: 1, lastname: 'lastname'},
    {name: 'Joshua', trip_class: 1, lastname: 'lastname'},
    {name: 'Mary', trip_class: 2, lastname: 'lastname'}
]

我们的目标是得到：

[
    {name: 'john', trip_class: 0, lastname: 'lastname'},
    {name: 'Don', trip_class: 1, lastname: 'lastname'},
    {name: 'Mary', trip_class: 2, lastname: 'lastname'}
]

一个常见的错误实现方式，尤其是在使用 reduce 结合 find 时，可能会写出类似以下的代码：

// 错误的实现示例
flightsClasses.reduce((acc, obj)=>{
  // 错误点：obj.trip_class (数字) 与 flightClass (对象) 比较
  var exist = acc.find((flightClass) => obj.trip_class === flightClass );
  if(!exist){
    acc.push(obj);
  }
  return acc;
},[]);

上述代码的问题在于 acc.find((flightClass) => obj.trip_class === flightClass ) 这一行。obj.trip_class 是一个数字（例如 0, 1, 2），而 flightClass 是 acc 数组中的一个完整对象。将一个数字与一个对象进行严格相等（===）比较，结果始终为 false，导致 find 总是找不到匹配项，从而所有对象都被添加到累加器 acc 中，未能实现去重。

正确的比较方式应该是比较 obj.trip_class 与 flightClass.trip_class，即比较两个对象的特定属性值。

解决方案一：使用 reduce 方法进行去重

Array.prototype.reduce() 方法非常适合用于将数组归纳为单个值或新的数组。结合 Array.prototype.some() 或 Array.prototype.find() 方法，我们可以有效地实现去重。

computed: {
    flights() {
        return this.$store.getters.getFlights;
    },
    flightsClasses() {
        const flights = this.flights; // 获取原始航班数据

        // 使用 reduce 方法进行去重
        const uniqueFlights = flights.reduce((accumulator, currentFlight) => {
            // 检查累加器中是否已存在具有相同 trip_class 的航班
            const exists = accumulator.some(
                (existingFlight) => existingFlight.trip_class === currentFlight.trip_class
            );

            // 如果不存在，则将当前航班添加到累加器中
            if (!exists) {
                accumulator.push(currentFlight);
            }
            return accumulator;
        }, []); // 初始累加器为空数组

        return uniqueFlights;
    }
}

代码解析：

• reduce 方法遍历 flights 数组中的每个 currentFlight。
• accumulator 是一个在每次迭代中累积结果的数组。
• accumulator.some(...) 用于检查 accumulator 中是否已经存在一个对象的 trip_class 与 currentFlight.trip_class 相同。some() 方法在找到第一个满足条件的元素后会立即返回 true，效率较高。
• 如果 exists 为 false（即当前 trip_class 尚未被添加），则将 currentFlight 添加到 accumulator 中。
• 最终 reduce 方法返回包含唯一 trip_class 对象的数组。

解决方案二：利用 Map 对象进行高效去重

对于大型数据集，或者当需要更灵活地控制去重逻辑（例如保留每个 trip_class 的最后一个出现对象）时，Map 对象提供了一种更高效和简洁的去重方法。Map 对象以键值对的形式存储数据，并且键是唯一的。

computed: {
    flights() {
        return this.$store.getters.getFlights;
    },
    flightsClasses() {
        const flights = this.flights; // 获取原始航班数据
        const uniqueMap = new Map(); // 创建一个新的 Map 对象

        // 遍历航班数据，以 trip_class 作为键，航班对象作为值
        flights.forEach(flight => {
            // 如果 Map 中没有当前 trip_class 的键，或者需要更新（例如保留最后一个）
            // uniqueMap.set(flight.trip_class, flight); // 这会保留最后一个出现的对象

            // 如果需要保留第一个出现的对象（更常见需求），则在键不存在时才添加
            if (!uniqueMap.has(flight.trip_class)) {
                uniqueMap.set(flight.trip_class, flight);
            }
        });

        // 将 Map 的值（即去重后的对象）转换为数组
        return Array.from(uniqueMap.values());
    }
}

代码解析：

• 我们创建一个空的 Map 对象 uniqueMap。
• 遍历原始 flights 数组。对于每个 flight 对象，我们使用其 trip_class 作为 Map 的键，flight 对象本身作为值。
• Map 的键是唯一的。当我们调用 uniqueMap.set(key, value) 时，如果 key 已经存在，则其对应的值会被新值覆盖。
• 为了实现“保留第一个”的去重逻辑，我们增加了一个 if (!uniqueMap.has(flight.trip_class)) 条件判断，确保只有当 trip_class 键尚未存在时才添加。
• 最后，Array.from(uniqueMap.values()) 将 Map 中所有值（即去重后的对象）提取出来，并转换为一个新的数组。

Map 方案的优势：

• 性能优越： Map 的查找、插入、删除操作的平均时间复杂度为 O(1)，相比 reduce 方案中每次迭代都可能进行 O(N) 的 some 或 find 操作（总复杂度 O(N^2)），Map 方案的整体时间复杂度为 O(N)，对于大型数组性能更佳。
• 代码简洁： 逻辑更直观，易于理解。

在 Vuex computed 属性中的应用

无论是 reduce 还是 Map 方案，都非常适合在 Vue 组件的 computed 属性中使用。computed 属性是响应式的，当其依赖的数据（例如 this.$store.getters.getFlights）发生变化时，flightsClasses 会自动重新计算，确保界面上展示的数据始终是最新的去重结果。

<template>
  <div>
    <h2>Unique Flights by Trip Class</h2>
    <ul>
      <li v-for="flight in flightsClasses" :key="flight.trip_class">
        Trip Class: {{ flight.trip_class }}, Name: {{ flight.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    flights() {
      // 从 Vuex store 获取原始航班数据
      return this.$store.getters.getFlights;
    },
    flightsClasses() {
      const flights = this.flights;

      // 选择你的去重方法，例如使用 Map
      const uniqueMap = new Map();
      flights.forEach(flight => {
        if (!uniqueMap.has(flight.trip_class)) {
          uniqueMap.set(flight.trip_class, flight);
        }
      });
      return Array.from(uniqueMap.values());

      /*
      // 或者使用 reduce 方法
      return flights.reduce((accumulator, currentFlight) => {
          const exists = accumulator.some(
              (existingFlight) => existingFlight.trip_class === currentFlight.trip_class
          );
          if (!exists) {
              accumulator.push(currentFlight);
          }
          return accumulator;
      }, []);
      */
    }
  }
}
</script>

注意事项与性能考量

1. 保持数据不可变性： 在 computed 属性中进行数据转换时，始终返回一个新的数组或对象，而不是直接修改原始数据。上述两种方法都创建了新的数组，遵循了不可变性原则。
2. 选择合适的去重键： 确保你选择的键（如 trip_class）能够唯一标识你想要保留的对象。如果需要根据多个键进行复合去重，可以考虑将多个键的值组合成一个唯一的字符串作为 Map 的键，例如 ${flight.trip_class}-${flight.destination}。
3. 性能对比：
   • reduce + some (或 find)： 简单易懂，适用于小型到中等规模的数组。时间复杂度为 O(N^2)，因为 some 在最坏情况下需要遍历累加器中的所有元素。
   • Map： 性能更优，适用于大型数组。时间复杂度为 O(N)，因为 Map 的查找和插入操作通常是常数时间。
4. 保留策略：
   • Map 方案默认（uniqueMap.set(key, value)）会保留具有相同键的最后一个出现的对象。
   • Map 方案通过 if (!uniqueMap.has(key)) 条件可以实现保留第一个出现的对象。
   • reduce 方案默认是保留第一个出现的对象，因为一旦找到匹配项就不会再添加。

总结

对数组对象进行去重是 JavaScript 开发中的常见任务。理解常见的错误（如错误的比较条件）是解决问题的第一步。本文提供了两种有效的解决方案：基于 reduce 方法的直观实现，以及基于 Map 对象的高效实现。在实际应用中，根据数组的规模和性能要求，选择最适合的去重策略至关重要。在 Vuex computed 属性中运用这些方法，能够确保数据处理的响应性和高效性。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~