filter本身不能去重，需配合set或reduce对筛选结果去重；如选中“北京”后，先filter再map city并用[...new set()]得不重复市列表。
用 filter 本身不能直接去重，它只是筛选符合条件的元素；要保证省市区下拉列表数据不重复，关键是在筛选前或筛选后对原始数据做去重处理。常见做法是：先用 filter 获取目标层级数据（比如所有“北京市”的区），再用 Set 或 reduce 去重。
确保“市”列表不重复（基于省筛选后）
假设你有一个全国省市区扁平数组，每项含 province、city、district 字段：
const areas = [
{ province: '北京', city: '北京', district: '朝阳区' },
{ province: '北京', city: '北京', district: '海淀区' },
{ province: '广东', city: '广州', district: '天河区' },
{ province: '广东', city: '广州', district: '越秀区' },
{ province: '广东', city: '深圳', district: '南山区' }
];
选中“北京”后，想得到不重复的“市”列表（虽然直辖市只有一个市，但逻辑要通用）：
- 先
filter出属于“北京”的所有记录 - 再提取
city字段，用[...new Set(...)]去重
const beijingCities = [...new Set( areas.filter(item => item.province === '北京').map(item => item.city) )]; // ['北京']
确保“区”列表不重复（基于省市筛选后）
选中“北京-北京”后，获取所有区，并自动去重（防止同一区出现多次）：
- 用
filter精确匹配province和city - 用
map提取district - 用
Set消除重复项，转回数组
const districts = [...new Set(
areas
.filter(item => item.province === '北京' && item.city === '北京')
.map(item => item.district)
)]; // ['朝阳区', '海淀区']（无重复）
更健壮的写法：封装去重筛选函数
避免每次手写 Set，可封装一个工具函数：
const uniqueFilter = (list, predicate, key) => {
return [...new Set(
list.filter(predicate).map(item => item[key])
)];
};
// 使用示例：
const citiesInBeijing = uniqueFilter(areas,
item => item.province === '北京',
'city'
); // ['北京']
const districtsInGuangzhou = uniqueFilter(areas,
item => item.province === '广东' && item.city === '广州',
'district'
); // ['天河区', '越秀区']
注意：后端数据本身应尽量规范
filter + Set 是前端补救手段。理想情况是：
- 后端返回的省市区数据已按层级结构组织（如嵌套树形），而非全量扁平
- 若必须扁平，后端应确保同名行政区划编码唯一（如用
adcode区分）、名称标准化（避免“朝阳区”和“朝阳”混用） - 前端展示时，优先用编码匹配，名称仅作显示，避免纯靠字符串去重出错
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
