如何根据多条件从嵌套数组中移除指定元素？

需要实现的需求：根据给定的列表id和内容id，从嵌套数组中移除对应内容元素；同时针对特定列表下的指定内容，修改其id值。尝试用filter()和map()未得到预期结果，以下是具体数据和解决方案：

原始数据 #

const data = [
  {
    id: 1,
    name: "First list",
    content: [
      { id: 10, name: "item1" },
      { id: 11, name: "item2" },
    ],
  },
  {
    id: 2,
    name: "Second list",
    content: [
      { id: 12, name: "item1" },
      { id: 1, name: "item3" },
    ],
  },
];

期望输出 #

const filter = [
  {
    id: 1,
    name: "First list",
    content: [{ id: 10, name: "item1" }],
  },
  {
    id: 2,
    name: "Second list",
    content: [
      { id: 12, name: "item1" },
      { id: 13, name: "item3" },
    ],
  },
];

解决方案 #

通过结合map()和filter()，同时处理元素移除和id修改需求，且保证不修改原始数据（使用浅拷贝保持数据不可变性）：

// 定义目标参数
const removeListId = 1;
const removeContentId = 11;
const updateListId = 2;
const oldContentId = 1;
const newContentId = 13;

const filteredData = data.map(list => {
  let processedContent = [...list.content];

  // 移除目标列表下的指定内容元素
  if (list.id === removeListId) {
    processedContent = processedContent.filter(item => item.id !== removeContentId);
  }

  // 修改指定列表下的内容id
  if (list.id === updateListId) {
    processedContent = processedContent.map(item => 
      item.id === oldContentId ? { ...item, id: newContentId } : item
    );
  }

  return { ...list, content: processedContent };
});

console.log(filteredData);

代码说明 #

1. 外层遍历：用map()遍历每个列表项，对每个列表单独处理；
2. 内容移除：匹配到目标列表id时，用filter()过滤掉对应content id的元素；
3. id修改：匹配到需要更新的列表id时，用map()遍历content数组，替换指定元素的id；
4. 数据不可变性：全程使用扩展运算符...创建新对象/数组，避免直接修改原始数据。

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