JavaScript中对比数组列表与对象匹配id提取对应名称渲染到DOM的问题

首先先修正你给出的示例数据为合法的JavaScript格式：

const a = [[28,32], [28,32,56]];
const b = [
  {id:28, name:'action'},
  {id:32, name:'horror'},
  {id:56, name:'comedy'}
];

核心实现逻辑 #

• 先把配置数组b转换为id到name的映射对象，提升匹配效率，同时方便后续校验
• 遍历二维数组a的每一项，逐个匹配id，过滤掉匹配失败的无效id
• 把匹配到的name首字母大写后拼接为标签文本，按要求插入DOM节点，不同数组项的渲染结果之间插入分隔线

完整可运行代码 #

// 1. 生成id-name映射表
const idToNameMap = b.reduce((map, item) => {
  map[item.id] = item.name;
  return map;
}, {});

// 2. 处理数组并渲染到DOM，这里默认插入body，可替换为你需要的目标DOM节点
const targetContainer = document.body;
a.forEach((idList, index) => {
  // 校验+匹配id，生成符合格式的标签文本
  const labelContent = idList
    .filter(id => idToNameMap.hasOwnProperty(id)) // 校验逻辑：仅保留匹配成功的id
    .map(id => {
      const name = idToNameMap[id];
      // 首字母大写，匹配期望的输出格式
      return name.charAt(0).toUpperCase() + name.slice(1);
    })
    .join(' ');

  // 插入标签文本
  targetContainer.appendChild(document.createTextNode(labelContent));

  // 非最后一项时插入换行+分隔线+换行
  if (index !== a.length - 1) {
    targetContainer.appendChild(document.createElement('br'));
    targetContainer.appendChild(document.createElement('hr'));
    targetContainer.appendChild(document.createElement('br'));
  }
});

执行上述代码后就会生成你要求的DOM结构，渲染效果和你给出的预期输出完全一致。

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