JavaScript 嵌套数组过滤：结合 filter 与 find 实现深层筛选
本文介绍在 JavaScript 中对嵌套数组进行过滤的解决方案。当标准 filter 无法直接处理深层结构时，通过结合使用 filter 和 find 方法，可以在外层遍历的同时检查内层数组是否包含目标值。文章提供了基于 lodash 和原生 JS 的完整代码示例，涵盖判空、分页及递归搜索等实际场景，帮助开发者高效处理复杂数据结构。
JavaScript 中对嵌套数组进行 filter 过滤
近期遇到一个业务需求，需要对嵌套数组执行 filter 过滤操作。在 CSDN 等社区搜索后未找到现成的合适方案，经过自行摸索最终解决了该问题，特此记录解决思路。
鉴于实际返回的数据结构较为复杂，此处仅展示一个简化的样例以便说明。
listData = [
{
name: 'zhangsan'
data: [A,B,C]
},
{
name: 'lisi'
data: [D,E,F]
}
]主要目标是在 data 数组内部进行筛选，提取特定的 name 字段。由于 filter 默认仅作用于第一层结构，尝试使用两层 filter 并未生效。经过多次测试，最终确认通过 filter 配合 find 方法可以实现预期效果，具体代码逻辑如下。
const filterRepositoryList = () => {
if (
!slectedInfo.sigSelected &&
!slectedInfo.repositiorySelected &&
!slectedInfo.maintainerSelected
) {
repoRenderList.value = repositioryList.value.slice(0, 99);
getSigList(initialParams);
} else {
SigList.value = _.filter(allList.value, (item: any) => {
return (
(!slectedInfo.sigSelected ||
item.sig_name === slectedInfo.sigSelected) &&
(!slectedInfo.repositiorySelected ||
item.repos.find((subItem: string) => {
return subItem === slectedInfo.repositiorySelected;
})) &&
(!slectedInfo.maintainerSelected ||
item.maintainers.find((subItem: string) => {
return subItem === slectedInfo.maintainerSelected;
}))
);
});
paginationData.value.total = SigList.value.length;
}
};该代码片段涵盖了完整的筛选逻辑。由于筛选后的表格下方包含分页组件，因此增加了判空处理：若筛选结果为空，则展示全部数据并添加分片逻辑；若存在筛选条件，则执行筛选。以下为核心代码部分。
// 安装了lodash，所以用了lodash的筛选
SigList.value = _.filter(allList.value, (item: any) => {
return (
(!slectedInfo.sigSelected ||
item.sig_name === slectedInfo.sigSelected) &&
// 双层筛选主要代码，在data数组中进行find
(!slectedInfo.repositiorySelected ||
item.repos.find((subItem: string) => {
return subItem === slectedInfo.repositiorySelected;
})) &&
(!slectedInfo.maintainerSelected ||
item.maintainers.find((subItem: string) => {
return subItem === slectedInfo.maintainerSelected;
}))
);
});通过上述方式，成功实现了双层数组的过滤功能。
JavaScript 多层数组的 Filter 过滤
// 搜索框过滤
function searchFilter(list, key, num, prevList) {
for (let i = list.length - 1; i >= 0; i--) {
let item = list[i]
if (item.children && Array.isArray(item.children) && item.children.length > 0) {
searchFilter(item.children, key, i, list);
} else {
if (item.title && !item.title.includes(key)) {
list.splice(i, 1)
}
}
}
if (Array.isArray(list) && list.length == 0) {
if(prevList && num){
prevList.splice(num, 1)
}
}
}
//调用
searchFilter(list,key)总结
以上为个人实践经验分享，希望能提供参考，也欢迎大家支持本站。
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别：JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53