JavaScript二维数组关联匹配：合并匹配行的实现求助

问题背景 #

有两个类似数据库行集的二维数组：

const array1 = [
  ['AB2C', 'Red', 113],
  ['BE4F', 'Green', 164],
  ['AE3G', 'Blue', 143],
];

const array2 = [
  [143, 'FabricB2', 'W5'],
  [189, 'FabricC9', 'W4'],
  [113, 'FabricA3', ' W5'],
  [143, 'FabricD1', 'W6']
];

需要实现类似数据库JOIN的操作：匹配array1索引2的元素与array2索引0的元素，返回array2匹配行拼接对应array1行的结果，预期输出为：

[
  [143, 'FabricB2', 'W5',  'AE3G', 'Blue', 143],
  [113, 'FabricA3', ' W5', 'AB2C', 'Red', 113],
  [143, 'FabricD1', 'W6',  'AE3G', 'Blue', 143]
]

错误代码分析 #

以下是尝试的错误实现：

function testArrayFunction() {
  array1 = [
    ['AB2C', 'Red', 113],
    ['BE4F', 'Green', 164],
    ['AE3G', 'Blue', 143],
  ];

  array2 = [
    [143, 'FabricB2', 'W5'],
    [189, 'FabricC9', 'W4'],
    [113, 'FabricA3', ' W5'],
    [143, 'FabricD1', 'W6']
  ];

  var array1Element = 2;
  var array2Element = 0;

  var res = array1
    .map(x => [  ...  array2
      .filter(y => y[array2Element] === x[array1Element ] )  ,...x ] );

  console.log(res);
}

错误原因：

• 遍历方向错误：从array1出发遍历，结果以array1行为主体，不符合需求中以array2匹配行为主体的要求
• 结构嵌套：filter返回数组，直接展开后会导致结果出现嵌套数组，而非预期的一维拼接行

正确最简实现 #

高效版（用Map优化查找） #

function testArrayFunction() {
  const array1 = [
    ['AB2C', 'Red', 113],
    ['BE4F', 'Green', 164],
    ['AE3G', 'Blue', 143],
  ];

  const array2 = [
    [143, 'FabricB2', 'W5'],
    [189, 'FabricC9', 'W4'],
    [113, 'FabricA3', ' W5'],
    [143, 'FabricD1', 'W6']
  ];

  // 构建array1的映射表，以索引2的值为键，对应整行数据
  const array1Map = new Map(array1.map(row => [row[2], row]));
  
  // 遍历array2，匹配后拼接行，自动过滤无匹配的行
  const res = array2.flatMap(row2 => {
    const matchedRow1 = array1Map.get(row2[0]);
    return matchedRow1 ? [...row2, ...matchedRow1] : [];
  });

  console.log(res);
}

testArrayFunction();

简洁版（直接查找，适合小数据量） #

如果数组规模较小，也可以用更简洁的写法：

function testArrayFunction() {
  const array1 = [['AB2C', 'Red', 113], ['BE4F', 'Green', 164], ['AE3G', 'Blue', 143]];
  const array2 = [[143, 'FabricB2', 'W5'], [189, 'FabricC9', 'W4'], [113, 'FabricA3', ' W5'], [143, 'FabricD1', 'W6']];

  const res = array2.flatMap(row2 => {
    const match = array1.find(row1 => row1[2] === row2[0]);
    return match ? [...row2, ...match] : [];
  });

  console.log(res);
}

说明 #

• 用flatMap可在遍历array2时自动过滤无匹配的行（返回空数组会被flatMap忽略）
• 映射表（Map）方式将查找时间复杂度从O(n)降到O(1)，适合处理大规模数据
• 拼接顺序严格遵循array2匹配行在前、array1对应行在后的要求

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