如何优化通过countryId获取currencyRate的JavaScript代码

嘿，我来帮你搞定这个代码优化的问题，顺便告诉你该学习哪些实用的JS方法～

首先，为什么现有代码可以优化？ #

你现在用两次forEach遍历数组，每次遍历都是O(n)的时间复杂度，当数组元素较多时，效率会比较低。而且forEach会走完整个数组的循环，哪怕已经找到目标元素了也不会提前停止，有点浪费性能。

你需要学习的核心方法和概念 #

• Array.find() 方法：这是替代forEach做单元素查找的绝佳工具，它会遍历数组直到找到第一个符合条件的元素，然后立即停止并返回该元素，找不到就返回undefined。代码会更简洁，性能也更好。
• 用对象/Map构建查找表：把数组转换成键值对结构（比如以countryId或countryQuote为键），这样后续查找只需要直接通过键取值，时间复杂度是O(1)，比遍历数组高效太多，尤其是需要多次查找的场景。
• Array.reduce() 方法：这是把数组转换成查找表的常用手段，它可以帮你把数组元素逐步累积成一个对象（或Map），非常灵活。

优化后的代码示例 #

场景1：只需要做一次查找 #

用find简化遍历，代码更简洁，性能也比两次forEach好：

let itemId = 1; 

// 找到对应countryId的国家对象
const targetCountry = countryList.find(country => country.countryId === itemId);

if (targetCountry) {
  // 根据countryQuote找到对应的汇率
  const targetRateEntry = currencyQuoteList.find(quote => quote.countryQuote === targetCountry.countryQuote);
  console.log("countryRate : " + targetRateEntry?.currencyRate);
}

场景2：需要多次查找不同的countryId #

先提前构建查找表，后续每次查找都能瞬间拿到结果：

// 提前把countryList转成以countryId为键的映射表
const countryLookup = countryList.reduce((acc, country) => {
  acc[country.countryId] = country;
  return acc;
}, {});

// 提前把currencyQuoteList转成以countryQuote为键的汇率映射表
const rateLookup = currencyQuoteList.reduce((acc, quote) => {
  acc[quote.countryQuote] = quote.currencyRate;
  return acc;
}, {});

// 后续查找只需要直接取值
let itemId = 1;
const targetCountry = countryLookup[itemId];
if (targetCountry) {
  const countryRate = rateLookup[targetCountry.countryQuote];
  console.log("countryRate : " + countryRate);
}

额外小提示 #

• 如果你的键是字符串、数字这类基础类型，用普通对象做查找表就够了；如果键是对象、函数这类复杂类型，推荐用ES6的Map，它支持任意类型作为键。
• 用?.可选链操作符可以避免找不到元素时出现Cannot read property 'currencyRate' of undefined的报错，让代码更健壮。

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