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

【问题标题】：Javascript - remove object out of nested Object arrayJavascript - 从嵌套对象数组中删除对象
【发布时间】：2020-12-07 15:11:51
【问题描述】：

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

对象

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() 函数？

【问题讨论】：

完全不清楚您要做什么或尝试过什么

标签： javascript arrays object ecmascript-6

【解决方案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'));

【讨论】：

如果您更喜欢不可变的方法，那么.map(obj => ({ ...obj, children: removeItemWithId(obj.children, id) }));

【解决方案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);

【讨论】：