Javascript-从嵌套对象数组中删除对象

Question

我有一个嵌套的Object数组，我想从该嵌套数组中删除一个项目，但是由于某种原因，这似乎不适用于我的方法：

对象

export const completeNavigationItemsV2Response = [
    {
        id: 'Erlebniskategorien',
        title: 'Erlebniskategorien',
        uri: '/on/demandware.store/Sites-JSShop-Site/default/SearchJS-Show',
        children: [
            {
                id: 'fliegen-fallen',
                title: 'Fallen & Springen',
                uri: '/fliegen-fallen/fallen-springen,default,sc.html',
                children: [
                    {
                        id: 'fallen-springen',
                        title: 'Fallen & Springen',
                        uri: '/fliegen-fallen/fallen-springen,default,sc.html',
                        children: [],
                    }
                ],
            },
            {
                id: 'Weit-Weg',
                title: 'Reisen & Kurzurlaub',
                uri: '/reisen/Weit-Weg,default,sc.html',
                children: [
                    {
                        id: 'staedtereisen',
                        title: 'Städtereisen',
                        uri: '/reisen/staedtereisen,default,sc.html',
                        children: [],
                    }
                ],
            },
            {
                id: 'motorpower',
                title: 'Motorpower',
                uri: '/geschenke-maenner/motorpower,default,sc.html',
                children: [
                    {
                        id: 'rennwagen',
                        title: 'Rennwagen',
                        uri: '/motorpower/rennwagen,default,sc.html',
                        children: [],
                    }
                ],
            },
            {
                id: '10',
                title: 'Erlebnisse mit Stars',
                uri: '/erlebnisse-mit-stars/l/10',
                children: [
                    {          // <== remove this object with id === 'glossar'
                        id: 'glossar', 
                        title: 'Glossar',
                        uri: '/erlebnisstandorte/glossar,default,pg.html',
                        children: [],
                    },
                ],
            },
        ],
    }
];

你们中的某人现在会以一种便捷的es6方法，如何以某种动态的方式（例如，使用.map()或.filter()函数从整个对象中删除该子对象吗？

Answer 1

如果要在对象的任何级别使用它，则可以使用如下递归函数来完成它：

// Object is the same, just minified
const completeNavigationItemsV2Response=[{id:"Erlebniskategorien",title:"Erlebniskategorien",uri:"/on/demandware.store/Sites-JSShop-Site/default/SearchJS-Show",children:[{id:"fliegen-fallen",title:"Fallen & Springen",uri:"/fliegen-fallen/fallen-springen,default,sc.html",children:[{id:"fallen-springen",title:"Fallen & Springen",uri:"/fliegen-fallen/fallen-springen,default,sc.html",children:[]}]},{id:"Weit-Weg",title:"Reisen & Kurzurlaub",uri:"/reisen/Weit-Weg,default,sc.html",children:[{id:"staedtereisen",title:"Städtereisen",uri:"/reisen/staedtereisen,default,sc.html",children:[]}]},{id:"motorpower",title:"Motorpower",uri:"/geschenke-maenner/motorpower,default,sc.html",children:[{id:"rennwagen",title:"Rennwagen",uri:"/motorpower/rennwagen,default,sc.html",children:[]}]},{id:"10",title:"Erlebnisse mit Stars",uri:"/erlebnisse-mit-stars/l/10",children:[{id:"glossar",title:"Glossar",uri:"/erlebnisstandorte/glossar,default,pg.html",children:[]}]}]}];


const removeItemWithId = (array, id) => {
  return array
    .filter(obj => obj.id !== id) // filter out if the id matches
    .map(obj => ({ // Do the same for children (if they exist)
      ...obj,
      children: obj.children !== undefined 
                              ? removeItemWithId(obj.children, id) 
                              : undefined
    }));
};

console.log(removeItemWithId(completeNavigationItemsV2Response, 'glossar'));

Answer 2

尽管比ES6更新，但如果可以支持.flatMap()，则可以通过在初始数组上调用.flatMap()然后在子数组上调用它来递归地执行此操作。如果到达要删除的元素，则可以返回一个空数组[]，该数组在连接到结果数组中时将删除该对象。

const arr = [{ id: 'Erlebniskategorien', title: 'Erlebniskategorien', uri: '/on/demandware.store/Sites-JSShop-Site/default/SearchJS-Show', children: [{ id: 'fliegen-fallen', title: 'Fallen & Springen', uri: '/fliegen-fallen/fallen-springen,default,sc.html', children: [{ id: 'fallen-springen', title: 'Fallen & Springen', uri: '/fliegen-fallen/fallen-springen,default,sc.html', children: [], }], }, { id: 'Weit-Weg', title: 'Reisen & Kurzurlaub', uri: '/reisen/Weit-Weg,default,sc.html', children: [{ id: 'staedtereisen', title: 'Städtereisen', uri: '/reisen/staedtereisen,default,sc.html', children: [], }], }, { id: 'motorpower', title: 'Motorpower', uri: '/geschenke-maenner/motorpower,default,sc.html', children: [{ id: 'rennwagen', title: 'Rennwagen', uri: '/motorpower/rennwagen,default,sc.html', children: [], }], }, { id: '10', title: 'Erlebnisse mit Stars', uri: '/erlebnisse-mit-stars/l/10', children: [{ id: 'glossar', title: 'Glossar', uri: '/erlebnisstandorte/glossar,default,pg.html', children: [], }, ], }, ], }];

const removeId = "glossar";
const res = arr.flatMap(function fn(o) {
  return o.id !== removeId ? ({...o, children: o.children.flatMap(fn)}) : [];
});

console.log(res);