ReactJS中如何从指定对象生成特定结构的对象数组？

需求说明 #

给定一个parent对象，其中info、edate、xdate的value数组长度不固定，需按以下规则生成目标对象数组：

• Label映射：每个项的Label为原模块Label加上序号（如Parent Info 1、edate 2），序号从1开始，对应数组的索引位置
• Value映射：
  • Parent Info项的Value对应parent.info.value中对应索引元素的class属性
  • edate项的Value直接取parent.edate.value中对应索引的元素
  • xdate项的Value直接取parent.xdate.value中对应索引的元素
• 当任意一个模块的value数组新增元素时，另外两个模块需对应生成同序号的项（若原数组无对应元素，可留空或按需处理）

原Parent对象结构 #

const parent = {
    "info": {
        "path": "parent-info",
        "label": "Parent Info",
        "value": [
            {
                "rowIndex": 0,
                "class": "Y",
                "classPath": "parent-info"
            },
            {
                "rowIndex": 1,
                "class": "N",
                "classPath": "parent-drugAltInfo"
            }
        ]
    },
    "edate": {
        "path": "parent-edate",
        "label": "eDate",
        "value": ["2022-08-04", "2022-08-12"]
    },
    "xdate": {
        "path": "parent-xdate",
        "label": "xDate",
        "value": ["2022-08-05", "2022-08-16"]
    }
};

实现代码 #

function transformParent(parent) {
    const result = [];
    // 获取三个数组的最大长度，确保所有元素都被处理
    const maxLength = Math.max(
        parent.info.value.length,
        parent.edate.value.length,
        parent.xdate.value.length
    );

    for (let i = 0; i < maxLength; i++) {
        // 生成Parent Info项
        result.push({
            label: `${parent.info.label} ${i + 1}`,
            value: parent.info.value[i]?.class || ''
        });
        // 生成edate项
        result.push({
            label: `${parent.edate.label} ${i + 1}`,
            value: parent.edate.value[i] || ''
        });
        // 生成xdate项
        result.push({
            label: `${parent.xdate.label} ${i + 1}`,
            value: parent.xdate.value[i] || ''
        });
    }

    return result;
}

// 调用函数并输出结果
const transformedArray = transformParent(parent);
console.log(transformedArray);

输出结果 #

[
    { label: 'Parent Info 1', value: 'Y' },
    { label: 'eDate 1', value: '2022-08-04' },
    { label: 'xDate 1', value: '2022-08-05' },
    { label: 'Parent Info 2', value: 'N' },
    { label: 'eDate 2', value: '2022-08-12' },
    { label: 'xDate 2', value: '2022-08-16' }
]

代码说明 #

1. 获取最大长度：通过Math.max获取三个value数组的最长长度，避免遗漏任何一个模块的元素
2. 循环生成项：遍历每个索引，依次生成对应序号的三个项
3. 容错处理：使用?.和|| ''处理数组长度不一致的情况，避免报错同时保证结果结构完整

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