重建 object 的深层嵌套数组，删除不需要的 object

Question

我不知道如何删除 object 在 object 的深层嵌套数组中，通过它的 id 值指向它。

这是我使用 reduce 的代码。我想在每次迭代时重新创建数组，因为它很乱（而且它只通过索引 0）。

我想通过指向节点 ID 35993 来删除整篇文章。如果节点获得 children，这也会删除 children。

const array = [
  {
    node: {
      level: 0,
      id: 71,
      type: "block",
      style: {
        backgroundColor: "#548444",
      },
    },
    children: [
      {
        node: {
          id: 85,
          type: "block",
          style: {
            backgroundColor: "#548444",
            fontSize: "19px",
          },
        },
        children: [
          {
            node: {
              id: 955,
              type: "column",
              style: {
                backgroundColor: "#eee",
                fontSize: "28px",
              },
            },
            children: [
              {
                node: {
                  level: 3,
                  parentId: 71,
                  id: 732,
                  type: "text",
                  data: {
                    text: "Ceci est un text",
                  },
                  style: {
                    color: "blue",
                    fontSize: "13px",
                  },
                },
              },
              {
                node: {
                  id: 353,
                  parentId: 71,
                  type: "text",
                  data: {
                    text: "Ceci est un text",
                  },
                  style: {
                    color: "blue",
                    fontSize: "13px",
                  },
                },
              },
            ],
          },
        ],
      },
    ],
  },
  {
    node: {
      level: 0,
      id: 7991,
      type: "block",
      style: {
        backgroundColor: "#548444",
      },
    },
    children: [
      {
        node: {
          id: 8995,
          type: "block",
          style: {
            backgroundColor: "#548444",
            fontSize: "19px",
          },
        },
        children: [
          {
            node: {
              id: 95995,
              type: "column",
              style: {
                backgroundColor: "#eee",
                fontSize: "28px",
              },
            },
            children: [
              {
                node: {
                  level: 3,
                  parentId: 71,
                  id: 73992,
                  type: "text",
                  data: {
                    text: "Ceci est un text",
                  },
                  style: {
                    color: "blue",
                    fontSize: "13px",
                  },
                },
              },
              {
                node: {
                  id: 35993,
                  parentId: 71,
                  type: "text",
                  data: {
                    text: "Ceci est un text",
                  },
                  style: {
                    color: "blue",
                    fontSize: "13px",
                  },
                },
              },
            ],
          },
        ],
      },
    ],
  },
];

const search1 = (arr, itemId, nestingKey) =>
  arr.reduce((a, item) => {
    if (a) return a;
    if (item.node.id === itemId) return item;
    if (item[nestingKey]) return search(item[nestingKey], itemId, nestingKey);
  }, null);

const remove = function (arr, itemId, nestingKey) {
  let newArr = [];
  arr.reduce((a, item) => {
    if (item.node.id !== itemId) {
      const tempItem = {
        ...item,
      };
      newArr.push(tempItem);
    }
      
    if (item.node.id === itemId) {
      delete item.node;
      return item;
    }
      
    if (item[nestingKey]) return remove(item[nestingKey], itemId, nestingKey);
  }, null);

  return newArr;
};

const res = remove(array, 35993, "children");
console.log(JSON.stringify(res));

Answer 1

在这里更改数组非常容易，您不必担心删除 children，因为您删除的是项目的一部分。找到你要移除的数组项然后拼接出来即可。

即使您不想要变异的数组，克隆/复制可能会更容易，并且仍然这样做。

示例如下。我使用 id 95995 来显示它也删除了 children..

const array = [{"node":{"level":0,"id":71,"type":"block","style":{"backgroundColor":"#548444"}},"children":[{"node":{"id":85,"type":"block","style":{"backgroundColor":"#548444","fontSize":"19px"}},"children":[{"node":{"id":955,"type":"column","style":{"backgroundColor":"#eee","fontSize":"28px"}},"children":[{"node":{"level":3,"parentId":71,"id":732,"type":"text","data":{"text":"Ceci est un text"},"style":{"color":"blue","fontSize":"13px"}}},{"node":{"id":353,"parentId":71,"type":"text","data":{"text":"Ceci est un text"},"style":{"color":"blue","fontSize":"13px"}}}]}]}]},{"node":{"level":0,"id":7991,"type":"block","style":{"backgroundColor":"#548444"}},"children":[{"node":{"id":8995,"type":"block","style":{"backgroundColor":"#548444","fontSize":"19px"}},"children":[{"node":{"id":95995,"type":"column","style":{"backgroundColor":"#eee","fontSize":"28px"}},"children":[{"node":{"level":3,"parentId":71,"id":73992,"type":"text","data":{"text":"Ceci est un text"},"style":{"color":"blue","fontSize":"13px"}}},{"node":{"id":35993,"parentId":71,"type":"text","data":{"text":"Ceci est un text"},"style":{"color":"blue","fontSize":"13px"}}}]}]}]}];

function removeById(array, id) {
  for (let ix = 0; ix < array.length; ix += 1) {
    const r = array[ix];
    if (r.node.id === id) {
      array.splice(ix, 1);
    } else {
      if (r.children) removeById(r.children, id);
    }
  }
}

console.log(JSON.stringify(array));

removeById(array, 95995);

console.log(JSON.stringify(array));

重建 object 的深层嵌套数组，删除不需要的 object

Reconstruct a deep nested array of object removing an unwanted object

javascript

arrays

reduce

object