如何在JS/React中合并同spanid的字典数组文本且保持顺序

原始数据：

Record= [ { "tid":1, "token_text": "Canis", "spanid": 1, "label": "Name" }, { "tid":2, "token_text": "Familiaris", "spanid": 1, "label": "Name" }, { "tid":3, "token_text": "is" }, { "tid":4, "token_text": "the" }, { "tid":5, "token_text": "scientific" }, { "tid":6, "token_text": "name" }, { "tid":7, "token_text": "of" }, { "tid":8, "token_text": "dog", "spanid": 2, "label": "species" }, { "tid": 9, "token_text": "." }] 

需求：

• 将拥有相同spanid的元素的token_text拼接为空格分隔的字符串
• tid和label沿用该spanid首次出现时的对应值
• 保持数组元素顺序与原数组完全一致（按tid排序的顺序）

预期输出：

Record = [ { tid: 1, token_text: "Canis Familiaris", spanid: 1, label: "Name" }, { tid: 3, token_text: "is" }, { tid: 4, token_text: "the" }, { "tid":5, "token_text": "scientific" }, { "tid":6, "token_text": "name" }, { "tid":7, "token_text": "of" }, { "tid":8, "token_text": "dog", "spanid": 2, "label": "species" }, { "tid": 9, "token_text": "." }]

遇到的问题：使用reduce直接按spanid分组会打乱元素顺序，不符合要求。

核心逻辑是遍历原数组时实时跟踪当前合并组，避免提前分组导致顺序混乱：

• 用临时变量保存当前正在合并的同spanid组信息
• 遍历每个元素时，判断是否属于当前组：是则拼接文本，否则先将当前组存入结果，再初始化新组
• 无spanid的元素直接存入结果，存入前需先处理完当前未完成的合并组

实现代码（JS/React通用）：

const mergeBySpanId = (records) => {
  const result = [];
  let currentGroup = null;

  for (const item of records) {
    if ('spanid' in item) {
      if (currentGroup && currentGroup.spanid === item.spanid) {
        // 同组元素，拼接token_text
        currentGroup.token_text += ` ${item.token_text}`;
      } else {
        // 新组，先把之前的组推入结果数组
        if (currentGroup) {
          result.push(currentGroup);
        }
        // 初始化新组，保留首次出现的tid、label
        currentGroup = {
          tid: item.tid,
          token_text: item.token_text,
          spanid: item.spanid,
          label: item.label
        };
      }
    } else {
      // 无spanid的元素，先处理当前合并组（如果存在）
      if (currentGroup) {
        result.push(currentGroup);
        currentGroup = null;
      }
      // 直接加入结果数组
      result.push({ ...item });
    }
  }

  // 处理遍历结束后剩余的合并组
  if (currentGroup) {
    result.push(currentGroup);
  }

  return result;
};

// 测试示例
const originalRecord = [ { "tid":1, "token_text": "Canis", "spanid": 1, "label": "Name" }, { "tid":2, "token_text": "Familiaris", "spanid": 1, "label": "Name" }, { "tid":3, "token_text": "is" }, { "tid":4, "token_text": "the" }, { "tid":5, "token_text": "scientific" }, { "tid":6, "token_text": "name" }, { "tid":7, "token_text": "of" }, { "tid":8, "token_text": "dog", "spanid": 2, "label": "species" }, { "tid": 9, "token_text": "." }];

const mergedRecord = mergeBySpanId(originalRecord);
console.log(mergedRecord);

这段代码严格遵循原数组顺序，同时完成同spanid元素的合并，完全符合需求。

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