如何合并数组中同state的cities项并去重，生成指定输出？

需求：合并数组中state字段相同的元素的cities字段，移除重复值，生成目标输出。

输入数组 #

[
    {
        "state": "delhi",
        "cities": "central delhi"
    },
    {
        "state": "jharkhand",
        "cities": "dumka"
    },
    {
        "state": "jharkhand",
        "cities": "deoghar"
    },
    {
        "state": "jharkhand",
        "cities": "jasidih"
    },
    {
        "state": "karnataka",
        "cities": "bail hongal"
    },
    {
        "state": "ladakh",
        "cities": "kargil"
    }
]

尝试的代码片段 #

arr1.map((row, index) => ({
    itemLabel: arr1.state,
    itemValue: arr1.cities - arr2[index].cities
}))

期望输出 #

[
    {
        "state": "delhi",
        "cities": "central delhi"
    },
    {
        "state": "jharkhand",
        "cities": ["dumka","deoghar","jasidih"]
    },
    {
        "state": "karnataka",
        "cities": "bail hongal"
    },
    {
        "state": "ladakh",
        "cities": "kargil"
    }
]

解决方案 #

可以使用Array.reduce()方法实现分组合并，逻辑如下：

1. 遍历数组，以state为键构建分组对象，收集对应所有cities值
2. 对每个分组的cities去重后，判断数量：单个值保留字符串格式，多个值保留数组格式
3. 将分组对象转换为目标数组格式

代码实现：

const inputArr = [
    { "state": "delhi", "cities": "central delhi" },
    { "state": "jharkhand", "cities": "dumka" },
    { "state": "jharkhand", "cities": "deoghar" },
    { "state": "jharkhand", "cities": "jasidih" },
    { "state": "karnataka", "cities": "bail hongal" },
    { "state": "ladakh", "cities": "kargil" }
];

const result = Object.values(inputArr.reduce((acc, curr) => {
    // 初始化当前state的分组
    if (!acc[curr.state]) {
        acc[curr.state] = { state: curr.state, cities: [] };
    }
    // 去重添加cities值
    if (!acc[curr.state].cities.includes(curr.cities)) {
        acc[curr.state].cities.push(curr.cities);
    }
    // 调整cities的格式
    if (acc[curr.state].cities.length === 1) {
        acc[curr.state].cities = acc[curr.state].cities[0];
    }
    return acc;
}, {}));

console.log(result);

这段代码会输出符合预期的结果，同时处理了cities值重复的场景。

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