深入嵌套对象数组的层级过滤与保留策略_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

深入嵌套对象数组的层级过滤与保留策略

2025-10-17

浏览次数：次

返回列表

深入嵌套对象数组的层级过滤与保留策略

本文探讨了在处理复杂嵌套对象数组时，如何实现深度过滤并同时保留匹配项的完整父级层级。针对`deepdash`等库在默认情况下可能移除非匹配父级属性的问题，文章提出了一种自定义的递归过滤解决方案。该方案通过标准化数据结构和精心设计的递归函数，确保过滤结果既包含匹配项，又完整地保留了其在原始数据结构中的上下文信息，避免了数据扁平化或信息丢失。

深度嵌套对象数组的过滤挑战

在前端或后端数据处理中，我们经常会遇到包含多层嵌套对象和数组的复杂数据结构，例如产品目录、组织架构等。当需要根据某个深层属性（如产品编码）进行过滤时，一个常见的需求是不仅要获取匹配的叶子节点，还要保留其所有祖先节点及其所有属性，以维持数据的完整上下文。

例如，一个产品数组可能包含多个层级：产品类别 (Category) -> 子类别 (Sub-Category) -> 产品类型 (Product Type) -> 具体产品 (Product Item)。如果我们要查找所有编码中包含特定字符串的产品，并希望最终结果依然是一个完整的树形结构，只包含匹配产品及其所有上层父级（即使父级本身不匹配过滤条件），那么标准的深度过滤方法可能无法满足要求。

deepdash.filterDeep 的局限性

一些实用工具库，如 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', /* ...所有属性 */ },
                                    // ...只包含匹配的产品
                                ]
                            },
                            // ...只包含有匹配产品的产品类型
                        ]
                    },
                    // ...只包含有匹配子类别的子类别
                ],
            },
            // ...只包含有匹配类别的类别
        ],
    },
    // ...只包含有匹配产品组的顶级产品组
];

解决方案：自定义递归过滤函数

为了实现这种深度过滤并保留父级层级的需求，最有效的方法是编写一个自定义的递归函数。这个函数的核心思想是：从叶子节点开始向上判断，如果叶子节点匹配，则其所有父节点都应该被保留。在向下遍历时，只有当子节点或其后代有匹配项时，父节点才会被保留。

1. 数据结构标准化（可选但推荐）

为了简化递归逻辑，如果原始数据结构允许，将所有表示“子项列表”的属性名统一为 children 会非常有帮助。例如，将 categories_list, sub_categories, products, products_list 都统一为 children。

原始数据到标准化数据的转换示例：

察言观数AskTable

企业级AI数据表格智能体平台

78 查看详情察言观数AskTable

// 假设原始数据已被转换为以下结构（简化）
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' },
                                    // ...
                                ]
                            },
                            // ...
                        ]
                    },
                    // ...
                ],
            },
            // ...
        ],
    },
    // ...
];

注意： 如果无法修改原始数据结构，递归函数则需要更灵活地检查多个可能的子数组属性名。

2. 实现递归过滤函数

接下来，我们编写一个递归函数，它将遍历标准化后的数据结构。关键在于使用 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));

代码解析：

copy(o) 函数：这是一个简单的辅助函数，用于创建对象的浅拷贝。在递归过滤过程中，我们不希望直接修改原始数据，因此在处理每个对象时都先创建一个副本。
createRecursiveFilter(searchVal) 函数：这是一个高阶函数，用于创建一个闭包，其中 searchVal 会被转换为小写并用于后续的匹配。
filterNode(o) 函数：这是实际执行递归过滤的核心函数。
- 匹配条件：它首先检查当前对象 o 的 name、description 或 code 属性是否包含 searchVal。如果匹配，则直接返回 true，表示该节点及其所有父级都应该被保留。
- 递归处理子节点：如果当前对象有 children 属性，它会：
  - 对 o.children 数组中的每个子对象调用 copy()，创建新的子对象副本。
  - 对这些副本调用 filterNode 进行递归过滤。
  - 将过滤后的结果重新赋值给 o.children。
  - 关键点：return o.children.length > 0;。如果过滤后的 children 数组非空（即至少有一个子节点或其后代匹配了过滤条件），则返回 true，表示当前父节点也应该被保留。如果 children 数组为空，则返回 false，表示当前父节点不应被保留。
- 叶子节点不匹配：如果当前对象没有 children 属性（即为叶子节点），且其自身属性也不匹配，则返回 false。

通过这种方式，只有当一个节点自身匹配，或者其任何深层子节点匹配时，该节点及其所有祖先节点才会被保留下来，并且所有原始属性都得到了完整保留。

注意事项与最佳实践

数据不可变性：使用 map(copy) 和 Object.assign({}, o) 是为了保持原始数据的不可变性。在实际应用中，这通常是一个好的实践，可以避免意外的副作用。
性能考量：对于极其庞大或深度非常大的数据结构，递归过滤可能会消耗较多内存（因为创建了大量对象副本）和 CPU 时间。如果性能是关键因素，可以考虑：
- 迭代式解决方案：对于某些特定场景，迭代而非递归可能更高效。
- 优化匹配逻辑：确保匹配条件尽可能高效。
- Memoization：如果同一子树可能被多次处理，可以考虑使用 memoization 缓存结果。
灵活的匹配条件：示例代码中的匹配条件是硬编码的，实际应用中可以将其抽象为一个可配置的函数，允许用户定义更复杂的匹配逻辑。

多种子数组名称的处理：如果数据结构中存在多个不同的子数组属性名（例如 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 || /* 自身匹配条件 */;
}

这种方式虽然更灵活，但增加了代码复杂性，因此如果可能，标准化数据结构是首选。

总结

当需要对深度嵌套的对象数组进行过滤，并要求保留所有匹配项的完整父级层级和属性时，自定义递归过滤函数是比依赖通用库更灵活和精确的解决方案。通过结合浅拷贝和递归调用，我们能够有效地构建一个符合期望的树形过滤结果，确保数据的完整性和上下文。理解其工作原理并根据实际数据结构进行调整，是掌握此类复杂数据处理的关键。

以上就是深入嵌套对象数组的层级过滤与保留策略的详细内容，更多请关注其它相关文章！

# js # word # 数据结构 # 递归 # red # 递归函数 # ai # 后端 # 工具 # 编码 # go # node # json # 前端 # 全猪宴营销推广 # 栖霞网络营销推广行业 # 餐饮网站建设进度汇报 # 上海短视频营销推广方案 # SEO骗方案 # 网站建设当招聘洁信赖 # 百度SEO关键词钢琴谱 # 网站建设报价明细及方案 # 自助网站建设名称怎么写 # 没指数关键词怎么做排名 # 产品类型 # 文档 # 是一个 # 子类 # 多个 # 原始数据 # 如何实现 # 自定义

相关栏目：【科技资讯46185 】【网络学院92790 】

上一篇：如何通过css实现响应式按钮动画

下一篇：使用空格键触发按钮点击事件的实现方法

首页

关于我们

产品展示

咨询研究

新闻中心

留言板

联系我们

新闻中心 NEWS CENTER

深入嵌套对象数组的层级过滤与保留策略

深度嵌套对象数组的过滤挑战

deepdash.filterDeep 的局限性

期望的输出结构

解决方案：自定义递归过滤函数

1. 数据结构标准化（可选但推荐）

2. 实现递归过滤函数

代码解析：

注意事项与最佳实践

总结