JavaScript查询多条角色人员记录换行展示去重问题咨询

问题根因 #

• 双重for循环导致数据重复：外层循环遍历角色数组，内层又循环了一遍角色长度的姓名数组，相当于每个角色都匹配了所有姓名，生成了笛卡尔积结果
• 换行失效是场景适配问题：如果输出到HTML页面，\n不会被识别为换行符，需要替换为<br>标签；如果输出到控制台/纯文本场景，\n可正常生效

修复方案 #

你的角色数组和人员姓名字段是同索引一一对应的关系，不需要嵌套循环，仅保留一层循环即可，按输出场景选择对应代码：

场景1：输出到HTML页面 #

let maker = "";
// 提前做边界校验，避免空值报错
if (data.ObjAssociatedPartyRole_tab?.length && data.ObjAssociatedPartyLocal_tab?.length) {
  // 同索引匹配，仅一层循环即可
  for(let i = 0; i < data.ObjAssociatedPartyRole_tab.length; i++) {
    maker += data.ObjAssociatedPartyRole_tab[i] + " : " + data.ObjAssociatedPartyLocal_tab[i] + "<br>";
  }
}

场景2：输出到控制台/纯文本 #

let maker = "";
if (data.ObjAssociatedPartyRole_tab?.length && data.ObjAssociatedPartyLocal_tab?.length) {
  for(let i = 0; i < data.ObjAssociatedPartyRole_tab.length; i++) {
    maker += data.ObjAssociatedPartyRole_tab[i] + " : " + data.ObjAssociatedPartyLocal_tab[i] + "\n";
  }
}

兼容优化（可选） #

如果两个数组长度可能不一致，可以取最小长度作为循环次数，避免数组越界：

const loopLength = Math.min(data.ObjAssociatedPartyRole_tab.length, data.ObjAssociatedPartyLocal_tab.length);
for(let i = 0; i < loopLength; i++) {
  // 拼接逻辑和上述对应场景一致
}

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