从嵌套数组中删除特定元素的终极指南

2024-03-24 20:51:06

嵌套数组中删除特定元素的技巧

简介

在构建交互式网站或应用程序时，我们经常需要处理复杂的数据结构，例如嵌套数组。这些数据结构可以表示评论系统、目录或具有层次结构的任何其他数据。在这些场景中，可能会出现需要从数组中删除特定元素的情况，并且此任务可能具有挑战性，尤其是在元素嵌套在多层中时。

问题：从嵌套数组中删除子元素

假设我们有一个代表评论系统的嵌套数组。每个父评论都可以拥有多个子评论，并且需要删除特定子评论，而又不影响其他元素。

解决方案：递归过滤

要解决此问题，我们将使用递归算法。递归函数将遍历嵌套数组，检查每个元素，并删除与指定 ID 匹配的子评论。

实现步骤

1. 过滤父评论

首先，我们需要过滤出不包含要删除的子评论的父评论。这可以通过使用 filter() 方法来实现，该方法仅保留与指定条件匹配的元素。

const filteredParentComments = comments.filter(
  (parent) => parent.id !== Number(e.target.id)
);

2. 递归过滤子评论

接下来，我们需要编写一个递归函数 filterChildComments 来遍历子评论数组并过滤掉与要删除的子评论 ID 匹配的评论。

function filterChildComments(replies, filteredParentComments) {
  if (replies.length === 0) return replies;

  let filteredReplies = [];

  for (let i = 0; i < replies.length; i++) {
    const reply = replies[i];

    if (reply.id !== Number(e.target.id)) {
      filteredReplies = [
        ...filteredReplies,
        {
          ...reply,
          replies: filterChildComments(reply.replies, filteredParentComments),
        },
      ];
    }
  }

  return filteredReplies;
}

3. 合并结果

最后，我们将过滤后的父评论与过滤后的子评论合并到一个新数组中。

const filteredComments = [...filteredParentComments];

filteredComments.forEach((parent) => {
  if (parent.replies.length > 0) {
    parent.replies = filterChildComments(parent.replies, filteredParentComments);
  }
});

代码示例

以下是完整示例代码：

let comments = [
  {
    id: 1,
    content: "内容1",
    replies: [],
  },
  {
    id: 2,
    content: "内容2",
    replies: [
      {
        id: 3,
        content: "子评论1",
      },
      {
        id: 4,
        content: "子评论2",
      },
    ],
  },
];

// 删除子评论 ID 为 4
const filteredComments = deleteChildComment(4, comments);

console.log(filteredComments);

function deleteChildComment(id, comments) {
  const filteredParentComments = comments.filter(
    (parent) => parent.id !== id
  );

  const filteredComments = [...filteredParentComments];

  filteredComments.forEach((parent) => {
    if (parent.replies.length > 0) {
      parent.replies = filterChildComments(parent.replies, filteredParentComments);
    }
  });

  return filteredComments;
}

function filterChildComments(replies, filteredParentComments) {
  if (replies.length === 0) return replies;

  let filteredReplies = [];

  for (let i = 0; i < replies.length; i++) {
    const reply = replies[i];

    if (reply.id !== id) {
      filteredReplies = [
        ...filteredReplies,
        {
          ...reply,
          replies: filterChildComments(reply.replies, filteredParentComments),
        },
      ];
    }
  }

  return filteredReplies;
}