用于搜索实现的多级数组过滤器

Question

我正在尝试使用多级数组实现搜索。考虑我有如下 JSON 多级数组const testData = [        {            menu: 'Test',            submenu: [                {                    menu: 'Test1',                },                {                    menu: 'Test2',                    submenu: [                        {                            menu: 'Test2.1',                        },                        {                            menu: 'Test2.2',                        },                        {                            menu: 'Test2.3',                        },                    ],                },            {        menu: 'TestNew',        submenu: [            {                menu: 'TestNew1.1',            },            {                menu: 'TestNew1.2'            },            {                menu: 'TestNew1.3',            },        ],    },            ],        }]如果我尝试搜索单词 Test2.3，我有搜索框，我希望 JSON 采用以下格式const testData = [        {            menu: 'Test',            submenu: [                {                    menu: 'Test2',                    submenu: [                        {                            menu: 'Test2.3'                        },                    ],                },            ],        }]我已经引用了链接Using array.filter down multiple levels但它不符合我的输出。它返回所有子菜单，如下所示const testData = [        {            menu: 'Test',            submenu: [                {                    menu: 'Test1',                },                {                    menu: 'Test2',                    submenu: [                        {                            menu: 'Test2.1',                        },                        {                            menu: 'Test2.2',                        },                        {                            menu: 'Test2.3',                        },                    ],                },            ],        }]我们还有其他方法可以满足我的期望吗？提前致谢

Answer 1

您可以使用递归方法，reduce该方法仅返回找到目标值的子菜单元素并过滤掉其他元素。

const data = [{"menu":"Test","submenu":[{"menu":"Test1"},{"menu":"Test2","submenu":[{"menu":"Test2.1"},{"menu":"Test2.2"},{"menu":"Test2.3"}]},{"menu":"TestNew","submenu":[{"menu":"TestNew1.1"},{"menu":"TestNew1.2"},{"menu":"TestNew1.3"}]}]}]

function search(data, value) {

  return data.reduce((r, e) => {

    const object = { ...e }

    const result = search(e.submenu || [], value)

    if (result.length) object.submenu = result

    if (e.menu == value || result.length) r.push(object)

    return r;

  }, [])

}

console.log(search(data, 'Test2.1'))

console.log(search(data, 'TestNew1.3'))