如何提取JavaScript中遍历修改数组匹配对象的重复逻辑实现函数复用

实现思路 #

把重复的数组遍历+指定项匹配+不可变更新逻辑封装为通用函数，仅把可变部分抽为入参：

• 待处理的目标数组
• 匹配目标项的标识值（你场景下都是按name字段匹配）
• 要更新的字段路径：如果是修改顶层属性直接传属性名，如果是修改嵌套数组下的子属性，传「父级数组字段名+子属性名」的组合
• 要设置的新值

通用函数实现 #

// 可直接按你期望的传参形式调用的版本
const changeProperty = (array, matchName, parentArrayField, targetProp, value) => {
  return array.map(item => {
    // 不匹配的项直接返回
    if (item.name !== matchName) return item
    // 无父数组字段时直接修改当前项的顶层属性
    if (!parentArrayField) {
      return { ...item, [targetProp]: value }
    }
    // 有父数组字段时遍历修改父数组下所有子项的对应属性
    return {
      ...item,
      [parentArrayField]: item[parentArrayField].map(innerItem => ({
        ...innerItem,
        [targetProp]: value
      }))
    }
  })
}

使用示例 #

完全替代你原有多个重复函数，无需再单独写重复逻辑：

// 修改bike的primary颜色
changeProperty(array, "bike", "colors", "primary", "red")

// 修改bike的secondary颜色
changeProperty(array, "bike", "colors", "secondary", "blue")

// 修改bike的前轮颜色
changeProperty(array, "bike", "wheelColors", "frontWheel", "red")

// 修改bike的后轮颜色
changeProperty(array, "bike", "wheelColors", "backWheel", "black")

// 直接修改bike的顶层属性
changeProperty(array, "bike", null, "bar", "testValue")

扩展版本（支持自定义匹配规则） #

如果后续需要按其他字段（比如id）匹配项，可以用扩展版本：

const updateItem = (array, matchFn, parentArrayField, targetProp, value) => {
  return array.map(item => {
    if (!matchFn(item)) return item
    if (!parentArrayField) return { ...item, [targetProp]: value }
    return {
      ...item,
      [parentArrayField]: item[parentArrayField].map(inner => ({ ...inner, [targetProp]: value }))
    }
  })
}

// 按id匹配示例
updateItem(array, item => item.id === 123, "colors", "primary", "green")

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