17370845950

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

本文探讨了在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} data - 要过滤的原始数据数组。
 * @param {string} searchVal - 搜索值。
 * @returns {Array} 过滤后的数据数组，保留了匹配项的父级层级。
 */
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));
代码解析：


    

  1. 
copy(o) 函数：这是一个简单的辅助函数，使用 Object.assign({}, o) 创建一个对象的浅拷贝。这对于保持原始数据不可变性至关重要，确保过滤操作不会对原始数据产生副作用。
    2. 

  2. 
filterDeepWithHierarchy(data, searchVal) 函数：这是主过滤函数，它接收原始数据数组和搜索值。
      

    • 它首先将 searchVal 转换为小写，以便进行不区分大小写的匹配。
      • 

    • 然后，它对顶层 data 数组的每个元素应用 recursiveFilter 函数。
      • 

    

    3. 

  3. 
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。
      • 

    

    4. 



注意事项与最佳实践


    

  1. 
不可变性 (Immutability)：在整个过滤过程中，我们始终通过 copy 函数创建对象的浅拷贝。这避免了直接修改原始数据，是函数式编程和复杂数据操作中的一个重要原则，可以防止意外的副作用，使代码更易于理解和调试。
    2. 

  2. 
性能考量：对于非常庞大和深层嵌套的数据集，频繁的拷贝和递归调用可能会带来一定的性能开销。在极端情况下，可能需要考虑优化策略，例如使用不可变数据结构库（如 Immer.js）或针对特定场景进行性能分析和调整。然而，对于大多数常见应用场景，这种递归方法是高效且可接受的。
    3. 

  3. 
谓词的灵活性：recursiveFilter 函数中的匹配条件 (matches) 是高度灵活的。您可以根据实际需求，在其中加入更复杂的逻辑，例如多字段匹配、正则表达式匹配、数值范围比较等。
    4. 

  4. 
数据结构预处理：如果原始数据结构不统一，包含多种表示子集合的键名，您可能需要一个额外的预处理步骤，将原始数据转换为统一使用 children 键的结构，从而简化递归过滤函数的实现。
    5. 



总结


通过数据结构扁平化和自定义
 
	









            
            

              
              
            

          
        
      
      


  
赣ICP备2024031479号