JavaScript递归函数中Array.forEach无法识别传入参数导致undefined问题排查与解决

你遇到的问题其实非常典型——在递归调用时遗漏了必要的参数传递！

先看你第一个版本的代码：

const iterate = (obj, newObj) => {
  Object.keys(obj).forEach(key => {
    if (typeof obj[key] === 'object') {
      // 这里只传了第一个参数obj[key]，没传newObj！
      iterate(obj[key])
    } else{
      delete obj[key];
      Object.assign(obj, newObj);
    }
  })
}

当你进入typeof obj[key] === 'object'的分支时，调用iterate只传入了第一个参数obj[key]，完全没把newObj传下去。这就导致在这个递归层级里，newObj参数默认是undefined，等后续走到else分支要使用newObj的时候，自然就找不到正确的值了。

而第二个能正常运行的代码，本质是因为它不需要依赖外部传入的newObj，而是在else分支里自己定义了newObj，所以不存在参数传递遗漏的问题。

修正方案 #

只需要在递归调用时把newObj参数也传过去就行：

const iterate = (obj, newObj) => {
  Object.keys(obj).forEach(key => {
    if (typeof obj[key] === 'object') {
      // 补上newObj参数
      iterate(obj[key], newObj)
    } else{
      delete obj[key];
      Object.assign(obj, newObj);
    }
  })
}

这样每个递归层级都能拿到正确的newObj参数，forEach内部自然就能识别到它了。

额外注意 #

另外提个小细节：typeof []也会返回'object'，如果你的数据里包含数组，当前逻辑会把数组当成普通对象处理（用Object.keys遍历索引），如果这不符合你的预期，可能需要额外加个判断Array.isArray(obj[key])来区分处理，但这属于需求延伸的问题，核心的参数传递问题已经解决啦。

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