如何在对象数组中选取嵌套对象数组并根据ID赋值？

嘿，这个需求其实挺典型的，咱先理清楚核心逻辑：要修改指定Genre下的books数组，第一步得先定位到对应ID的Genre对象，然后直接给它的books属性赋值就行。下面给你分享几种常用的实现方式：

方法一：用find()快速定位（最直观） #

find()方法会返回数组中第一个匹配条件的对象，刚好适配根据ID查找的场景，代码简洁又好懂：

const obj = { 
  "data": [ 
    { "id": 1, "name": "Genre 1", "books": [/* 原有书籍 */] },
    { "id": 2, "name": "Genre 2", "books": [/* 原有书籍 */] },
    { "id": 3, "name": "Genre 3", "books": [/* 原有书籍 */] } 
  ] 
};

// 假设我们要更新ID为2的Genre的书籍列表
const targetGenreId = 2;
const newBooks = [
  { "id": 4, "name": "New Book 1" },
  { "id": 5, "name": "New Book 2" }
];

// 找到目标Genre对象
const targetGenre = obj.data.find(genre => genre.id === targetGenreId);

// 找到后再赋值，避免找不到时报错
if (targetGenre) {
  targetGenre.books = newBooks;
  console.log("更新成功！", targetGenre);
} else {
  console.log("没找到对应ID的Genre哦");
}

方法二：用forEach()遍历处理（适合需额外操作的场景） #

如果你需要在遍历过程中做一些额外逻辑（比如记录日志、批量处理多个对象），forEach()会更灵活：

const targetGenreId = 3;
const newBooks = [/* 你的新书籍数组 */];

obj.data.forEach(genre => {
  if (genre.id === targetGenreId) {
    genre.books = newBooks;
    // 这里可以加其他操作，比如触发回调、更新统计数据等
  }
});

额外提醒：数据不可变性场景的处理 #

如果你的项目需要保持原对象不被修改（比如React、Vue的状态管理场景），可以用map()创建新对象副本，避免直接修改原数据：

const updatedObj = {
  ...obj, // 复制原对象的顶层属性
  data: obj.data.map(genre => {
    // 只修改目标Genre的books，其他Genre保持原样
    if (genre.id === targetGenreId) {
      return { ...genre, books: newBooks };
    }
    return genre;
  })
};

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