本文探讨了在javascript中过滤深层嵌套对象数组时，如何同时保留匹配项的父级层级结构。针对 `deepdash` 等库在特定场景下可能无法满足完整父级保留需求的问题，文章提出了一种基于数据结构扁平化（使用统一的 `children` 键）和自定义递归过滤函数的高效解决方案。该方法确保了过滤结果不仅包含符合条件的子项，还完整地呈现了其所有祖先节点，维持了数据的原始层级关系，并强调了不可变性原则。
在现代Web开发中，我们经常需要处理结构复杂、层级深远的嵌套数据，例如产品目录、组织架构或文件系统。当需要根据特定条件过滤这些数据，并要求保留所有匹配项及其完整的父级层级结构时，传统的数组过滤方法（如 Array.prototype.filter）往往力不从心。本文将深入探讨这一挑战，并提供一个高效、灵活的递归解决方案。
深度过滤的挑战
想象一个多层级的产品分类数据，每个产品都有唯一的编码。我们的目标是根据产品编码过滤出所有匹配的产品，同时确保这些产品所属的类别、子类别乃至顶层分类都能被完整地保留下来。这意味着，如果一个产品被过滤出来，其所有上级节点（无论它们自身是否包含匹配的属性）都必须出现在最终结果中。
deepdash 库的局限性分析
一些第三方库，如 deepdash，提供了 _.filterDeep 等深度操作方法，旨在简化对嵌套对象的处理。然而，在实现“保留完整父级层级”这一特定需求时，这些库可能无法直接满足。
例如，使用 deepdash 的 _.filterDeep 尝试过滤产品编码：
import _ from 'deepdash'; // 假设deepdash已导入
function arrayFilter(products_array, searchVal = 'PUL') {
let list = _.filterDeep(
products_array,
function(value, key) {
// 仅当键为'code'且值包含searchVal时返回true
if (key === 'code' && typeof value === 'string') {
return value.indexOf(searchVal) >= 0;
}
return false;
},
{
// onTrue: { skipChildren: false } 选项通常用于决定是否继续遍历子节点
// 但它不保证保留父节点的所有其他属性，或者在子节点匹配时保留父节点的完整结构
onTrue: { skipChildren: false },
}
);
console.log(list);
}
// 原始数据结构示例 (为简洁，此处仅展示部分结构)
const productsData = [
{
name: 'Food to Go',
filter: 'food',
categories_list: [
{
name: 'Bepulp Compostable',
sub_categories: [
{
name: 'BOWLS & CONTAINERS',
products: [
{
type: 'RECTANGULAR',
products_list: [
{ color: 'natural', code: 'PAP46120', description: 'Rectangular tray 600ml' },
{ color: 'natural', code: 'PUL46130', description: 'Rectangular tray 950ml' },
// ...更多产品
]
},
]
},
],
},
],
},
// ...更多顶层产品分类
];
// arrayFilter(productsData, 'PUL');上述 deepdash 的 filterDeep 方法在执行后，其输出可能仅包含匹配到的 code 属性及其最直接的父级容器，而丢失了其他非匹配父级节点的完整信息（如 name, filter, color 等），也可能无法完整保留整个父级对象，这与我们“保留完整父级层级”的目标不符。它倾向于返回一个稀疏的、只包含匹配路径的结构。
解决方案：递归过滤与数据结构优化
为了实现精确的深度过滤并保留完整的父级层级，我们可以采用一种结合数据结构优化和自定义递归过滤函数的策略。
3.1 数据结构扁平化
复杂的数据结构往往具有不同的子级键名（例如 categories_list、sub_categories、products、products_list）。为了简化递归逻辑，推荐将所有表示子集合的键统一命名为 children。这种扁平化处理能让递归函数更加通用和简洁。
原始数据结构片段：
{
"name": "Food to Go",
"categories_list": [
{
"name": "Bepulp Compostable",
"sub_categories": [
{
"name": "BOWLS & CONTAINERS",
"products": [
{
"type": "RECTANGULAR",
"products_list": [
{ "code": "PUL46120", /* ... */ }
]
}
]
}
]
}
]
}扁平化后的数据结构片段（使用 children 键）：
{
"name": "Food to Go",
"filter": "food",
"color": "#f9dd0a",
"children": [ // 原来的 categories_list
{
"name": "Bepulp Compostable",
"children": [ // 原来的 sub_categories
{
"name": "BOWLS & CONTAINERS",
"children": [ // 原来的 products
{
"name": "RECTANGULAR", // 原来的 type 字段可能被提升为 name
"children": [ // 原来的 products_list
{ "name": "PUL46120", "color": "natural", "code": "PUL46120", /* ... */ },
{ "name": "PUL46130", "color": "natural", "code": "PUL46130", /* ... */ }
]
}
]
}
]
}
]
}注意： 实际操作中，您可能需要编写一个预处理函数来将原始数据转换为这种统一的 children 结构。如果无法修改原始数据结构，递归函数则需要更复杂的逻辑来处理不同的子键名。
3.2 递归过滤函数的实现
核心思想是创建一个递归函数，它遍历每个节点。如果节点自身符合过滤条件，或者其任何子节点（经过递归过滤后）符合条件，则该节点及其过滤后的子节点都将被保留。
首先，我们需要一个辅助函数来创建对象的浅拷贝，以避免直接修改原始数据（保持不可变性）。
/**
* 创建对象的浅拷贝。
* @param {Object} o - 要拷贝的对象。
* @returns {Object} 对象的浅拷贝。
*/
function copy(o) {
return Object.assign({}, o);
}
/**
* 递归过滤函数，用于深度过滤嵌套对象数组并保留父级层级。
* @param {Array<Object>} data - 要过滤的原始数据数组。
* @param {string} searchVal - 搜索值。
* @returns {Array<Object>} 过滤后的数据数组，保留了匹配项的父级层级。
*/
function filterDeepWithHierarchy(data, searchVal) {
// 将搜索值转换为小写，以便进行不区分大小写的比较
const lowerCaseSearchVal = searchVal.toLowerCase();
/**
* 核心递归过滤逻辑。
* @param {Object} o - 当前正在处理的对象。
* @returns {Object|boolean} 如果对象或其子对象匹配，则返回过滤后的对象；否则返回false。
*/
function recursiveFilter(o) {
// 定义过滤条件：检查对象的 name 或 description 属性是否包含搜索值
// 您可以根据实际需求扩展这里的过滤逻辑，例如检查 'code' 属性等
const matches = (
(o.name && o.name.toLowerCase().includes(lowerCaseSearchVal)) ||
(o.description && o.description.toLowerCase().includes(lowerCaseSearchVal)) ||
(o.code && o.code.toLowerCase().includes(lowerCaseSearchVal)) // 示例中主要根据code过滤
);
// 如果当前对象有子节点
if (o.children) {
// 1. 对子节点进行浅拷贝 (map(copy))
// 2. 递归调用 recursiveFilter 对拷贝后的子节点进行过滤 (filter(recursiveFilter))
// 3. 将过滤后的子节点重新赋值给当前对象的 children 属性
// 4. 检查过滤后的子节点数组的长度。如果长度大于0，说明有子节点匹配，则父节点也应保留。
// 或者如果父节点自身匹配 (matches)，也应保留。
const filteredChildren = o.children.map(copy).filter(recursiveFilter);
if (matches || filteredChildren.length > 0) {
const newObj = copy(o); // 拷贝父对象
newObj.children = filteredChildren; // 更新其子节点
return newObj;
}
return false; // 如果父节点不匹配且没有匹配的子节点，则不保留
}
// 如果当前对象没有子节点（叶子节点），直接根据自身匹配情况返回
return matches ? copy(o) : false;
}
// 对顶层数组的每个元素进行浅拷贝，然后应用递归过滤
// 最终过滤掉所有返回 false 的元素
return data.map(copy).filter(recursiveFilter);
}
// 原始产品数据（假设已经过扁平化处理，将所有子集合键统一为 'children'）
const products = [
{
name: 'Food to Go',
filter: 'food',
color: '#f9dd0a',
children: [ // 原来的 categories_list
{
name: 'Bepulp Compostable',
children: [ // 原来的 sub_categories
{
name: 'BOWLS & CONTAINERS',
children: [ // 原来的 products
{
name: 'RECTANGULAR', // 原来的 type
children: [ // 原来的 products_list
{ name: 'PUL46120', color: 'natural', code: 'PUL46120', description: 'Rectangular tray 600ml' },
{ name: 'PUL46130', color: 'natural', code: 'PUL46130', description: 'Rectangular tray 950ml' },
{ name: 'PUL51601', color: 'clear', code: 'PUL51601', description: 'rPET lid for rectangular tray' }
]
},
{
name: 'SQUARE', // 原来的 type
children: [
{ name: 'PUL15012', color: 'natural', code: 'PUL15012', description: 'Square bowl 375ml' },
{ name: 'PUL15016', color: 'natural', code: 'PUL15016', description: 'Square bowl 500ml' }
]
}
]
},
{
name: 'GRAB & GO',
children: [
{
name: 'GRAB & GO square tray',
children: [
{ name: 'PUL400606', color: 'natural', code: 'PUL400606', description: 'GRAB & GO square tray 13x13 cm' },
]
}
]
},
{
name: 'BOXES TO GO',
children: [
{
name: 'Hamburger box',
children: [
{ name: 'PUL2014N', color: 'white', code: 'PUL2014N', description: 'Hamburger box 800ml' },
]
},
]
}
],
},
{
name: 'Recyclable Paper',
children: [
{
name: 'PAPER CUTLERY',
children: [
{ name: 'PAP3510', color: 'white', code: 'PAP3510', description: 'Fork', isNew: true },
]
},
{
name: 'SNAP & GO',
children: [
{ name: 'PAP15KSG375', color: 'Kraft', code: 'PAP15KSG375', description: 'Salad tray 12oz', isNew: true },
]
},
],
},
],
},
{
name: 'BEVERAGE SOLUTIONS',
filter: 'beverage',
color: '#0ad5f9',
children: [
{
name: 'Beverage on the Move',
children: [
{ name: 'PAPBOTM2417', color: 'Kraft', code: 'PAPBOTM2417', description: 'Bag-In-Box KRAFT 2,8L' }
]
},
],
},
];
const filteredProducts = filterDeepWithHierarchy(products, 'PUL');
console.log(JSON.stringify(filteredProducts, null, 2));代码解析：
- copy(o) 函数：这是一个简单的辅助函数，使用 Object.assign({}, o) 创建一个对象的浅拷贝。这对于保持原始数据不可变性至关重要，确保过滤操作不会对原始数据产生副作用。
-
filterDeepWithHierarchy(data, searchVal) 函数：这是主过滤函数，它接收原始数据数组和搜索值。
- 它首先将 searchVal 转换为小写，以便进行不区分大小写的匹配。
- 然后，它对顶层 data 数组的每个元素应用 recursiveFilter 函数。
-
recursiveFilter(o) 函数：这是核心的递归逻辑。
- 匹配条件：首先检查当前对象 o 的 name、description 或 code 属性是否包含 lowerCaseSearchVal。这个匹配逻辑可以根据您的具体需求进行扩展。
-
处理子节点：如果当前对象 o 包含 children 属性：
- 它首先对 o.children 数组中的每个子节点调用 copy 进行浅拷贝。
- 然后，对这些拷贝后的子节点递归调用 recursiveFilter 进行过滤。
- filter(recursiveFilter) 的结果是一个新的数组 filteredChildren，只包含匹配的子节点。
- 父节点保留逻辑：如果当前对象自身匹配 (matches) 或者 filteredChildren 数组的长度大于0（说明有子节点匹配），则当前父节点应该被保留。在这种情况下，我们再次对父对象进行 copy，然后将其 children 属性更新为 filteredChildren，并返回这个新的父对象。
- 如果父节点不匹配且没有匹配的子节点，则返回 false，表示该父节点不应被保留。
- 处理叶子节点：如果当前对象没有 children 属性（即它是一个叶子节点），则直接根据其自身是否匹配来决定是否保留。如果匹配，则返回其拷贝；否则返回 false。
注意事项与最佳实践
- 不可变性 (Immutability)：在整个过滤过程中，我们始终通过 copy 函数创建对象的浅拷贝。这避免了直接修改原始数据，是函数式编程和复杂数据操作中的一个重要原则，可以防止意外的副作用，使代码更易于理解和调试。
- 性能考量：对于非常庞大和深层嵌套的数据集，频繁的拷贝和递归调用可能会带来一定的性能开销。在极端情况下，可能需要考虑优化策略，例如使用不可变数据结构库（如 Immer.js）或针对特定场景进行性能分析和调整。然而，对于大多数常见应用场景，这种递归方法是高效且可接受的。
- 谓词的灵活性：recursiveFilter 函数中的匹配条件 (matches) 是高度灵活的。您可以根据实际需求，在其中加入更复杂的逻辑，例如多字段匹配、正则表达式匹配、数值范围比较等。
- 数据结构预处理：如果原始数据结构不统一，包含多种表示子集合的键名，您可能需要一个额外的预处理步骤，将原始数据转换为统一使用 children 键的结构，从而简化递归过滤函数的实现。
总结
通过数据结构扁平化和自定义
