JavaScript如何用find或filter方法替代两层for循环处理商品匹配逻辑

直接使用find替换（与原逻辑100%对齐） #

原代码的双层for循环逻辑是：遍历每个商品，在门店可售数据中找到第一个匹配对应商品ID的项后停止遍历，赋值到对应数组位置，Array.prototype.find 刚好原生支持该逻辑（找到第一个匹配项立即返回，找不到返回undefined），替换后代码如下：

this.prodList.forEach((prod, index) => {
  // 匹配第一个商品ID一致的门店可售数据
  const matchedItem = res.data.find(shopItem => shopItem.product === prod.value)
  if (matchedItem) {
    const record = {
      product: prod.value,
      content: matchedItem.content,
      shopName: matchedItem.shopName
    }
    this.detailList[index] = record
    this.formData.addressList[index] = record
  }
})

注意：该方案和原逻辑一致，未匹配到对应商品可售数据时，不会对detailList和addressList的对应下标位置赋值。

大数据量优化方案（推荐） #

如果res.data的长度较大，逐次调用find会产生多次遍历开销，可提前将可售数据转为product为键的映射表，仅需遍历一次res.data，后续查找时间复杂度为O(1)：

// 提前构建商品ID到可售数据的映射
const productMap = new Map(res.data.map(item => [item.product, item]))

this.prodList.forEach((prod, index) => {
  const matchedItem = productMap.get(prod.value)
  if (matchedItem) {
    const record = {
      product: prod.value,
      content: matchedItem.content,
      shopName: matchedItem.shopName
    }
    this.detailList[index] = record
    this.formData.addressList[index] = record
  }
})

为什么不用filter？ #

Array.prototype.filter会返回所有符合条件的项组成的数组，且会遍历完整个数组，你的原逻辑仅需要第一个匹配项，用find更贴合需求，性能也更高。

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