如何基于两个数组生成对应值替换后的目标数组？

输入数据 #

多维字符串数组 #

[["106373", "106374", "106375", "106376"], ["106377", "106378", "220183", "220184"], ["220185", "220186", "220187", "220188"], ["220189", "220190", "106379"]]

键值对数组 #

[["106373", 15],
 ["106374", 16],
 ["106375", 17],
 ["106376", 18],
 ["106377", 19],
 ["106378", 20],
 ["106379", 77],
 ["220183", 38],
 ["220184", 39],
 ["220185", 40],
 ["220186", 41],
 ["220187", 42],
 ["220188", 43],
 ["220189", 44],
 ["220190", 76]]

需求 #

生成与第一个数组结构完全一致的数组，将其中的字符串元素替换为第二个数组中对应键的数值，预期结果：

[[15, 16, 17, 18], [19, 20, 38, 39], [40, 41, 42, 43], [44, 76, 77]]

解决方案 #

1. 将键值对数组转为查找对象 #

先把二维键值对数组转换成普通对象，这样可以实现O(1)时间复杂度的快速查找，避免每次遍历数组匹配的低效操作：

const lookupMap = Object.fromEntries(keyValueArr);

转换后得到的对象结构为：{ "106373": 15, "106374": 16, ... }，直接通过键名就能获取对应数值。

2. 嵌套映射生成结果数组 #

对原始多维数组进行两层map遍历，外层遍历每个子数组，内层遍历每个字符串元素，用查找对象替换为对应数值，完美保留原数组结构：

const result = originalArr.map(subArr => subArr.map(str => lookupMap[str]));

完整可运行代码 #

// 原始多维字符串数组
const originalArr = [["106373", "106374", "106375", "106376"], ["106377", "106378", "220183", "220184"], ["220185", "220186", "220187", "220188"], ["220189", "220190", "106379"]];

// 键值对数组
const keyValueArr = [["106373", 15], ["106374", 16], ["106375", 17], ["106376", 18], ["106377", 19], ["106378", 20], ["106379", 77], ["220183", 38], ["220184", 39], ["220185", 40], ["220186", 41], ["220187", 42], ["220188", 43], ["220189", 44], ["220190", 76]];

// 生成查找映射
const lookupMap = Object.fromEntries(keyValueArr);

// 转换并生成结果
const result = originalArr.map(subArr => subArr.map(str => lookupMap[str]));

console.log(result);
// 输出：[[15, 16, 17, 18], [19, 20, 38, 39], [40, 41, 42, 43], [44, 76, 77]]

常见问题说明 #

如果之前用select结合循环的方式失败，大概率是因为每次查找都要遍历整个键值对数组，不仅效率低，还容易因为匹配逻辑（比如索引错误、循环边界问题）导致结果偏差。用Object.fromEntries转成对象后，查找逻辑更简洁，嵌套map也能精准保留原数组的层级结构。

内容的提问来源于stack exchange，提问作者Flávio