深入过滤嵌套对象数组并保留父级结构：一个递归解决方案

本文探讨了在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