重建对象的深度嵌套数组，删除不需要的对象

Question

我不知道如何删除对象的深嵌套数组中的对象，该数组由对象的id值指向它。

这是我使用reduce的代码。我想在每次迭代中重新创建数组，因为它一团糟(而且只通过索引0(。

我想通过指向节点id 35993来删除整个部分。如果节点有一个子节点，这也会删除子节点。

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

在这里更改数组非常容易，无论如何都不需要担心删除子项，因为您正在删除项目的一部分。只需找到要删除的数组项，然后将其拼接出来。

即使你不想要一个突变的数组，克隆/复制也可能更容易，而且仍然可以这样做。

以下示例。我用id 95995显示它也删除了孩子。。

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));