如何在JavaScript嵌套对象数组中修改属性值

需求：更新id为21的对象，将其reply属性设为false。

原始嵌套数组 #

const arr = [ 
  {
    id: 1, 
    comment:'parent 01', 
    parentId:null, 
    reply:true, 
    children:[
      {
        id: 11, 
        comment:'child', 
        reply:true, 
        parentId:1, 
        children:[
          {id: 21, comment:'super child ', reply:true,parentId:11 }
        ] 
      }
    ] 
  }, 
  {id: 2, comment:'parent 02', reply:true, parentId:null } 
]

期望结果 #

const arr = [ 
  {
    id: 1, 
    comment:'parent 01', 
    parentId:null, 
    reply:true, 
    children:[
      {
        id: 11, 
        comment:'child', 
        reply:true, 
        parentId:1, 
        children:[
          {id: 21, comment:'super child ', reply:false,parentId:11 }
        ] 
      }
    ] 
  }, 
  {id: 2, comment:'parent 02', reply:true, parentId:null } 
]

解决方案 #

方法一：递归遍历嵌套数组直接修改 #

通过递归遍历数组及其子元素，找到目标id的对象后直接修改属性：

function findAndUpdateComment(comments, targetId, updateProps) {
  comments.forEach(comment => {
    if (comment.id === targetId) {
      Object.assign(comment, updateProps);
      return;
    }
    if (comment.children && comment.children.length > 0) {
      findAndUpdateComment(comment.children, targetId, updateProps);
    }
  });
}

// 使用示例
findAndUpdateComment(arr, 21, { reply: false });
console.log(arr); // 输出即为期望结果

方法二：扁平化数组修改后重新嵌套 #

如果嵌套层级较深，可先将数组转为一维结构，修改后再重新生成嵌套数组：

1. 扁平化嵌套数组的函数

将多层嵌套的数组转为一维数组：

function flattenComments(comments) {
  let result = [];
  comments.forEach(comment => {
    const { children, ...rest } = comment;
    result.push(rest);
    if (children && children.length > 0) {
      result = result.concat(flattenComments(children));
    }
  });
  return result;
}

// 扁平化后的结果：
/*
[ 
  {id: 1, comment:'parent 01', reply:true,parentId:null},
  {id: 11, comment:'child', reply:true, parentId:1},
  {id: 21, comment:'super child', reply:true, parentId:11},
  {id: 2, comment:'parent 02', reply:true, parentId:null},
]
*/

2. 生成嵌套数组的函数

将扁平化数组重新转为嵌套结构：

function nestComments(commentList) {
  const commentMap = {};

  // 把所有评论存入id映射表
  commentList.forEach(comment => commentMap[comment.id] = comment);

  // 将子评论挂载到对应父评论的children中
  commentList.forEach(comment => {
    if(comment.parentId !== null) {
      const parent = commentMap[comment.parentId];
      (parent.children = parent.children || []).push(comment);
    }
  });

  // 筛选出顶级评论（parentId为null的评论）
  return commentList.filter(comment => comment.parentId === null);
}

3. 完整操作流程

// 1. 扁平化原始数组
const flattened = flattenComments(arr);
// 2. 找到目标对象并修改属性
const targetComment = flattened.find(item => item.id === 21);
if (targetComment) {
  targetComment.reply = false;
}
// 3. 重新生成嵌套数组
const updatedNestedArr = nestComments(flattened);
console.log(updatedNestedArr); // 输出即为期望结果

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