需求
展示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方法纯属个人没事拿来练练手, 如写错欢迎交流指正。