javascript - 删除具有 delete: true 属性的数组的所有元素

Question

大家。我有一组地图对象。就像这样;

[
    {
        "link": "./1.css",
        "url": "http://opdetect.com/x/1.css",
        "css": "css only gets text",
        "parentCSS": -1,
        "childCSSs": [
            {
                "link": "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css",
                "url": "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css",
                "css": "css only gets text",
                "parentCSS": "http://opdetect.com/x/1.css",
                "childCSSs": [],
                "delete": false
            },
            {
                "link": "http://opdetect.com/x/1-2.css",
                "url": "http://opdetect.com/x/1-2.css",
                "css": "css only gets text",
                "parentCSS": "http://opdetect.com/x/1.css",
                "childCSSs": [
                    {
                        "link": "https://meyerweb.com/eric/tools/css/reset/reset200802.css",
                        "url": "https://meyerweb.com/eric/tools/css/reset/reset200802.css",
                        "css": "css only gets text",
                        "parentCSS": "http://opdetect.com/x/1-2.css",
                        "childCSSs": [],
                        "delete": false
                    },
                    {
                        "link": "http://opdetect.com/x/1-2-2.css",
                        "url": "http://opdetect.com/x/1-2-2.css",
                        "css": "css only gets text",
                        "parentCSS": "http://opdetect.com/x/1-2.css",
                        "childCSSs": [
                            {
                                "link": "http://opdetect.com/x/1-2-2-1.css",
                                "url": "http://opdetect.com/x/1-2-2-1.css",
                                "css": "css only gets text",
                                "parentCSS": "http://opdetect.com/x/1-2-2.css",
                                "childCSSs": [],
                                "delete": false
                            }
                        ],
                        "delete": false
                    }
                ],
                "delete": false
            }
        ],
        "delete": false
    },
    {
        "link": "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css",
        "url": "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css",
        "css": "css only gets text",
        "parentCSS": -1,
        "childCSSs": [],
        "delete": true
    },
    {
        "link": "http://opdetect.com/x/1-2.css",
        "url": "http://opdetect.com/x/1-2.css",
        "css": "css only gets text",
        "parentCSS": -1,
        "childCSSs": [
            {
                "link": "https://meyerweb.com/eric/tools/css/reset/reset200802.css",
              "url":"https://meyerweb.com/eric/tools/css/reset/reset200802.css",
                "css": "css only gets text",
                "parentCSS": "http://opdetect.com/x/1-2.css",
                "childCSSs": [],
                "delete": false
            },
            {
                "link": "http://opdetect.com/x/1-2-2.css",
                "url": "http://opdetect.com/x/1-2-2.css",
                "css": "css only gets text",
                "parentCSS": "http://opdetect.com/x/1-2.css",
                "childCSSs": [
                    {
                        "link": "http://opdetect.com/x/1-2-2-1.css",
                        "url": "http://opdetect.com/x/1-2-2-1.css",
                        "css": "css only gets text",
                        "parentCSS": "http://opdetect.com/x/1-2-2.css",
                        "childCSSs": [],
                        "delete": false
                    }
                ],
                "delete": false
            }
        ],
        "delete": true
    },
    {
        "link": "https://meyerweb.com/eric/tools/css/reset/reset200802.css",
        "url": "https://meyerweb.com/eric/tools/css/reset/reset200802.css",
        "css": "css only gets text",
        "parentCSS": -1,
        "childCSSs": [],
        "delete": true
    },
    {
        "link": "http://opdetect.com/x/1-2-2.css",
        "url": "http://opdetect.com/x/1-2-2.css",
        "css": "css only gets text",
        "parentCSS": -1,
        "childCSSs": [
            {
                "link": "http://opdetect.com/x/1-2-2-1.css",
                "url": "http://opdetect.com/x/1-2-2-1.css",
                "css": "css only gets text",
                "parentCSS": "http://opdetect.com/x/1-2-2.css",
                "childCSSs": [],
                "delete": false
            }
        ],
        "delete": true
    },
    {
        "link": "http://opdetect.com/x/1-2-2-1.css",
        "url": "http://opdetect.com/x/1-2-2-1.css",
        "css": "css only gets text",
        "parentCSS": -1,
        "childCSSs": [],
        "delete": true
    }
]

我想删除所有具有delete: true数组childCSS: [...]对象的元素。我怎样才能做到这一点？我试图这样做；

links.forEach((link, index) => {
    postTraverse(link, links, index);
});

const postTraverse = (obj, links, index) => {
    if(!obj.delete) {
        if(obj.hasOwnProperty('childCSSs')) {
            if(obj.childCSSs.length > 0) {
                obj.childCSSs.forEach((childObj, childIndex) => {
                    return postTraverse(childObj, links, childIndex);
                });
            }
        }
    } else {
        if(obj.hasOwnProperty('childCSSs')) {
            if(obj.parentCSS == -1) {
                links.splice(index, 1);
            } else {
                obj.childCSSs.splice(index, 1);
            }
        } else {
            links.splice(index, 1);
        }
    }
};

这种解决问题的方法，由于 after 跳过了一些元素array.splice(index, 1)，因此数组的长度减少了 1 并且array.forEach((link, index) => {...})该语句的索引不会减少。问题就在这里，但如果有更好的方法来解决这个问题，它会非常有帮助！谢谢！

标签： javascriptarraysrecursion

Answer 1

如果要将项目保留在数组中，请尝试使用.filter过滤项目属性的 a ：childCSSs

const doFilter = arr => arr.filter((item) => {
  if (item.delete) return false;
  item.childCSSs = doFilter(item.childCSSs);
  return true;
});

const input=[{"link":"./1.css","url":"http://opdetect.com/x/1.css","css":"css only gets text","parentCSS":-1,"childCSSs":[{"link":"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css","url":"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css","css":"css only gets text","parentCSS":"http://opdetect.com/x/1.css","childCSSs":[],"delete":!1},{"link":"http://opdetect.com/x/1-2.css","url":"http://opdetect.com/x/1-2.css","css":"css only gets text","parentCSS":"http://opdetect.com/x/1.css","childCSSs":[{"link":"https://meyerweb.com/eric/tools/css/reset/reset200802.css","url":"https://meyerweb.com/eric/tools/css/reset/reset200802.css","css":"css only gets text","parentCSS":"http://opdetect.com/x/1-2.css","childCSSs":[],"delete":!1},{"link":"http://opdetect.com/x/1-2-2.css","url":"http://opdetect.com/x/1-2-2.css","css":"css only gets text","parentCSS":"http://opdetect.com/x/1-2.css","childCSSs":[{"link":"http://opdetect.com/x/1-2-2-1.css","url":"http://opdetect.com/x/1-2-2-1.css","css":"css only gets text","parentCSS":"http://opdetect.com/x/1-2-2.css","childCSSs":[],"delete":!1}],"delete":!1}],"delete":!1}],"delete":!1},{"link":"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css","url":"https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css","css":"css only gets text","parentCSS":-1,"childCSSs":[],"delete":!0},{"link":"http://opdetect.com/x/1-2.css","url":"http://opdetect.com/x/1-2.css","css":"css only gets text","parentCSS":-1,"childCSSs":[{"link":"https://meyerweb.com/eric/tools/css/reset/reset200802.css","url":"https://meyerweb.com/eric/tools/css/reset/reset200802.css","css":"css only gets text","parentCSS":"http://opdetect.com/x/1-2.css","childCSSs":[],"delete":!1},{"link":"http://opdetect.com/x/1-2-2.css","url":"http://opdetect.com/x/1-2-2.css","css":"css only gets text","parentCSS":"http://opdetect.com/x/1-2.css","childCSSs":[{"link":"http://opdetect.com/x/1-2-2-1.css","url":"http://opdetect.com/x/1-2-2-1.css","css":"css only gets text","parentCSS":"http://opdetect.com/x/1-2-2.css","childCSSs":[],"delete":!1}],"delete":!1}],"delete":!0},{"link":"https://meyerweb.com/eric/tools/css/reset/reset200802.css","url":"https://meyerweb.com/eric/tools/css/reset/reset200802.css","css":"css only gets text","parentCSS":-1,"childCSSs":[],"delete":!0},{"link":"http://opdetect.com/x/1-2-2.css","url":"http://opdetect.com/x/1-2-2.css","css":"css only gets text","parentCSS":-1,"childCSSs":[{"link":"http://opdetect.com/x/1-2-2-1.css","url":"http://opdetect.com/x/1-2-2-1.css","css":"css only gets text","parentCSS":"http://opdetect.com/x/1-2-2.css","childCSSs":[],"delete":!1}],"delete":!0},{"link":"http://opdetect.com/x/1-2-2-1.css","url":"http://opdetect.com/x/1-2-2-1.css","css":"css only gets text","parentCSS":-1,"childCSSs":[],"delete":!0}]

console.log(doFilter(input));