代码优雅化进阶学习（三）

需求详情

如下图：
实现类似结构，首先按照 status 状态的值，分为全部 已实现 和 未实现；再按照 categoryId 来展示各类别

难点

1. 如何保证 status 的扩展性和可维护性
2. 如何保证若新增分类，即新增 categoryId 的可维护性

最佳实现效果

• 新增 categoryId ，不需要改内部逻辑代码，只需新增配置，就可以自动实现 新增分类的对应数据
• 新增 status，不需要改内部逻辑代码，只需新增配置，就可以自动实现 新增状态的对应数据

实现

export enum IStatus {/*** 未实现*/NotObtained = 0,/*** 已实现*/Obtained = 1
}interface ICategory{title: string;data: IListItemTpe[];
}const CATEGORY_MAP: { [_: string]: string } = {1: "苹果",2: "香蕉"
};export function formatData(list: IListItemTpe[] | null, status: IStatus | null): ICategory[] {const categoryMap: { [_: string]: IListItemTpe[] } = {};list?.filter((item) => item.status === status).forEach((item) => {const { categoryId } = item;if (!categoryMap[categoryId!]) categoryMap[categoryId!] = [];categoryMap[categoryId!].push(item);});return Object.keys(categoryMap).map((key) => {return {title: CATEGORY_MAP[key],data: categoryMap[key]};});
}

优点

• 用 map 取代了多个 if-else ，将所有 categoryId 作为 map 的key，value 值就是对应的 数据列表
• 用 另一个map 来做 categoryId 和 title 的 一一对应，相当于是一个配置文件，当新增 categoryId 时，直接在 该 map 里面进行添加配置
• 相当于使用了两个及多个 map 来避免多重 if else，并且满足了可维护性

前端小菜鸟持续学习中，欢迎指正！

KTV音响