如何在JS中合并同名字段的角色数组？React场景实现

你可以通过遍历writer数组，借助对象分组同名条目，再将分组结果转回数组来实现需求，具体实现如下：

原始数据 #

const artistList = {
    artist: [
        {name: 'Quirby', role: 'main'},
        {name: 'Jose', role: 'feature'}
    ],
    writer: [
        {name: 'Erik', role: 'publisher'},
        {name: 'Cairo', role: 'composer'},
        {name: 'Erik', role: 'song_writer'}
    ]
}

转换代码 #

// 处理writer数组的工具函数
const mergeWriterRoles = (writers) => {
    const grouped = {};
    writers.forEach(item => {
        if (!grouped[item.name]) {
            // 首次遇到该name，直接初始化条目
            grouped[item.name] = {
                name: item.name,
                role: item.role
            };
        } else {
            // 已存在同名条目，合并role
            const existing = grouped[item.name];
            if (typeof existing.role === 'string') {
                existing.role = [existing.role];
            }
            existing.role.push(item.role);
        }
    });
    // 将分组对象转为数组返回
    return Object.values(grouped);
};

// 生成转换后的最终对象
const transformedArtistList = {
    ...artistList,
    writer: mergeWriterRoles(artistList.writer)
};

逻辑说明 #

1. 用临时对象grouped按name字段分组存储writer条目，避免重复遍历；
2. 遍历原始writer数组时，判断当前name是否已存在：
   • 不存在则直接存入对象，role保留原始字符串格式；
   • 已存在则将原有的字符串role转为数组（如果还不是数组），再追加新的role值；
3. 最后通过Object.values()将分组对象转为数组，替换原对象中的writer字段。

转换后的结果符合需求：

{
    artist: [
        {name: 'Quirby', role: 'main'},
        {name: 'Jose', role: 'feature'}
    ],
    writer: [
        {name: 'Erik', role: ['publisher', 'song_writer']},
        {name: 'Cairo', role: 'composer'}
    ]
}

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