React数组处理：检查重复ID并合并对象，key转1/0状态字段

需求说明 #

需要把数组中相同ID的对象合并，将原对象的key字段转为新对象的属性：

• 该ID下存在对应的key，属性值设为1
• 不存在的预设属性（比如edit、delete），属性值设为0

实现思路 #

直接用map逐个比较相邻元素的方式局限性很大，没法覆盖所有同ID的情况。更高效的方式是先用分组把同ID的key收集起来，再根据预设的权限属性生成最终对象：

1. 先定义所有需要的权限属性列表（对应示例里的view、add、edit、delete）
2. 用reduce方法按ID分组，收集每个ID对应的所有key
3. 把分组后的对象转为数组，遍历权限列表设置每个属性的取值

完整实现代码 #

const App = () => {
    const arr = [
      { id: 4, key: "view" },
      { id: 4, key: "add" },
      { id: 7, key: "view" },
      { id: 7, key: "add" },
      { id: 4, key: "edit" }
    ];

    // 定义所有需要的权限属性
    const allPermissions = ['view', 'add', 'edit', 'delete'];

    // 第一步：按ID分组，收集每个ID对应的key集合
    const groupedById = arr.reduce((acc, item) => {
        // 如果当前ID还没在分组里，初始化一个空集合
        if (!acc[item.id]) {
            acc[item.id] = {
                id: item.id,
                keys: new Set()
            };
        }
        // 将当前key加入集合（自动去重）
        acc[item.id].keys.add(item.key);
        return acc;
    }, {});

    // 第二步：转换为最终的结果数组
    const result = Object.values(groupedById).map(group => {
        // 遍历所有权限属性，设置值为1或0
        const permissionProps = allPermissions.reduce((props, permission) => {
            props[permission] = group.keys.has(permission) ? 1 : 0;
            return props;
        }, {});
        // 合并ID和权限属性
        return {
            id: group.id,
            ...permissionProps
        };
    });

    // 可打印结果验证
    console.log(result);

    return (
        <div></div>
    );
};

代码说明 #

• reduce分组：用对象作为累加器，键是ID，值里存ID和对应的key集合（用Set自动去重，避免重复添加同一个key）
• 生成结果数组：遍历分组后的每个ID，对每个权限属性判断是否存在于key集合中，存在设1，否则设0
• 这种方式不管数组里同ID的元素数量、顺序如何，都能正确合并，比相邻元素对比的逻辑更可靠

内容的提问来源于stack exchange，提问作者phu.duongquoc