JavaScript：比较普通数组与嵌套数组，提取匹配项value至新数组

我有以下两个数组：

const arrayOne = [
 {id: '110'},
 {id: '202'},
 {id: '259'}
];

const arrayTwo = [
 {data: [{value: 'Alpha', id: '001'}]},
 {data: [{value: 'Bravo', id: '202'}]},
 {data: [{value: 'Charlie', id: '752'}]},
 {data: [{value: 'Delta', id: '202'}, {value: 'Sierra', id: '110'}]},
 {data: [{value: 'Echo', id: '937'}]}
];

需要创建一个新数组，将arrayOne里的id和arrayTwo中每个元素的data子数组里的id匹配，匹配成功就把对应的value放进新数组。示例期望结果是：

newArray = ['Bravo', 'Delta', 'Sierra']

我试了几段代码，但都没得到正确结果：

let result = arrayOne.map(el => {
  let found = arrayTwo.find(f => f.data.at(0)?.id == el.id)?.data.at(0)?.value;
  return { id: el.id, value: found ?? null};
});

const result = arrayTwo
  .map(obj => obj.data[0])
  .map(obj => (arrayOne.find(v => v.id === obj.id) && obj.value))

arrayOne.map(item => ({
   ...item,
   result: arrayTwo.filter(itemTwo => item.data.map(x => x.id).includes(itemTwo.id))
}));

你之前的代码主要问题是：

• 只检查了arrayTwo每个元素的data数组第一个元素，漏掉了后续的元素（比如第四个arrayTwo元素里的Sierra）
• 部分代码返回的结构和期望的纯value数组不符
• 第三段代码的匹配逻辑搞反了，导致筛选结果错误

高效实现方案（推荐） #

先把arrayOne的id存进集合提升查找速度，再扁平化arrayTwo的所有data元素，最后筛选匹配项提取value：

// 提取arrayOne的id集合，快速查找
const targetIds = new Set(arrayOne.map(item => item.id));
// 扁平化所有data子数组元素，筛选匹配项并提取value
const newArray = arrayTwo
  .flatMap(obj => obj.data)
  .filter(dataItem => targetIds.has(dataItem.id))
  .map(dataItem => dataItem.value);

console.log(newArray); // 输出 ['Bravo', 'Delta', 'Sierra']

基础嵌套遍历方案 #

如果不想用扁平化，直接嵌套遍历也能实现：

const targetIds = arrayOne.map(item => item.id);
const newArray = [];

// 遍历arrayTwo的每个元素
arrayTwo.forEach(obj => {
  // 遍历当前元素的data子数组
  obj.data.forEach(dataItem => {
    // 检查id是否在目标集合里
    if (targetIds.includes(dataItem.id)) {
      newArray.push(dataItem.value);
    }
  });
});

console.log(newArray); // 输出 ['Bravo', 'Delta', 'Sierra']

为什么推荐第一种方案？ #

用Set存储id的查找时间复杂度是O(1)，比includes的O(n)更快，当数据量较大时性能优势明显；flatMap则简化了嵌套数组的遍历操作，代码更简洁。

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