在前端开发中，我们经常会遇到需要处理数组数据，并从中提取出符合特定条件（例如某个属性值唯一）的元素。当数据来源于vuex状态管理时，这种需求尤为常见。本教程将以一个具体的场景为例，演示如何从包含重复trip_class属性的对象数组中，筛选出trip_class值唯一的对象。
问题分析与常见误区
假设我们有一个flights数组，其结构如下：
[
{name: 'john', trip_class: 0, lastname: 'lastname'},
{name: 'Don', trip_class: 1, lastname: 'lastname'},
{name: 'Joshua', trip_class: 1, lastname: 'lastname'}, // trip_class: 1 重复
{name: 'Mary', trip_class: 2, lastname: 'lastname'}
]我们期望得到的结果是trip_class唯一的数组：
[
{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)=>{
var exist = acc.find((flightClass) => obj.trip_class === flightClass ); // 错误：将 trip_class 与整个对象进行比较
if(!exist){
acc.push(obj);
}
return acc;
},[]);acc.find((flightClass) => obj.trip_class === flightClass ) 这行代码的意图是检查累加器acc中是否已存在具有相同trip_class的对象。然而，flightClass是一个完整的对象，而obj.trip_class是一个数值。将一个数值与一个对象进行严格相等（===）比较，结果将始终为false，导致所有元素都被添加到结果数组中，无法实现去重。
立即学习“Java免费学习笔记（深入）”；
正确的解决方案
要正确地实现基于特定键值的去重，我们需要确保find方法比较的是对象的对应属性。
方案一：使用 Array.prototype.reduce()
reduce方法是一个强大的工具，可以用于将数组归约为单个值。在这里，我们可以用它来构建一个新的、去重后的数组。
// 假设 this.flights 是从 Vuex getter 获取的原始数组
computed: {
flights() {
return this.$store.getters.getFlights;
},
flightsClasses() {
// 使用 reduce 方法进行去重
const uniqueFlights = this.flights.reduce((accumulator, currentObject) => {
// 检查累加器中是否已存在具有相同 trip_class 的对象
const exists = accumulator.find(item => item.trip_class === currentObject.trip_class);
// 如果不存在，则将当前对象添加到累加器中
if (!exists) {
accumulator.push(currentObject);
}
return accumulator;
}, []); // 初始累加器为空数组
return uniqueFlights;
}
}解释：
- reduce方法遍历this.flights数组中的每个currentObject。
- accumulator是累加器，它在每次迭代中都会传递下去，并最终成为去重后的数组。
- accumulator.find(item => item.trip_class === currentObject.trip_class)：这是关键的修正。我们现在比较的是currentObject.trip_class（当前对象的trip_class值）与item.trip_class（累加器中已有对象的trip_class值）。如果找到匹配项，exists将为true，表示该trip_class已存在。
- 如果exists为false（即trip_class是新的），则将currentObject添加到accumulator中。
方案二：使用 Map 对象（推荐）
Map对象是ES6中引入的一种新的数据结构，它保存键值对，并且键可以是任何类型。使用Map进行去重通常更高效，因为它提供了O(1)的查找速度（平均情况下），而find方法在最坏情况下是O(n)。
computed: {
flights() {
return this.$store.getters.getFlights;
},
flightsClasses() {
const uniqueMap = new Map();
this.flights.forEach(item => {
// 使用 trip_class 作为 Map 的键，将整个对象作为值
// 如果键已存在，新的值会覆盖旧的值，从而达到去重目的（保留最后一个）
// 如果希望保留第一个出现的，可以在 set 之前检查 uniqueMap.has(item.trip_class)
if (!uniqueMap.has(item.trip_class)) { // 确保保留第一个出现的对象
uniqueMap.set(item.trip_class, item);
}
});
// 将 Map 的值转换为数组
return Array.from(uniqueMap.values());
}
}解释：
- 我们创建一个新的Map实例。
- 遍历原始flights数组。
- 对于每个item，我们使用item.trip_class作为Map的键，并将整个item对象作为值存储起来。
- 由于Map的键是唯一的，如果遇到重复的trip_class，uniqueMap.set()操作会覆盖之前的值（如果if条件不加，则保留最后一个；加上if条件则保留第一个）。
- 最后，Array.from(uniqueMap.values())将Map中存储的所有值（即去重后的对象）转换为一个新的数组。
方案三：使用 Set 和 filter
虽然Set本身只能存储唯一的值，但它不能直接存储唯一的对象（因为对象是引用类型，即使内容相同，引用不同也被认为是不同的）。不过，我们可以结合Set来存储已见的trip_class值，然后用filter来构建新数组。
computed: {
flights() {
return this.$store.getters.getFlights;
},
flightsClasses() {
const seenTripClasses = new Set();
return this.flights.filter(item => {
if (!seenTripClasses.has(item.trip_class)) {
seenTripClasses.add(item.trip_class);
return true; // 保留此元素
}
return false; // 过滤掉此元素
});
}
}解释：
- 创建一个Set来存储所有已经处理过的trip_class值。
- 使用filter方法遍历flights数组。
- 对于每个item，检查其trip_class是否已存在于seenTripClasses中。
- 如果不存在，则将其添加到seenTripClasses中，并返回true（表示保留该元素）。
- 如果已存在，则返回false（表示过滤掉该元素）。
Vuex集成注意事项
在Vue组件的computed属性中使用上述逻辑是处理Vuex状态的推荐方式。computed属性具有缓存机制，只有当其依赖项（如this.$store.getters.getFlights）发生变化时，才会重新计算。这确保了性能优化，避免了不必要的重复计算。
-
Getter的使用： 确保你的Vuex store中有一个getter来暴露原始的flights数组，例如：
// store/modules/flights.js const state = { allFlights: [] }; const getters = { getFlights: (state) => state.allFlights }; const mutations = { setFlights: (state, flights) => { state.allFlights = flights; } }; export default { state, getters, mutations // ... actions }; 数据不可变性： 上述所有方法都会返回一个新的数组，而不是修改原始数组。这符合Vue和Vuex的数据不可变性原则，有助于避免意外的副作用和更清晰的状态管理。
总结
从对象数组中根据特定键值去重是一个常见的编程任务。理解各种方法的优缺点并选择最适合的方案至关重要。
- reduce方法 提供了灵活的累加逻辑，但内部的find操作在大型数组中可能效率较低。
- Map对象 是处理这种去重场景的首选，因为它提供了接近O(1)的查找速度，在性能上表现优秀。
- Set结合filter 也是一个可行的方案，其可读性良好，性能也优于纯reduce加find。
在Vuex应用中，将这些去重逻辑封装在computed属性中，可以充分利用Vue的响应式系统和缓存机制，确保数据处理的高效和准确。选择哪种方法取决于你的具体需求、数据量以及对代码可读性和性能的权衡。
