JavaScript嵌套数组处理最佳实践：多层forEach提取字段有更优方案吗？

关于多层嵌套forEach是否属于不良实践 #

多层嵌套forEach本身语法上没有错误，但不推荐在业务代码中写超过2层的嵌套遍历，主要问题有：

• 可读性差，后续维护的人很难快速理清嵌套层级对应的业务含义
• 可维护性低，如果后续API返回结构增加/减少一层嵌套，需要修改的代码块层级多，容易漏改
• 灵活性差，forEach本身不支持中断遍历，如果后续需要满足条件时提前终止逻辑，改造难度大

更简洁的实现方案 #

方案1：flatMap链式调用（推荐，ES2019+环境支持） #

用flatMap逐层拍平嵌套数组，逻辑拆分清晰，每一步对应一层嵌套的处理：

// 提取所有PaymentTypeName存入数组
const paymentTypeNames = data
  .flatMap(item => item.ModelList ?? []) // 兜底避免ModelList不存在时报错
  .flatMap(model => model.CountryList ?? [])
  .flatMap(country => country.PaymentTypeList ?? [])
  .map(paymentType => paymentType.PaymentTypeName)

// 打印结果
paymentTypeNames.forEach(console.log)

如果需要过滤空值，可以在最后加.filter(Boolean)。

方案2：reduce实现（兼容旧环境） #

如果运行环境不支持flatMap，可以用reduce嵌套实现：

const paymentTypeNames = data.reduce((res, item) => {
  return res.concat(
    (item.ModelList || []).reduce((res2, model) => {
      return res2.concat(
        (model.CountryList || []).reduce((res3, country) => {
          return res3.concat(
            (country.PaymentTypeList || []).map(p => p.PaymentTypeName)
          )
        }, [])
      )
    }, [])
  )
}, [])

这种写法性能和flatMap接近，只是可读性略差。

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