JavaScript/Vuex：高效过滤对象数组，确保特定键值唯一性-js教程-PHP中文网

JavaScript/Vuex：高效过滤对象数组，确保特定键值唯一性

霞舞

发布： 2025-07-22 20:22:11

原创

217人浏览过

JavaScript/Vuex：高效过滤对象数组，确保特定键值唯一性

本文旨在探讨在JavaScript环境中，尤其是在Vuex应用中，如何高效地从一个对象数组中筛选出具有特定键值唯一性的元素。我们将详细分析常见的过滤方法，包括reduce、Map和Set的运用，并提供具体的代码示例，帮助开发者正确实现数据去重，避免常见错误，并确保代码的健壮性和性能。

在前端开发中，我们经常会遇到需要处理数组数据，并从中提取出符合特定条件（例如某个属性值唯一）的元素。当数据来源于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;
    }
}

登录后复制

解释：

WeShop唯象

WeShop唯象是国内首款AI商拍工具，专注电商产品图片的智能生成。

113

查看详情

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

登录后复制