如何从Listener Event的data参数构建目标JavaScript对象？

我有一个Listener Event，触发时会传入参数data，其数据如下：

{field_id: 13, meta_value: 'a', rowid: 0}
{field_id: 13, meta_value: 'ab', rowid: 0}
{field_id: 13, meta_value: 'abc', rowid: 0}
{field_id: 14, meta_value: 'd', rowid: 0}
{field_id: 14, meta_value: 'de', rowid: 0}
{field_id: 14, meta_value: 'def', rowid: 0}
{field_id: 13, meta_value: 'b', rowid: 1}
{field_id: 13, meta_value: 'bb', rowid: 1}
{field_id: 13, meta_value: 'bbb', rowid: 1}
{field_id: 14, meta_value: 'c', rowid: 1}
{field_id: 14, meta_value: 'cc', rowid: 1}
{field_id: 14, meta_value: 'ccc', rowid: 1}

希望将其转换为如下结构的对象（注：修正了原目标结构的语法错误，将内部对象改为数组，符合JS语法规范）：

{
    0: [
        {
            field_id: 13,
            meta_value: 'abc'
        },
        {
            field_id: 14,
            meta_value: 'def'
        }
    ],
    
    1: [
        {
            field_id: 13,
            meta_value: 'bbb'
        },
        {
            field_id: 14,
            meta_value: 'ccc'
        }
    ]
}

我曾尝试使用以下代码：

outputValue[rowid][field_id] = data;

但该方法会创建包含大量空索引的数组。我想要构建一个以rowid为键的对象，若存在匹配的field_id则覆盖对应的项，否则创建包含{field_id, meta_value}的新项。

方法一：直接维护数组结构（匹配目标输出） #

初始化空对象存储结果，每次处理数据时检查当前rowid对应的数组，找到则更新，找不到则新增：

// 初始化结果对象
const outputValue = {};

// Listener事件处理函数
function handleData(data) {
  const { rowid, field_id, meta_value } = data;
  
  // 若当前rowid不存在，创建空数组
  if (!outputValue[rowid]) {
    outputValue[rowid] = [];
  }
  
  // 查找当前rowid下是否已有相同field_id的项
  const existingItem = outputValue[rowid].find(item => item.field_id === field_id);
  
  if (existingItem) {
    // 存在则覆盖meta_value
    existingItem.meta_value = meta_value;
  } else {
    // 不存在则添加新项
    outputValue[rowid].push({ field_id, meta_value });
  }
}

方法二：先以field_id为键存储（覆盖更高效），最后转成目标结构 #

如果数据量较大，用field_id作为rowid下的键可以提升覆盖效率，最后统一转成数组结构：

// 初始化结果对象
const outputValue = {};

function handleData(data) {
  const { rowid, field_id, meta_value } = data;
  
  // 若当前rowid不存在，创建空对象
  if (!outputValue[rowid]) {
    outputValue[rowid] = {};
  }
  
  // 直接覆盖或添加field_id对应的项
  outputValue[rowid][field_id] = { field_id, meta_value };
}

// 所有数据处理完成后，转换为目标数组结构
const finalOutput = {};
for (const id in outputValue) {
  finalOutput[id] = Object.values(outputValue[id]);
}

这两种方法都不会产生空索引数组，且能实现相同field_id的项自动覆盖，最终得到你需要的结构。

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