JavaScript：匹配对象数组值并为另一对象数组赋值的实现问题

问题背景 #

现有两个独立的对象数组：

const pageContent = 
[
    {
        header: 'title 1',
        subHeader: [ 'subtitle 1']
    },
    {
        header: 'title 2',
        subHeader: [  ]
    },
    {
        header: 'title 3',
        subHeader: [ 'subtitle 2', 'subtitle 3', 'subtitle 4' ]
    }
]

const subPageContent = 
[
    {
        masterHeader: ' ', // 应对应 header: 'title 1'
        header: [ 'subtitle 1' ]
    },
    {
        masterHeader: ' ', // 应对应 header: 'title 3'
        header: [ 'subtitle 2' ]
    },
    {
        masterHeader: ' ', // 应对应 header: 'title 3'
        header: [ 'subtitle 3' ]
    },
    {
        masterHeader: ' ', // 应对应 header: 'title 3'
        header: [ 'subtitle 4' ]
    }
]

编辑说明：subPageContent对象曾定义错误。

需求是为subPageContent中每个元素的masterHeader赋值，值为pageContent中对应subtitle所属的header字段值。原有的查找函数仅在subHeader数组只有一个元素时有效，嵌套循环版本存在索引错误问题。

错误分析 #

原函数问题 #

第一个search函数中，使用array[i].subHeader[i]进行匹配，这是错误的——外层循环的索引i和subHeader数组的索引不应该绑定，当i大于subHeader数组长度时会导致读取undefined。

嵌套循环的问题 #

searchTwo函数存在两处关键错误：

1. 内层循环条件j < array[j].length错误，array[j]是pageContent的元素对象，不是数组，应该改为array[i].subHeader.length
2. 判断条件array[j].subHeader[j] === searchTerm混淆了外层索引i和内层索引j，正确应为array[i].subHeader[j] === searchTerm

正确实现方案 #

方案一：构建映射表（高效推荐） #

先提前构建subtitle到对应masterHeader的映射表，之后批量赋值时直接查表，避免重复遍历pageContent，适合数据量较大的场景：

// 构建subtitle与masterHeader的映射表
const subtitleMap = {};
pageContent.forEach(pageItem => {
  pageItem.subHeader.forEach(subtitle => {
    subtitleMap[subtitle] = pageItem.header;
  });
});

// 批量处理subPageContent
subPageContent.forEach(subItem => {
  // 取subItem.header数组的唯一元素作为查找项
  const targetSubtitle = subItem.header[0];
  // 赋值，找不到则设为空字符串（可根据需求调整）
  subItem.masterHeader = subtitleMap[targetSubtitle] || '';
});

方案二：直接遍历查找（直观易理解） #

如果数据量较小，也可以直接在遍历subPageContent时，逐个查找对应的masterHeader：

subPageContent.forEach(subItem => {
  const targetSubtitle = subItem.header[0];
  // 遍历pageContent查找匹配项
  for (const pageItem of pageContent) {
    if (pageItem.subHeader.includes(targetSubtitle)) {
      subItem.masterHeader = pageItem.header;
      break; // 找到后立即停止遍历，提升效率
    }
  }
});

执行上述代码后，subPageContent的masterHeader会被正确赋值为对应的title值。

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