JavaScript如何将重复嵌套forEach代码封装为通用函数消除代码重复

你可以把重复的嵌套匹配逻辑抽成通用工具函数，所有可变参数通过入参传入即可，完全保留原有逻辑的同时消除代码重复。

基础通用函数实现 #

/**
 * 匹配两个数组的id，将选中数组的指定属性推入目标绑定数组
 * @param {Array} sourceArr - response返回的对应分类数组
 * @param {Array} selectedList - 本地已选中的对应分类数组
 * @param {Array} targetArr - 要绑定数据的目标数组
 * @param {String} propName - 选中项中需要提取的属性名
 */
function bindMatchedItems(sourceArr, selectedList, targetArr, propName) {
  // 兼容原可选链逻辑，源数组不存在时直接终止执行
  if (!sourceArr) return
  sourceArr.forEach(element => {
    selectedList.forEach(ele => {
      if (ele?.id === element.id) {
        targetArr.push(ele?.[propName])
      }
    })
  })
}

调用示例 #

直接用下面三行代码替换原有三段重复逻辑即可：

bindMatchedItems(response.mainDish, this.selectedMainDish, this.bindMainDish, 'mainDish')
bindMatchedItems(response.sideDish1, this.selectedSideDish1List, this.bindSideDish1, 'sideDish1')
bindMatchedItems(response.sideDish2, this.selectedSideDish2, this.bindSideDish2, 'sideDish2')

进阶优化版本（可选，提升大数据量场景性能） #

原有嵌套循环的时间复杂度为O(n*m)，如果数组数据量较大，可以提前将选中数组转为Map映射表，将查找复杂度降为O(1)，总复杂度优化到O(n+m)：

function bindMatchedItems(sourceArr, selectedList, targetArr, propName) {
  if (!sourceArr || !selectedList.length) return
  // 提前构建id到目标属性的映射，避免嵌套循环
  const selectedMap = new Map(selectedList.map(ele => [ele.id, ele?.[propName]]))
  sourceArr.forEach(element => {
    const matchedVal = selectedMap.get(element.id)
    if (matchedVal !== undefined) {
      targetArr.push(matchedVal)
    }
  })
}

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