引言：处理数组对象去重的问题
在前端开发中，我们经常需要处理包含多个对象的数组，并从中提取出满足特定条件（例如某个属性值唯一）的数据。例如，给定一个航班列表，我们可能需要根据 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 时，可能会写出类似以下的代码：
立即学习“Java免费学习笔记（深入）”；
// 错误的实现示例
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，即比较两个对象的特定属性值。
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
解决方案一：使用 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>注意事项与性能考量
- 保持数据不可变性： 在 computed 属性中进行数据转换时，始终返回一个新的数组或对象，而不是直接修改原始数据。上述两种方法都创建了新的数组，遵循了不可变性原则。
- 选择合适的去重键： 确保你选择的键（如 trip_class）能够唯一标识你想要保留的对象。如果需要根据多个键进行复合去重，可以考虑将多个键的值组合成一个唯一的字符串作为 Map 的键，例如 ${flight.trip_class}-${flight.destination}。
-
性能对比：
- reduce + some (或 find)： 简单易懂，适用于小型到中等规模的数组。时间复杂度为 O(N^2)，因为 some 在最坏情况下需要遍历累加器中的所有元素。
- Map： 性能更优，适用于大型数组。时间复杂度为 O(N)，因为 Map 的查找和插入操作通常是常数时间。
-
保留策略：
- Map 方案默认（uniqueMap.set(key, value)）会保留具有相同键的最后一个出现的对象。
- Map 方案通过 if (!uniqueMap.has(key)) 条件可以实现保留第一个出现的对象。
- reduce 方案默认是保留第一个出现的对象，因为一旦找到匹配项就不会再添加。
总结
对数组对象进行去重是 JavaScript 开发中的常见任务。理解常见的错误（如错误的比较条件）是解决问题的第一步。本文提供了两种有效的解决方案：基于 reduce 方法的直观实现，以及基于 Map 对象的高效实现。在实际应用中，根据数组的规模和性能要求，选择最适合的去重策略至关重要。在 Vuex computed 属性中运用这些方法，能够确保数据处理的响应性和高效性。
