Typescript 中含国家城市字段的对象数组的重复城市高效去重方案

优化方案 #

你完全可以用一行代码实现需求，且性能比现有实现高得多：

const deduplicatedCountries = result.data.map(item => ({...item, cities: [...new Set(item.cities)]}));

逻辑说明

• 直接用map遍历原国家数组，通过扩展运算符保留每个国家对象的原有字段，仅修改cities字段
• 城市去重直接使用ES6的Set数据结构，Set会自动剔除重复值，查找效率为O(1)，远高于Array.includes的O(n)实现，城市数量越多性能优势越明显
• 最后用扩展运算符将Set转回普通数组，最终输出结构完全符合Array<{country: string, cities: Array<string>}>格式，不需要额外的reduce做数组合并，原实现里嵌套数组再打平的操作属于冗余逻辑，可以直接删除。

替换后的完整代码

getCountries = async () => {
    if(!this.mounted) return;

    interface typeData {
        data: Array<{country: string, cities: Array<string>}>;
        error: boolean;
        msg: string;
    }
    const result: typeData = await this.data.GetCountries();

    const deduplicatedCountries = result.data.map(item => ({...item, cities: [...new Set(item.cities)]}));
    deduplicatedCountries && this.setState({data: {...this.state.data, countries: deduplicatedCountries}})
}

额外优化说明：原setState里手动保留weather字段的逻辑，可以直接用扩展运算符...this.state.data替换，写法更简洁。

内容的提问来源于stack exchange，提问作者Martin