React中如何将数组组成的对象转换为独立对象？

原始数据 #

"SUMMARY_TABLE": {
    "PRODUCT_CODE": [
        123,
        123,
        123,
        123,
        123
    ],
    "TYPE": [
        "CURRENT",
        "OPTIMAL",
        "MINIMUM",
        "MAXIMUM",
        "FUTURE"
    ],
    "LOT_SIZE": [
        268.0,
        268.0,
        268.0,
        268.0,
        500.0
    ]
}

期望输出 #

生成5个独立对象，每个对象使用对应索引的数组值，且键名转为小写下划线格式，示例如下：

{
    "product_code": 123,
    "type": "current",
    "lot_size": 268.0
}

尝试的代码（未得到预期结果） #

const data = Object.entries(selectedProductDetails.SUMMARY_TABLE).map(
    (k, v) => {
      let obj = {};
      return {
        ...obj, k: k[i++]
      }
    });

解决方案 #

你的代码逻辑方向有误：Object.entries().map()是遍历每个字段（PRODUCT_CODE、TYPE等），而我们需要按数组索引遍历，生成每个索引对应的完整对象。以下是正确实现：

// 提取目标数据
const summaryTable = selectedProductDetails.SUMMARY_TABLE;
// 获取所有字段的键值对
const fieldEntries = Object.entries(summaryTable);
// 确定要生成的对象数量（取任意一个数组的长度即可）
const itemCount = fieldEntries[0][1].length;

// 生成结果数组
const result = Array.from({ length: itemCount }, (_, index) => {
  return fieldEntries.reduce((obj, [fieldName, values]) => {
    // 将字段名转为小写下划线格式
    const key = fieldName.toLowerCase();
    // 处理TYPE字段的值转为小写，其他字段直接取对应索引的值
    obj[key] = fieldName === 'TYPE' ? values[index].toLowerCase() : values[index];
    return obj;
  }, {});
});

代码说明： #

1. 确定对象数量：通过第一个字段的数组长度，得到需要生成5个对象。
2. 按索引遍历：用Array.from创建对应长度的数组，每个位置对应一个索引。
3. 构建单个对象：对每个索引，通过reduce遍历所有字段，将字段名转小写下划线，对应索引的值赋值给对象，其中TYPE字段的值额外转为小写以匹配示例。
4. 最终结果：result即为包含5个目标对象的数组。

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