本文探讨了在处理复杂嵌套对象数组时，如何实现深度过滤并同时保留匹配项的完整父级层级。针对`deepdash`等库在默认情况下可能移除非匹配父级属性的问题，文章提出了一种自定义的递归过滤解决方案。该方案通过标准化数据结构和精心设计的递归函数，确保过滤结果既包含匹配项，又完整地保留了其在原始数据结构中的上下文信息，避免了数据扁平化或信息丢失。
在前端或后端数据处理中，我们经常会遇到包含多层嵌套对象和数组的复杂数据结构，例如产品目录、组织架构等。当需要根据某个深层属性（如产品编码）进行过滤时，一个常见的需求是不仅要获取匹配的叶子节点，还要保留其所有祖先节点及其所有属性，以维持数据的完整上下文。
例如，一个产品数组可能包含多个层级：产品类别 (Category) -> 子类别 (Sub-Category) -> 产品类型 (Product Type) -> 具体产品 (Product Item)。如果我们要查找所有编码中包含特定字符串的产品，并希望最终结果依然是一个完整的树形结构，只包含匹配产品及其所有上层父级（即使父级本身不匹配过滤条件），那么标准的深度过滤方法可能无法满足要求。
一些实用工具库，如 deepdash，提供了 _.filterDeep 这样的函数来简化深度遍历和过滤操作。然而，这些库在默认行为下，往往倾向于只返回那些直接匹配过滤条件的节点，或者在保留父节点时，只保留与过滤条件相关的部分属性，而移除其他不直接相关的父级属性。
考虑以下原始数据结构示例：
const products_array = [
{
name: 'Food to Go',
filter: 'food',
color: '#f9dd0a',
categories_list: [ // 第一层子数组
{
name: 'Bepulp Compostable',
sub_categories: [ // 第二层子数组
{
name: 'BOWLS & CONTAINERS',
products: [ // 第三层子数组
{
type: 'RECTANGULAR',
products_list: [ // 第四层子数组
{ color: 'natural', code: 'PAP46120', description: 'Rectangular tray 600ml 16x23 cm' },
{ color: 'natural', code: 'PUL46130', description: 'Rectangular tray 950ml 16x23 cm' },
// ...更多产品
]
},
// ...更多产品类型
]
},
// ...更多子类别
],
},
// ...更多类别
],
},
// ...更多顶级产品组
];如果我们使用 deepdash.filterDeep 并尝试按 code 属性进行过滤，例如查找所有 code 包含 'PUL' 的产品，默认情况下，它可能会返回一个高度扁平化或只包含匹配 code 属性的稀疏结构：
// 使用 deepdash.filterDeep 后的典型输出（简化）
const currentOutput = [
{
categories_list: [
{
sub_categories: [
{
products: [
{
products_list: [
{ code: 'PUL46130' },
{ code: 'PUL51601' },
// ...
]
},
// ...
]
},
// ...
],
},
],
}
];可以看到，除了 code 属性和其直接的父级数组结构外，所有其他属性（如 name, filter, color, description 等）都被移除了，这显然不符合保留完整层级和上下文的需求。
我们期望的输出是，如果一个叶子节点（例如一个具体产品）匹配了过滤条件，那么从根节点到该叶子节点的所有父级节点都应该被保留，并且这些父级节点的所有原始属性也应完整保留。
// 期望的输出（简化）
const expectedOutput = [
{
name: 'Food to Go', // 顶级父级及其属性被保留
filter: 'food',
color: '#f9dd0a',
categories_list: [
{
name: 'Bepulp Compostable', // 中间父级及其属性被保留
sub_categories: [
{
name: 'BOWLS & CONTAINERS', // 另一层父级及其属性被保留
products: [
{
type: 'RECTANGULAR', // 产品类型及其属性被保留
products_list: [
{ color: 'natural', code: 'PUL46130', description: 'Rectangular tray 950ml 16x23 cm', /* ...所有属性 */ },
{ color: 'clear', code: 'PUL51601', description: 'rPET lid for rectangular tray 16x23 cm', /* ...所有属性 */ },
// ...只包含匹配的产品
]
},
// ...只包含有匹配产品的产品类型
]
},
// ...只包含有匹配子类别的子类别
],
},
// ...只包含有匹配类别的类别
],
},
// ...只包含有匹配产品组的顶级产品组
];为了实现这种深度过滤并保留父级层级的需求，最有效的方法是编写一个自定义的递归函数。这个函数的核心思想是：从叶子节点开始向上判断，如果叶子节点匹配，则其所有父节点都应该被保留。在向下遍历时，只有当子节点或其后代有匹配项时，父节点才会被保留。
为了简化递归逻辑，如果原始数据结构允许，将所有表示“子项列表”的属性名统一为 children 会非常有帮助。例如，将 categories_list, sub_categories, products, products_list 都统一为 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: 'PAP46120', description: 'Rectangular tray 600ml 16x23 cm' },
// ...
]
},
// ...
]
},
// ...
],
},
// ...
],
},
// ...
];注意： 如果无法修改原始数据结构，递归函数则需要更灵活地检查多个可能的子数组属性名。
接下来，我们编写一个递归函数，它将遍历标准化后的数据结构。关键在于使用 Object.assign({}, o) 创建对象的浅拷贝，以避免直接修改原始数据，并确保保留所有属性。
/**
* 创建对象的浅拷贝
* @param {Object} o - 待拷贝的对象
* @returns {Object} 拷贝后的新对象
*/
function copy(o) {
return Object.assign({}, o);
}
/**
* 递归过滤函数，保留匹配项及其父级层级
* @param {string} searchVal - 搜索关键字
* @returns {function(Object): boolean} 过滤谓词函数
*/
function createRecursiveFilter(searchVal) {
const lowerCaseSearchVal = searchVal.toLowerCase();
/**
* 实际的递归过滤函数
* @param {Object} o - 当前处理的对象
* @returns {boolean} 如果对象或其任何子代匹配，则返回 true
*/
function filterNode(o) {
// 检查当前对象的属性是否匹配搜索值
// 可以根据需要扩展匹配的属性，例如 name, description, code 等
if (o.name && String(o.name).toLowerCase().includes(lowerCaseSearchVal)) return true;
if (o.description && String(o.description).toLowerCase().includes(lowerCaseSearchVal)) return true;
if (o.code && String(o.code).toLowerCase().includes(lowerCaseSearchVal)) return true;
// ... 其他需要匹配的属性
// 如果当前对象有子节点
if (o.children) {
// 递归过滤子节点，并更新当前对象的 children 属性
// 使用 map(copy) 确保创建子节点的副本，防止修改原始数据
// filter(filterNode) 递归调用自身来过滤子节点
// .length 检查过滤后的 children 数组是否为空。
// 如果子数组不为空（即有匹配的子节点），则返回 true，表示当前父节点也应被保留。
o.children = o.children.map(copy).filter(filterNode);
return o.children.length > 0;
}
// 如果当前对象没有子节点，且自身不匹配，则不保留
return false;
}
return filterNode;
}
// 示例使用
// 假设 products 已经是标准化后的数据结构
const searchKeyword = 'PUL';
const filteredProducts = products.map(copy).filter(createRecursiveFilter(searchKeyword));
console.log(JSON.stringify(filteredProducts, null, 2));通过这种方式，只有当一个节点自身匹配，或者其任何深层子节点匹配时，该节点及其所有祖先节点才会被保留下来，并且所有原始属性都得到了完整保留。
数据不可变性：使用 map(copy) 和 Object.assign({}, o) 是为了保持原始数据的不可变性。在实际应用中，这通常是一个好的实践，可以避免意外的副作用。
性能考量：对于极其庞大或深度非常大的数据结构，递归过滤可能会消耗较多内存（因为创建了大量对象副本）和 CPU 时间。如果性能是关键因素，可以考虑：
灵活的匹配条件：示例代码中的匹配条件是硬编码的，实际应用中可以将其抽象为一个可配置的函数，允许用户定义更复杂的匹配逻辑。
多种子数组名称的处理：如果数据结构中存在多个不同的子数组属性名（例如 categories_list, sub_categories 等），而不是统一的 children，则 filterNode 函数需要进行修改，以迭代检查所有可能的子数组属性。例如：
function filterNode(o) {
// ... 匹配条件 ...
let hasMatchingChildren = false;
const childKeys = ['categories_list', 'sub_categories', 'products', 'products_list', 'children']; // 定义所有可能的子数组键
for (const key of childKeys) {
if (Array.isArray(o[key])) {
o[key] = o[key].map(copy).filter(filterNode);
if (o[key].length > 0) {
hasMatchingChildren = true;
}
}
}
return hasMatchingChildren || /* 自身匹配条件 */;
}这种方式虽然更灵活，但增加了代码复杂性，因此如果可能，标准化数据结构是首选。
当需要对深度嵌套的对象数组进行过滤，并要求保留所有匹配项的完整父级层级和属性时，自定义递归过滤函数是比依赖通用库更灵活和精确的解决方案。通过结合浅拷贝和递归调用，我们能够有效地构建一个符合期望的树形过滤结果，确保数据的完整性和上下文。理解其工作原理并根据实际数据结构进行调整，是掌握此类复杂数据处理的关键。
以上就是深入嵌套对象数组的层级过滤与保留策略的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
337
