如何在深層嵌套數組中查找具有 id 值的對象？

Question

鑒於此結構，我如何在這個深度嵌套的對象結構中找到具有給定 id 的對象。

const menuItems = [
    {
        id: 1,
        imageUrl: "http://placehold.it/65x65",
        display: "Shop Women",
        link: "#",
        type: "image",
        nextItems: [
            {
                id: 10,
                display: "홈",
                link: "#",
                type: "menuitem"
            },
            {
                id: 20,
                display: "의류",
                link: "#",
                type: "menuitem-withmore",
                nextItems: [
                    {
                        id: 100,
                        display: "I'm inside one nest",
                        link: "#",
                        type: "menuitem"
                    }
                ]
            },
            {
                id: 30,
                display: "가방",
                link: "#",
                type: "menuitem-withmore",
                nextItems: []
            },
            {
                id: 40,
                display: "신발",
                link: "#",
                type: "menuitem-withmore",
                nextItems: []
            },
            {
                id: 50,
                display: "악세서리",
                link: "#",
                type: "menuitem-withmore",
                nextItems: []
            },
            {
                id: 60,
                display: "SALE",
                link: "#",
                type: "menuitem-withmore",
                style: "bold",
                nextItems: []
            },
            {
                id: 70,
                display: "브랜드",
                link: "#",
                type: "menuitem-withmore",
                nextItems: []
            },
            {
                type: "separator"
            },
            {
                id: 80,
                display: "위시리스트",
                link: "#",
                type: "menuitem"
            },
            {
                id: 90,
                display: "고객센터",
                link: "#",
                type: "menuitem"
            },
            {
                id: 99,
                display: "앱 다운로드",
                link: "#",
                type: "menuitem"
            }
        ]
    },
    {
        id: 2,
        imageUrl: "http://placehold.it/65x65",
        display: "Shop Men",
        link: "#",
        type: "image",
        nextItems: [
            {
                id: 95,
                display: "MEN's ITEMS.",
                link: "#",
                type: "menuitem"
            }
        ]
    }
];

假設我想找到id: 20的對象並返回：

        {
            id: 20,
            display: "의류",
            link: "#",
            type: "menuitem-withmore",
            nextItems: [
                {
                    id: 100,
                    display: "I'm inside one nest",
                    link: "#",
                    type: "menuitem"
                }
            ]
        },

我似乎找不到如何為此使用 lodash，這個包可能已經解決了我的問題，但我不明白如何讓它適用於我的用例。

https://github.com/dominik791/obj-traverse

Answer 1

使用 DFS。

 const menuItems = [ { id: 1, imageUrl: "http://placehold.it/65x65", display: "Shop Women", link: "#", type: "image", nextItems: [ { id: 10, display: "홈", link: "#", type: "menuitem" }, { id: 20, display: "의류", link: "#", type: "menuitem-withmore", nextItems: [ { id: 100, display: "I'm inside one nest", link: "#", type: "menuitem" } ] }, { id: 30, display: "가방", link: "#", type: "menuitem-withmore", nextItems: [] }, { id: 40, display: "신발", link: "#", type: "menuitem-withmore", nextItems: [] }, { id: 50, display: "악세서리", link: "#", type: "menuitem-withmore", nextItems: [] }, { id: 60, display: "SALE", link: "#", type: "menuitem-withmore", style: "bold", nextItems: [] }, { id: 70, display: "브랜드", link: "#", type: "menuitem-withmore", nextItems: [] }, { type: "separator" }, { id: 80, display: "위시리스트", link: "#", type: "menuitem" }, { id: 90, display: "고객센터", link: "#", type: "menuitem" }, { id: 99, display: "앱 다운로드", link: "#", type: "menuitem" } ] }, { id: 2, imageUrl: "http://placehold.it/65x65", display: "Shop Men", link: "#", type: "image", nextItems: [ { id: 95, display: "MEN's ITEMS.", link: "#", type: "menuitem" } ] } ]; function dfs(obj, targetId) { if (obj.id === targetId) { return obj } if (obj.nextItems) { for (let item of obj.nextItems) { let check = dfs(item, targetId) if (check) { return check } } } return null } let result = null for (let obj of menuItems) { result = dfs(obj, 100) if (result) { break } } console.dir(result)

Answer 2

你可以試試這個功能，它會隨着深層的動態變化而工作

function findNodeById(nodes, id, callback?) {
  let res;

  function findNode(nodes, id) {

    for (let i = 0; i < nodes.length; i++) {
      if (nodes[i].id === id) {
        res = nodes[i];
        // you can also use callback back here for more options ;)
        // callback(nodes[i]);
        break;
      }
      if (nodes[i].nextItems) {
        findNode(nodes[i].nextItems, id);
      }
    }
  }

  findNode(nodes, id)

  return res;
}

findNodeById(menuItems, 99) // { id: 99, display: "앱 다운로드", link: "#", type: "menuitem" }

Answer 3

也許這有幫助

menuItems.map(item => {
    if (item.id === 10) return item;
});

順便說一句，我沒有考慮這個解決方案的效率。

Answer 4

我會做

 const menuItems = [ { id: 1, imageUrl: "http://placehold.it/65x65", display: "Shop Women", link: "#", type: "image", nextItems: [ { id: 10, display: "홈", link: "#", type: "menuitem" }, { id: 20, display: "의류", link: "#", type: "menuitem-withmore", nextItems: [ { id: 100, display: "I'm inside one nest", link: "#", type: "menuitem" } ] }, { id: 30, display: "가방", link: "#", type: "menuitem-withmore", nextItems: [] }, { id: 40, display: "신발", link: "#", type: "menuitem-withmore", nextItems: [] }, { id: 50, display: "악세서리", link: "#", type: "menuitem-withmore", nextItems: [] }, { id: 60, display: "SALE", link: "#", type: "menuitem-withmore", style: "bold", nextItems: [] }, { id: 70, display: "브랜드", link: "#", type: "menuitem-withmore", nextItems: [] }, { type: "separator" }, { id: 80, display: "위시리스트", link: "#", type: "menuitem" }, { id: 90, display: "고객센터", link: "#", type: "menuitem" }, { id: 99, display: "앱 다운로드", link: "#", type: "menuitem" } ] }, { id: 2, imageUrl: "http://placehold.it/65x65", display: "Shop Men", link: "#", type: "image", nextItems: [ { id: 95, display: "MEN's ITEMS.", link: "#", type: "menuitem" } ] } ]; var data = []; menuItems.forEach(function(item) { item.nextItems.forEach(function(element) { data.push(element) }, this); }, this); console.log(_.where(data, {id: 20}));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Answer 5

如果您使用的是 lodash，您只需要.find(collection, [predicate= .identity])。
所以你想要這樣的東西：

_.find(menuItems, function(item) {
   return item.id = 20;
});