如何同时过滤多层嵌套对象数组中的title属性？

现有嵌套对象数组结构，需根据searchValue过滤整个数组，要求同时匹配顶层title与子数组elems中的title。当前代码仅能过滤顶层title，无法匹配elems内的title，期望输入about或portfolio时显示第一个分类对象，输入services或jobs时显示第二个。

当前代码：

state: {
    searchValue: "",

    categories: [
        {
            title: "about",
            open: false,
            elems: [{ title: "portfolio" }],
        },
        {
            title: "services",
            open: false,
            elems: [{ title: "jobs" }],
        },
    ],
},

getters: {
    categories(state) {
        return state.categories.filter(item => {
            return item.title.toLowerCase().includes(state.searchValue.toLowerCase())
        })
    }
}

解决方案 #

修改getter的过滤逻辑，同时检查当前项的title和**elems数组中是否存在匹配的title**，用Array.some()判断子数组是否有符合条件的元素：

getters: {
    categories(state) {
        const search = state.searchValue.toLowerCase();
        return state.categories.filter(item => {
            // 匹配顶层title
            const matchesTop = item.title.toLowerCase().includes(search);
            // 匹配elems中的任意一个title
            const matchesElems = item.elems.some(elem => 
                elem.title.toLowerCase().includes(search)
            );
            // 满足任一条件则保留该分类
            return matchesTop || matchesElems;
        })
    }
}

逻辑说明 #

• 提前将搜索值转小写，避免重复转换提升性能
• matchesTop判断当前分类的顶层title是否匹配搜索值
• matchesElems通过some()遍历elems数组，只要有一个元素的title匹配就返回true
• 两个条件用||连接，满足任意一个就保留该分类对象

内容的提问来源于stack exchange，提问作者Synchro