JS数组对象中去重的方法

74 阅读1分钟

需求

展示List中的一个设备的最高报警等级, 这里有一个需求:需要去重和排列出最高等级;

造点真实数据

const demoList = [
  {
    id: "1",
    deviceId: "SZAFTMSLZDFT00001",
    eventLevelName: "三级",
    eventLevelColor: "#F78DD3",
    deviceName: "电扶梯01",
  },
  {
    id: "2",
    deviceId: "SZAFTMSZSPJ00009",
    eventLevelName: "三级",
    eventLevelColor: "#F78DD3",
    deviceName: "票房售票机_01",
  },
  {
    id: "3",
    deviceId: "SZAFATMSZZJ00021",
    eventLevelName: "三级",
    eventLevelColor: "#F78DD3",
    deviceName: "双向闸机01",
  },
  {
    id: "6",
    deviceId: "SZAFATMSZZJ00021",
    eventLevelName: "四级",
    eventLevelColor: "#FFFFFF",
    deviceName: "双向闸机01",
  },
  {
    id: "4",
    deviceId: "SZAFATMSZZJ00001",
    eventLevelName: "三级",
    eventLevelColor: "#F78DD3",
    deviceName: "自动检票机_01",
  },
  {
    id: "5",
    deviceId: "SZAFATMSZZJ00021",
    eventLevelName: "二级",
    eventLevelColor: "#FFFF00",
    deviceName: "双向闸机01",
  },
];

方法一:/** 对象访问属性的方法, 判断属性值是否存在 */

// 首先处理下list中的等级转化为数字
const levelCondition = new Map([
  ["一级", "1"],
  ["二级", "2"],
  ["三级", "3"],
  ["四级", "4"],
]);

demoList.forEach((e) => {
  e.eventLevelName = levelCondition.get(e.eventLevelName);
});

// 根据需求,要保留最高等级,一级最高二级其次,以此类推,按照eventLevelName进行升序
demoList.sort((a, b) => {
  return a.eventLevelName - b.eventLevelName;
});

// 然后开始去重
const newArr = [];
let obj = {};
demoList.forEach((item, index) => {
  if (!obj[demoList[index].deviceId]) {
    newArr.push(item);
    obj[demoList[index].deviceId] = true;
  }
});
console.log(newArr);

方法二:/** Map()的方式(简洁写法) */

// 还是先处理下list跟上面步骤一样的, 这里省略了...得出demoList

// 然后开始去重
const deviceMap = new Map();
const newArr = demoList.filter(
  (v) => !deviceMap.has(v.deviceId) && deviceMap.set(v.deviceId, v)
);
console.log(newArr);
   

方法三:/** 另外一种Map()的方式(更简洁写法) */

// 上述处理list步骤省略, 直接去重, 排序

const levelCondition = new Map([
      ["一级", "1"],
      ["二级", "2"],
      ["三级", "3"],
      ["四级", "4"],
    ]);

const deviceMap = new Map();
demoList.map(async (item) => {
  if (!deviceMap.get(item?.deviceId)) {
    deviceMap.set(item?.deviceId, item);
  } else {
    const device = deviceMap.get(item?.deviceId);
    if (
      levelCondition.get(device?.eventLevelName) >
      levelCondition.get(item?.eventLevelName)
    ) {
      deviceMap.set(item?.deviceId, item);
    }
  }
});
console.log(deviceMap);

总结

以上JS方法纯属个人没事拿来练练手, 如写错欢迎交流指正。