如何在Vuex中按trip_class键过滤得到唯一对象数组？

我需要生成一个trip_class键值不重复的新对象数组，但通过Vuex计算属性处理初始数组后，还是得到30个重复项，而非预期的1或2个。

输入数组示例 #

[
    {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'}
]

当前使用的computed代码 #

computed: {
    flights() {
        return this.$store.getters.getFlights;
    },
    flightsClasses() {
        console.log(this.flights)    // returns an array of objects
        let flightsClasses = this.flights 
          flightsClasses.reduce((acc, obj)=>{
            var exist = acc.find((flightClass) => obj.trip_class === flightClass );
            if(!exist){
              acc.push(obj);
            }
            return acc;
          },[]);

        console.log('flightsClasses',flightsClasses)    // returns repeatable items array
        return flightsClasses
    },
}

问题分析与修正代码 #

你的去重逻辑有两个关键错误：

1. 未接收reduce的返回值：你只是调用了flightsClasses.reduce()，但没有把reduce处理后的结果重新赋值给flightsClasses，所以最终返回的还是原数组。
2. find判断条件错误：acc.find((flightClass) => obj.trip_class === flightClass)里，flightClass是数组中的对象，你应该比较flightClass.trip_class，而不是直接和整个对象对比，这会导致永远找不到已存在的项，所有对象都会被重复添加。

修正后的代码：

computed: {
    flights() {
        return this.$store.getters.getFlights;
    },
    flightsClasses() {
        console.log(this.flights)
        // 接收reduce的返回值，同时修正find的判断逻辑
        const flightsClasses = this.flights.reduce((acc, obj) => {
            // 检查acc中是否已有相同trip_class的对象
            const exist = acc.find(item => obj.trip_class === item.trip_class);
            if (!exist) {
                acc.push(obj);
            }
            return acc;
        }, []);

        console.log('flightsClasses', flightsClasses)
        return flightsClasses;
    },
}

如果数组较大，想用更高效的方式去重（且保留每个trip_class最后出现的项），可以改用Map实现：

flightsClasses() {
    const classMap = new Map();
    // 遍历数组，用trip_class作为key，后续相同key会覆盖之前的，保留最后一个
    this.flights.forEach(obj => {
        classMap.set(obj.trip_class, obj);
    });
    // 把Map的值转为数组返回
    return Array.from(classMap.values());
}

内容的提问来源于stack exchange，提问作者user21728832