JavaScript/Vuex 中基于指定键值对数组对象进行高效去重

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

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

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

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

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