JavaScript遍历数组元素匹配多维数组w属性提取坐标实现方案

实现思路 #

首先将array2转换为以w属性值为键的哈希映射，单次遍历array2即可完成预处理，后续匹配array1元素时时间复杂度为O(1)，整体效率更高，数据量较大时优势更明显。之后遍历array1的每个元素，从映射中取出对应匹配对象，提取x、y属性组装为结果数组即可。

完整代码实现 #

const array1 = [0, 5, 4];
const array2 = [
  {x: 1, y: 4, name: 'A', w: 0}, 
  {x: 2, y: 8, name: 'E', w: 4}, 
  {x: 3, y: 1, name: 'F', w: 5}
];

// 预处理生成w值为键的映射
const wMap = new Map(array2.map(item => [item.w, item]));

// 生成仅包含x、y属性的结果数组
const result = array1.map(val => {
  const matchedItem = wMap.get(val);
  return { x: matchedItem.x, y: matchedItem.y };
});

console.log(result);
// 输出结果：[ { x: 1, y: 4 }, { x: 3, y: 1 }, { x: 2, y: 8 } ]

异常兜底补充 #

如果存在array1的元素在array2中找不到对应w值的场景，可以自行添加兜底逻辑，示例如下：

// 匹配不到时返回默认坐标{x:0, y:0}
const result = array1.map(val => {
  const matchedItem = wMap.get(val);
  return matchedItem ? { x: matchedItem.x, y: matchedItem.y } : {x: 0, y: 0};
});

内容的提问来源于stack exchange，提问作者ELMER RONIER HUITZ