Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
JavaScript深度嵌套对象数组的层级保留过滤:从复杂结构到递归解决方案_创想鸟

JavaScript深度嵌套对象数组的层级保留过滤:从复杂结构到递归解决方案

JavaScript深度嵌套对象数组的层级保留过滤:从复杂结构到递归解决方案

本文探讨了在javascript中过滤深度嵌套对象数组时,如何有效保留匹配项的完整父级层级。针对传统深层过滤工具可能无法满足此需求的挑战,我们提出了一种解决方案:通过将复杂的数据结构标准化为统一的“children”键,并结合自定义递归过滤函数,实现精确筛选并维持数据层级,确保输出结果结构完整且仅包含符合条件的数据分支。

深度嵌套数据过滤的挑战

在处理复杂的、多层嵌套的对象数组时,我们经常面临一个挑战:如何根据深层子项的属进行过滤,同时确保过滤结果能够完整地保留匹配项的所有父级层级及其非过滤属性。例如,在一个包含产品、类别、子类别等多级结构的数据集中,如果我们需要查找特定编码的产品,并希望返回该产品所属的所有父级(如子类别、类别、主分类),且这些父级对象应保留其自身的全部属性(如名称、颜色等),而不仅仅是提供一条路径。

传统的深度过滤库,如 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',                                        // ... 更多属性                                    },                                    // ... 更多产品                                ]                            },                            // ... 更多类型                        ]                    },                    // ... 更多子类别                ],            },            // ... 更多类别        ],    },    // ... 更多主分类];

这个结构有多个不同命名的嵌套数组(categories_list, sub_categories, products, products_list),这使得编写一个通用的递归过滤函数变得复杂。

立即学习“Java免费学习笔记(深入)”;

解决方案:数据结构标准化与递归过滤

为了有效解决上述问题,核心思路是:

数据结构标准化:将所有表示子集合的嵌套数组统一命名为 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', // 可以将 code 作为 name                                        color: 'natural',                                        code: 'PUL46120',                                        description: 'Rectangular tray 600ml 16x23 cm',                                        // ... 更多属性                                    },                                    // ... 更多产品                                ]                            },                            // ... 更多类型                        ]                    },                    // ... 更多子类别                ],            },            // ... 更多类别        ],    },    // ... 更多主分类];

注意: 实际操作中,您可能需要编写一个预处理函数来将原始数据转换为这种标准化格式。例如,可以使用递归遍历和条件判断来完成键的重命名。

第二步:实现递归过滤函数

现在,我们可以编写一个递归函数来过滤这个标准化后的数据。这个函数的核心思想是:

创建一个对象的浅拷贝,以避免直接修改原始数据。检查当前对象是否满足过滤条件。如果当前对象有 children 属性,则递归地过滤其子项。如果当前对象自身不匹配,但其过滤后的 children 数组不为空,则保留该父级对象。

/** * 创建对象的浅拷贝 * @param {Object} o - 要拷贝的对象 * @returns {Object} - 对象的浅拷贝 */function copy(o) {  return Object.assign({}, o); // 或者使用 { ...o }}/** * 递归过滤函数 * @param {Object} o - 当前处理的对象 * @returns {boolean} - 如果对象或其任何子项匹配过滤条件,则返回 true */function filterTree(o, searchVal) {    // 1. 检查当前对象是否匹配过滤条件    // 这里可以根据您的具体需求添加多个匹配条件    // 示例:匹配 name、description 或 code 中包含 searchVal 的项    if (o.name && o.name.toLowerCase().includes(searchVal.toLowerCase())) return true;    if (o.description && o.description.toLowerCase().includes(searchVal.toLowerCase())) return true;    if (o.code && o.code.toLowerCase().includes(searchVal.toLowerCase())) return true;    // ... 可以添加更多属性的匹配,例如 type, material 等    // 2. 如果当前对象有子项,则递归过滤子项    if (o.children) {        // 对子项进行浅拷贝并递归过滤        const filteredChildren = o.children.map(copy).filter(child => filterTree(child, searchVal));        // 如果过滤后的子项数组不为空,则将过滤结果赋值给当前对象的 children 属性,并返回 true        // 这确保了父级只有在有匹配的子项时才会被保留        if (filteredChildren.length > 0) {            o.children = filteredChildren;            return true;        }    }    // 3. 如果当前对象自身不匹配,且没有匹配的子项,则返回 false    return false;}// 示例:应用过滤函数const searchVal = 'PUL'; // 搜索关键词const filteredProducts = products.map(copy).filter(item => filterTree(item, searchVal));console.log(JSON.stringify(filteredProducts, null, 2));

在这个 filterTree 函数中,我们首先检查当前对象 o 是否满足条件。如果满足,则直接返回 true。如果 o 不满足,但它有 children,我们就会对这些 children 进行递归过滤。o.children.map(copy).filter(child => filterTree(child, searchVal)) 这行代码是关键:

map(copy):确保我们处理的是子对象的拷贝,而不是直接修改原始引用。filter(child => filterTree(child, searchVal)):递归调用 filterTree 函数来过滤每个子对象。如果 filteredChildren.length > 0,说明有子项匹配,那么当前父级 o 也应该被保留,并且它的 children 属性会被更新为过滤后的子项。

最终,products.map(copy).filter(item => filterTree(item, searchVal)) 会对顶层数组中的每个元素进行处理,生成一个仅包含匹配项及其完整父级层级的全新数组。

注意事项与最佳实践

数据转换成本:将原始复杂结构转换为统一 children 键的标准化结构,可能需要额外的预处理步骤。对于静态或不经常变化的数据,这可能不是问题;但对于动态或超大数据集,需要考虑其性能开销。不可变性:在 copy 函数中使用 Object.assign({}, o) 或扩展运算符 {…o} 创建浅拷贝,是保持数据不可变性的重要实践。这可以防止在过滤过程中意外修改原始数据。如果对象内部包含嵌套对象,并且您也希望它们是独立的拷贝,则需要进行深拷贝。过滤条件的灵活性:filterTree 函数中的匹配逻辑可以根据需求进行扩展,支持更复杂的条件组合,例如同时匹配多个字段、正则表达式匹配、数值范围等。性能考虑:对于极其庞大的深度嵌套数据集,递归操作可能会导致溢出或性能瓶颈。在这种情况下,可以考虑使用迭代方式(例如,使用栈或队列模拟递归)或专门的树结构处理库。错误处理:在实际应用中,您可能需要添加对 null 或 undefined 值的检查,以提高函数的健壮性。

总结

通过将深度嵌套的对象数组结构标准化,并结合一个精心设计的递归过滤函数,我们能够有效地实现对复杂数据结构的“剪枝”操作,即保留所有匹配项及其完整的父级层级,同时移除不包含任何匹配项的整个分支。这种方法不仅保证了过滤结果的准确性,也维持了数据结构的完整性和可读性,对于前端后端处理复杂树形或层级数据具有重要的实践意义。

以上就是JavaScript深度嵌套对象数组的层级保留过滤:从复杂结构到递归解决方案的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1529928.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
使用 Axios 拦截器实现 Access Token 自动刷新机制
上一篇 2025年12月20日 21:33:32
解决Angular Material Table数据更新问题
下一篇 2025年12月20日 21:33:41

相关推荐

  • Inkscape如何导出AI生成的矢量图片?教你快速保存图像的步骤

    答案:在Inkscape中导出矢量图需根据用途选择格式,网页用优化SVG并转文本为路径,印刷则导出为PDF/EPS、转文字为路径、确保高分辨率位图,同时注意颜色模式与出血设置。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 在Inkscap…

    2026年9月22日
    700
  • MuseScore Studio 4.6.2 发布

    MuseScore 是一款支持多平台的所见即所得(WYSIWYG)音乐制谱工具。近日,MuseScore 4.6.2 正式上线,此次版本更新重点修复了多个关键性的回归问题。 值得一提的是,本版本重新恢复了对 macOS 10.15 及 macOS 11 系统的支持。此前在 4.6 版本中,由于升级至…

    2026年9月22日
    000
  • Laravel 8 登录后重定向至仪表盘的策略与实践

    本教程详细阐述了在 Laravel 8 中实现用户登录后重定向到仪表盘的多种策略。我们将探讨如何通过配置 LoginController 的 $redirectTo 属性、利用 RouteServiceProvider 定义常量以及在自定义登录方法中进行精确控制来管理重定向流程。文章还涵盖了相关中间…

    2026年9月22日
    000
  • 如何在iPhone情侣模式中启用视频通话?快速连接彼此的设置方法

    如何在iPhone情侣模式中启用视频通话?快速连接彼此的设置方法如何在iPhone情侣模式中启用视频通话?快速连接彼此的设置方法如何在iPhone情侣模式中启用视频通话?快速连接彼此的设置方法如何在iPhone情侣模式中启用视频通话?快速连接彼此的设置方法

    iPhone虽无官方“情侣模式”,但可通过FaceTime或微信、WhatsApp等第三方应用实现高质量视频通话。首选FaceTime,操作便捷、画质清晰,支持SharePlay共享影音,仅限苹果设备;跨平台可选微信、WhatsApp等,注重隐私可用Telegram。优化体验需稳定网络、良好光线与背…

    2026年9月22日 用户投稿
    200
  • VSCode配置GDB调试器 深入掌握VSCode调试C程序技巧

    配置vscode中gdb调试c程序的核心是正确设置tasks.json和launch.json;2. tasks.json负责使用gcc -g编译生成带调试信息的可执行文件,确保prelaunchtask与launch.json中的program路径一致;3. launch.json指定调试器gdb…

    2026年9月22日
    100
  • ChatExcel进行趋势预测_ChatExcel数据趋势分析与预测建模

    可使用ChatExcel通过趋势拟合、移动平均或季节性分解实现数据预测。首先导入时间序列数据并选择“趋势预测”功能,系统将自动拟合线性或指数模型并输出R²值与未来5期预测;对于含噪声数据,可先计算3期或5期移动平均平滑序列,再基于平滑值进行外推预测;若数据具周期性(如周期7、12),则启用“季节性分…

    2026年9月22日
    000
  • java定时任务之quartz

    大家好,很高兴再次与大家见面,我是你们的朋友全栈君。 一、Quartz简介 在企业应用中,我们常常需要处理定时任务调度,比如每天凌晨生成前一天的报表,每小时生成一次汇总数据等。Quartz是一个著名的任务调度框架,它可以与J2SE和J2EE应用结合,功能非常强大,易于与Spring集成,使用起来非常…

    2026年9月22日
    100
  • Sublime支持MySQL触发日志写入模块_便于数据变更监控与溯源分析

    Sublime支持MySQL触发日志写入模块_便于数据变更监控与溯源分析Sublime支持MySQL触发日志写入模块_便于数据变更监控与溯源分析Sublime支持MySQL触发日志写入模块_便于数据变更监控与溯源分析Sublime支持MySQL触发日志写入模块_便于数据变更监控与溯源分析

    sublime可通过插件实现与mysql联动监控触发器日志写入。具体步骤如下:1.安装package control、mysql语法高亮、构建系统等插件;2.创建日志表并编写触发器记录数据变更;3.配置.sublime-build文件调用mysql命令行执行sql脚本;4.使用快捷键提升日志查询和处…

    2026年9月22日 用户投稿
    000
  • Java中异常处理与方法返回值结合

    异常发生时不应返回默认值,而应通过抛出异常或使用Optional、自定义结果类等方式明确传递错误信息,确保调用方能正确处理失败情况,提升代码健壮性与可读性。 在Java中,异常处理与方法返回值的结合是一个常见的编程问题。理解它们之间的关系有助于写出更健壮、可读性更强的代码。当一个方法可能发生异常时,…

    2026年9月22日
    000
  • VSCode如何通过扩展实现Markdown预览 VSCode Markdown预览功能的配置方法

    安装“markdown all in one”或“markdown preview enhanced”等扩展;2. 安装后通过ctrl+shift+v打开预览;3. 在设置中配置预览样式、主题、字体等;4. 启用“auto show preview to side”实现自动预览;5. 开启“scro…

    2026年9月22日
    000
  • 谷歌浏览器安卓版如何清除数据_安卓版Chrome应用数据清理方法

    首先清除浏览数据可解决谷歌浏览器页面加载慢、自动填充错误等问题。通过Chrome设置菜单可一次性清除指定时间范围内的历史记录、Cookie及缓存;针对特定网站问题,可仅清除该站点的数据以保留其他登录状态;若问题严重,可通过手机系统设置中的应用管理清除Chrome的缓存或全部数据,以重置应用状态。 如…

    2026年9月22日
    000
  • tk做养生类目起号前期发什么视频?tk表示什么类目?

    在TikTok上运营养生类账号,起号阶段的内容策略尤为关键。优质的内容不仅能快速吸引目标用户,还能为后续发展奠定良好基础。本文将深入解析初期应发布的视频类型,并澄清“TK”所指的平台属性及内容分类体系。 一、养生类目起号初期适合发布哪些视频内容? 刚开始做养生赛道时,重点不在于变现,而在于建立专业形…

    2026年9月22日
    000
  • Grok官方网站直达页_Grok官网官方网页版入口

    Grok官网官方网页版入口为https://grok.com,用户可通过该网站访问网页端服务,支持跨设备同步;同时可下载移动应用或在X平台内使用Grok功能。未订阅用户可体验基础功能,Premium及Premium+需通过X平台订阅,SuperGrok则仅在官网提供,具备更强数据处理能力。账户升级后…

    2026年9月22日
    600
  • PHP如何利用缓存优化实时输出_PHP实时输出与缓存结合优化

    PHP实时输出需结合输出缓冲控制与flush()强制推送,同时考虑服务器和浏览器缓存影响;2. 长时间任务应使用APCu或Redis缓存频繁数据,避免重复计算;3. 动态页面可采用分块输出与片段缓存策略,静态内容从缓存读取,动态部分边生成边输出;4. 更优方案是通过异步任务与Redis存储进度,前端…

    2026年9月22日
    000
  • 华为天际通Go将支持eSIM:设备在路上了

    华为天际通Go将支持eSIM:设备在路上了华为天际通Go将支持eSIM:设备在路上了华为天际通Go将支持eSIM:设备在路上了华为天际通Go将支持eSIM:设备在路上了

    9月3日消息,今年的iphone 17 air将仅支持esim,彻底移除实体sim卡槽结构。随着新品发布日期的临近,国内esim政策的进展也愈发引人关注。 然而综合多方信息来看,iPhone 17 Air国行版本可能无法赶上首发,因前期在国内无法使用eSIM服务,导致该机型短期内难以在国内上市。 相…

    2026年9月22日 用户投稿
    000
  • ThinkPad电脑黑屏无显示如何解决?商务本常见问题修复教程

    ThinkPad黑屏但风扇转时,先做强制断电放电,再接外显测试;若有显示则为屏幕或排线问题,否则查内存、显卡等内部硬件,逐步深入排查可定位故障。 ThinkPad电脑突然黑屏无显示,这事儿搁谁身上都挺糟心的,尤其是那些把笔记本当命根子的商务人士。别慌,经验告诉我,很多时候它没你想的那么严重,往往是一…

    2026年9月22日
    000
  • 避开蝴蝶号常见误区:为什么你的内容始终无法获得推荐

    蝴蝶号推荐机制的核心逻辑是围绕用户留存与时长,通过用户行为数据判断内容价值。平台看重完播率、互动率等“微动作”,而非单纯阅读量;原创性、垂直度及是否符合规范也影响推荐权重。常见误区包括:①标题党导致高点击低完读,被算法降权;②内容同质化缺乏稀缺性和专业性;③忽视评论区互动,错失活跃度加分;④内容与平…

    2026年9月22日
    000
  • VSCode配置C语言调试环境 从零开始VSCode搭建C开发工具

    要从零开始在#%#$#%@%@%$#%$#%#%#$%@_e2fc++805085e25c9761616c00e065bfe8中搭建c语言开发和调试环境,首先需安装vscode本体、c/c++编译器(如mingw或gcc)并配置系统环境变量,接着安装vscode的c/c++扩展,然后创建项目并编写c…

    2026年9月22日
    000
  • 如何用PhotoLab的AI裁剪图片?快速实现智能图像裁剪教程

    如何用PhotoLab的AI裁剪图片?快速实现智能图像裁剪教程如何用PhotoLab的AI裁剪图片?快速实现智能图像裁剪教程如何用PhotoLab的AI裁剪图片?快速实现智能图像裁剪教程如何用PhotoLab的AI裁剪图片?快速实现智能图像裁剪教程

    PhotoLab的AI裁剪功能通过智能识别主体与构图原则,提供优化裁剪建议,区别于传统手动裁剪的纯物理操作,能自动应用美学法则提升照片视觉吸引力;在人像、社交媒体适配、风景静物等场景中表现突出,尤其擅长保留核心焦点并适配多平台比例;用户可导入图片后使用AI裁剪工具,系统分析画面并生成建议裁剪框,支持…

    2026年9月22日 用户投稿
    000
  • MySQL常见连接错误及其解决方案汇总_开发和运维必备?

    MySQL常见连接错误及其解决方案汇总_开发和运维必备?MySQL常见连接错误及其解决方案汇总_开发和运维必备?MySQL常见连接错误及其解决方案汇总_开发和运维必备?MySQL常见连接错误及其解决方案汇总_开发和运维必备?

    access denied错误需检查用户名密码及权限,使用grant授权并执行flush privileges;2. can’t connect错误应确认mysql运行状态、防火墙设置及bind-address配置;3. host not allowed错误需创建用户并授权特定或全部ip…

    2026年9月22日 用户投稿
    000

发表回复

登录后才能评论
关注微信