Vue监听器中用forEach处理对象数组后无法回写原对象问题

嘿，我帮你找出问题啦！你现在的代码里，把forEach的执行结果赋值给了episode.chapters，但**Array.forEach()本身是没有返回值的（它默认返回undefined）**，这就导致你把undefined覆盖了原本的chapters数组，自然看不到修改后的内容。

下面给你两种可行的修复方案，选哪种都可以：

方案一：用map生成新数组（推荐） #

map方法会遍历数组并返回一个新数组，刚好适合直接赋值给episode.chapters：

watch: {
  episode (episode) {
    episode.chapters = episode.chapters.map((chapter, index, allChapters) => {
      // 简化endTime的判断逻辑
      const endTime = allChapters[index + 1] ? allChapters[index + 1].start_time : '99:99:99';
      console.log(`${index}: ${chapter.start_time} / ${endTime}`);
      // 返回包含新字段的对象
      return {
        start_time: chapter.start_time,
        title: chapter.title,
        end_time: endTime
      };
    });
  }
}

方案二：直接在forEach里修改原数组（无需赋值） #

如果你不想生成新数组，也可以直接在forEach里修改原数组的每一项，这样就不需要把forEach的结果赋值回去：

watch: {
  episode (episode) {
    episode.chapters.forEach((chapter, index, allChapters) => {
      const endTime = allChapters[index + 1] ? allChapters[index + 1].start_time : '99:99:99';
      console.log(`${index}: ${chapter.start_time} / ${endTime}`);
      // 直接给原对象添加end_time字段，Vue能检测到这个响应式变化
      chapter.end_time = endTime;
      // 如果原对象是冻结/不可扩展的，就用下面这行替换上面的：
      // allChapters.splice(index, 1, {...chapter, end_time: endTime});
    });
    // 这里不用赋值，因为forEach已经修改了原数组
  }
}

另外提个小细节：如果episode是Vue的响应式数据，上面两种方式都能正常触发视图更新，不用担心数据变了页面不刷新的问题~

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