如何拆分含重复FieldIndex的对象数组为独立行结构？

原始数组 #

const originalArray = {
  Rows: [
    {
      RowValue: [
        { FieldIndex: '1', Value: 'Sample Item One' },
        { FieldIndex: '2', Value: 'Sample Item Two' },
        { FieldIndex: '3', Value: 'Sample Item Three' },
        { FieldIndex: '4', Value: 'Sample Item Four' },
        { FieldIndex: '1', Value: 'Another Sample Item One' },
        { FieldIndex: '2', Value: 'Another Sample Item Two' },
        { FieldIndex: '3', Value: 'Another Sample Item Three' },
        { FieldIndex: '4', Value: 'Another Sample Item Four' },
      ]
    },
    {
      RowValue: [
        { FieldIndex: '1', Value: 'Sample Object One' },
        { FieldIndex: '2', Value: 'Sample Object Two' },
        { FieldIndex: '3', Value: 'Sample Object Three' },
        { FieldIndex: '4', Value: 'Sample Object Four' },
        { FieldIndex: '1', Value: 'Another Sample Object One' },
        { FieldIndex: '2', Value: 'Another Sample Object Two' },
        { FieldIndex: '3', Value: 'Another Sample Object Three' },
        { FieldIndex: '4', Value: 'Another Sample Object Four' },
      ]
    }
  ]
}

期望结果 #

const originalArray = {
  Rows: [
    {
      RowValue: [
        { FieldIndex: '1', Value: 'Sample Item One' },
        { FieldIndex: '2', Value: 'Sample Item Two' },
        { FieldIndex: '3', Value: 'Sample Item Three' },
        { FieldIndex: '4', Value: 'Sample Item Four' }
      ]
    },
    {
      RowValue: [
        { FieldIndex: '1', Value: 'Another Sample Item One' },
        { FieldIndex: '2', Value: 'Another Sample Item Two' },
        { FieldIndex: '3', Value: 'Another Sample Item Three' },
        { FieldIndex: '4', Value: 'Another Sample Item Four' },
      ]
    },
    {
      RowValue: [
        { FieldIndex: '1', Value: 'Sample Object One' },
        { FieldIndex: '2', Value: 'Sample Object Two' },
        { FieldIndex: '3', Value: 'Sample Object Three' },
        { FieldIndex: '4', Value: 'Sample Object Four' }
      ]
    },
    {
      RowValue: [
        { FieldIndex: '1', Value: 'Another Sample Object One' },
        { FieldIndex: '2', Value: 'Another Sample Object Two' },
        { FieldIndex: '3', Value: 'Another Sample Object Three' },
        { FieldIndex: '4', Value: 'Another Sample Object Four' },
      ]
    }
  ]
}

尝试的代码（未达预期） #

const splitGridRows = (gridRows) => {
  const newRows = [];

  gridRows.forEach((gridRow) => {
    let newGridRow = {};
    let newRowValue = [];

    gridRow.RowValue.forEach((valueObj) => {
      const hasFieldData = newRowValue.find(
        (rValue) => rValue.FieldIndex === valueObj.FieldIndex
      );

      if (!hasFieldData) {
        newRowValue.push(valueObj);
        newGridRow = { RowValue: newRowValue };
      }
    });

    newRows.push(newGridRow);
  });

  return newRows;
};

问题分析 #

你之前的代码仅提取了每组RowValue里的第一组FieldIndex 1-4，未处理后续重复出现的1-4组合，最终结果只生成了和原始数组数量相同的Row，没有拆分出后续的独立行。

解决方案 #

通过遍历RowValue时，每收集完一组完整的FieldIndex（1-4）就生成一个新Row，然后重置临时存储继续处理下一组：

const splitGridRows = (gridRows) => {
  const newRows = [];

  gridRows.forEach((gridRow) => {
    let currentRowValue = [];
    const existingIndices = new Set();

    gridRow.RowValue.forEach((valueObj) => {
      if (!existingIndices.has(valueObj.FieldIndex)) {
        currentRowValue.push(valueObj);
        existingIndices.add(valueObj.FieldIndex);
      }

      // 收集完一组完整的1-4索引，生成新行并重置
      if (currentRowValue.length === 4) {
        newRows.push({ RowValue: [...currentRowValue] });
        currentRowValue = [];
        existingIndices.clear();
      }
    });

    // 处理可能剩余的不完整组（如果存在）
    if (currentRowValue.length > 0) {
      newRows.push({ RowValue: [...currentRowValue] });
    }
  });

  return newRows;
};

// 调用示例
const processedArray = { Rows: splitGridRows(originalArray.Rows) };
console.log(processedArray);

代码说明 #

1. 针对每个原始Row，初始化临时数组currentRowValue存储当前组的字段，用Set记录已添加的FieldIndex避免重复
2. 遍历每个字段对象，若索引未被记录则加入临时数组并标记
3. 当临时数组长度达到4（对应完整的1-4组），将其包装为新Row加入结果，然后重置临时数组和Set
4. 最后处理可能存在的不完整组（比如原始RowValue末尾有未凑齐4个的字段）

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