JavaScript代码无法生成预期数组的问题排查求助

你的代码存在三个核心问题，导致无法得到预期输出：

1. 局部变量作用域问题 #

favCharacterFilms和favFilms都是在map回调的分支内部声明的局部变量，外部无法访问所有循环中的值。最后拼接时，favFilms只会保留最后一次循环（即Super-man）的结果，因此Iron-Man直接丢失。

2. 错误使用map方法 #

map的核心作用是返回一个新数组，每个元素对应回调函数的返回值，但你的回调函数没有任何return语句，导致myFav数组全是undefined，完全没起到收集数据的作用。

3. 结果收集逻辑错误 #

你试图在循环结束后一次性拼接两个局部变量，但这种方式无法遍历收集data中的所有元素，只能拿到最后一次循环的局部变量值。

修正后的代码 #

我们可以用reduce方法逐步收集所有影片数据，同时兼容字符串和数组类型的film字段，且不会修改原始data：

const data = [
  {
    marvel: {
      name: 'Thor',
      film: 'Thor',
      nickName: 'god of thunder',
    },
    dc: {
      name: 'Joker',
      film: ['Batman', 'Joker'],
    },
  },
  'Iron-Man',
  'Super-man',
];

const film = data.reduce((result, item) => {
  if (typeof item === 'object' && item !== null) {
    // 提取DC的影片，统一转成数组格式
    const dcFilms = Array.isArray(item.dc.film) ? item.dc.film : [item.dc.film];
    // 提取Marvel的影片，统一转成数组格式
    const marvelFilm = Array.isArray(item.marvel.film) ? item.marvel.film : [item.marvel.film];
    // 按预期顺序合并到结果数组
    result.push(...dcFilms, ...marvelFilm);
  } else if (typeof item === 'string') {
    // 字符串元素直接加入结果数组
    result.push(item);
  }
  return result;
}, []);

console.log(film);
// 输出: [ 'Batman', 'Joker', 'Thor', 'Iron-Man', 'Super-man' ]

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