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教程

本教程将详细介绍如何使用%ignore_a_1%,特别是结合lodash库,将包含下划线分隔键名的扁平对象高效地转换为多层嵌套的对象结构。文章将通过示例代码演示核心转换逻辑,并探讨lodash `_.set` 方法的强大功能,帮助开发者处理复杂的数据重构场景。

在JavaScript开发中,我们经常需要对数据结构进行转换以适应不同的业务需求或API规范。其中一个常见的场景是将一个键名包含特定分隔符(如:下划线 _)的扁平对象,转换为一个具有层级关系的嵌套对象。这种转换有助于提高数据可读性、更好地组织数据,并与前端组件或后端服务的数据模型保持一致。

理解转换需求

假设我们有如下输入对象:

const inputObject = {  a_b_c: 1,  a_b_d: 2,  a_e: 3,  f_g: 4};

我们的目标是将其转换为以下嵌套结构:

const outputObject = {  a: {    b: {      c: 1,      d: 2    },    e: 3  },  f: {    g: 4  }};

从输入到输出的转换规则是:键名中的下划线 _ 表示对象的层级分隔符。例如,a_b_c 应该被解析为 outputObject.a.b.c。

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

解决方案:结合 Object.entries() 和 Lodash _.set()

为了实现这种转换,我们可以利用JavaScript的原生方法 Object.entries() 遍历对象的键值对,并结合流行的实用工具库 Lodash 中的 _.set() 方法来动态构建嵌套对象。

1. 引入 Lodash

在使用Lodash之前,您需要将其引入到您的项目中。可以通过CDN引入:


或者通过npm安装并在模块中导入:

npm install lodash
import _ from 'lodash';

2. 核心转换逻辑

Lodash 的 _.set(object, path, value) 方法是实现此转换的关键。它允许我们通过一个路径数组(或点分隔的字符串)来设置对象的深层属性。如果路径中的任何部分不存在,_.set() 会自动创建相应的对象。

以下是实现转换的代码示例:

const inputObject = {a_b_c: 1, a_b_d: 2, a_e: 3, f_g: 4};const resultObject = Object.entries(inputObject).reduce((accumulator, [key, value]) => {  // 1. 将原始键名按 '_' 分割,得到一个路径数组  const path = key.split('_');   // 2. 使用 Lodash 的 _.set() 方法设置嵌套属性  // accumulator 是最终要构建的嵌套对象  // path 是由键名分割而来的路径数组  // value 是原始键对应的值  _.set(accumulator, path, value);  return accumulator;}, {}); // 初始值为空对象 {}console.log(resultObject);/*输出:{  a: {    b: {      c: 1,      d: 2    },    e: 3  },  f: {    g: 4  }}*/

代码解析:

Object.entries(inputObject): 这个方法返回一个包含 [key, value] 数组的数组,允许我们迭代原始对象的每个键值对。.reduce((accumulator, [key, value]) => { … }, {}): reduce 方法用于将数组中的所有元素归约为一个单一的输出值。在这里,accumulator 是我们正在构建的最终嵌套对象,初始值是一个空对象 {}。[key, value] 是解构赋值,用于获取当前迭代的键和值。const path = key.split(‘_’);: 这是关键一步。对于每个原始键(例如 a_b_c),我们使用 split(‘_’) 方法将其拆分为一个数组 [‘a’, ‘b’, ‘c’]。这个数组正是 _.set() 方法所需的路径。_.set(accumulator, path, value);: Lodash 的 _.set() 方法会根据 path 数组,在 accumulator 对象中创建或设置对应的深层属性。如果路径中的某个中间对象不存在,它会自动创建。例如,当处理 a_b_c: 1 时,它会创建 accumulator.a,然后创建 accumulator.a.b,最后将 accumulator.a.b.c 设置为 1。当处理 a_b_d: 2 时,由于 accumulator.a 和 accumulator.a.b 已经存在,它会直接在 accumulator.a.b 下设置 d: 2。

注意事项与扩展

性能考量: 对于包含大量键的巨型对象,reduce 和 _.set 的组合通常是高效且可读的。然而,如果性能是极致瓶颈,可以考虑手动实现 set 逻辑,以避免额外的函数调用开销,但这通常会牺牲代码简洁性。

键名冲突: 如果原始键名中存在非下划线分隔的键,例如 foo: 1 和 foo_bar: 2,则 foo 将被视为一个叶子节点,而 foo_bar 将尝试在 foo 下创建子对象。这会导致 foo 的值被覆盖或引发类型错误(例如,尝试在数字 1 上添加属性)。在设计原始键名时应避免此类冲突。

不使用 Lodash 的替代方案: 如果项目不允许引入 Lodash,可以手动实现一个类似的 set 函数。这通常涉及一个循环,遍历路径数组,并在每个层级检查并创建对象:

function setDeep(obj, pathArr, value) {  let current = obj;  for (let i = 0; i  {  const path = key.split('_');  setDeep(acc, path, value);  return acc;}, {});console.log(resultObjectManual);

手动实现虽然增加了代码量,但提供了对逻辑的完全控制,并且避免了外部依赖。

总结

将扁平对象转换为嵌套对象是数据处理中的常见任务。通过巧妙地结合 Object.entries() 遍历能力和 Lodash _.set() 方法的强大路径操作功能,我们可以用简洁高效的代码实现这一复杂的数据结构转换。理解其背后的原理和注意事项,将有助于您在实际开发中灵活应对各种数据转换挑战。

以上就是将扁平对象转换为嵌套对象的JavaScript教程的详细内容,更多请关注创想鸟其它相关文章!

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

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
掌握Formik:使用setFieldValue动态更新表单字段值
上一篇 2025年12月21日 00:32:18
使用 Bootstrap 响应式 Grid 系统在不同屏幕尺寸下调整文本对齐方式
下一篇 2025年12月21日 00:32:37

相关推荐

  • ​​VSCode的终极骚操作!学会这些让你的编程效率无人能敌

    掌握VSCode的高效技巧能显著提升编程效率。首先利用代码片段(Snippets)避免重复输入,如设置“rcomp”快速生成React组件结构;接着通过Emmet缩写大幅提升HTML/CSS编写速度,如“ul>li*3”生成列表;再结合Prettier、ESLint等插件优化代码质量与格式;自…

    2026年9月22日
    300
  • Karate教程:优雅处理GET请求中的复杂查询参数(含日期范围)

    本教程将详细介绍在Karate框架中如何正确发送包含复杂查询参数(特别是带有方括号的参数名,如filters[start_date])的GET请求。我们将通过实际示例,演示如何利用Karate的* param关键字优雅地构建URL,确保参数被正确编码并传递给后端服务,尤其适用于日期范围等场景。 理解…

    2026年9月22日
    100
  • 安装 pyinstaller 出错的解决办法及 csdn 工具实例打包

    安装 pyinstaller 出错的解决办法及 csdn 工具实例打包安装 pyinstaller 出错的解决办法及 csdn 工具实例打包安装 pyinstaller 出错的解决办法及 csdn 工具实例打包安装 pyinstaller 出错的解决办法及 csdn 工具实例打包

    想要解决安装 pyinstaller 时遇到的问题,并了解如何使用它打包 csdn 工具实例吗?请继续阅读本文。 首先,前往 PyInstaller 的官方网站下载安装包:https://www.php.cn/link/87067b6ae6205be72c631e0f370391f7 解压后,将文件…

    2026年9月22日 • 用户投稿
    300
  • Java项目中利用.class文件:Classpath配置与接口实现

    在Java项目中引用并实现来自.class文件的接口是常见的需求,尤其当仅提供编译后的字节码文件时。本文将深入讲解Java Classpath的核心概念及其重要性,并提供在命令行环境下配置Classpath的详细步骤和示例,确保编译器和JVM能够正确找到并加载所需的.class文件,从而顺利完成接口…

    2026年9月22日
    700
  • win10提示需要管理员权限怎么办_win10权限不足操作解决方案

    当Windows 10提示需要管理员权限时,可通过以下步骤解决:一、右键程序选择“以管理员身份运行”并确认UAC提示;二、在程序属性的兼容性选项卡中勾选“以管理员身份运行此程序”;三、以管理员身份打开命令提示符,执行net user administrator /active:yes启用内置管理员账…

    2026年9月22日
    700
  • 明末渊虚之羽兑换码有什么 明末渊虚之羽最新兑换码2025

    明末渊虚之羽最新通用兑换码包括:ming888、yuan2025、feather666 等,可在游戏内商城直接使用,领取限定羽刃皮肤、双倍经验卡及1000灵石等丰厚奖励,限时有效,先到先得! 无限资源畅玩神器 | 游戏辅助工具: 2025年明末渊虚之羽最新兑换码汇总如下: MING888:可兑换限定…

    2026年9月22日
    200
  • MySQL安装时端口冲突如何解决?

    MySQL安装时端口冲突如何解决?MySQL安装时端口冲突如何解决?MySQL安装时端口冲突如何解决?MySQL安装时端口冲突如何解决?

    mysql安装时3306端口冲突的解决方法有两类:1.修改mysql默认端口;2.找出并停止占用端口的进程。在安装过程中可通过mysql安装向导直接修改端口号,或安装后编辑配置文件my.ini(windows)或my.cnf(linux)中的port参数,并重启mysql服务生效。若确认3306应为…

    2026年9月22日 • 用户投稿
    800
  • safari浏览器怎么阻止网站访问剪贴板_safari浏览器阻止网站访问剪贴板方法

    可通过关闭网站剪贴板权限、启用无痕浏览、禁用JavaScript或使用内容拦截扩展来阻止Safari网站访问剪贴板,保护隐私安全。 如果您在使用 Safari 浏览器时发现某些网站尝试自动读取或写入剪贴板内容,可能会导致隐私泄露或意外粘贴敏感信息。为防止此类行为,您可以采取以下措施限制网站对剪贴板的…

    2026年9月22日
    1800
  • Java算术运算符优先级解析

    算术运算符优先级决定Java表达式执行顺序,、/、% 高于 +、-,同级从左到右计算,括号可改变顺序,如 (5+3)2=16;整数除法需注意类型,5/2*3 结果为 6。 Java中的算术运算符优先级决定了表达式中各个运算的执行顺序。理解这些优先级规则,能帮助开发者正确编写和解读复杂的数学表达式。 …

    2026年9月22日
    800
  • ​​VSCode高手才知道的骚操作!学会这些技巧开发快人一步​​

    掌握VSCode效率核心在于命令面板、自定义快捷键、多光标编辑、代码片段与扩展生态;通过减少鼠标依赖、实现快速跳转与自动化操作,构建专属高效开发环境,让注意力聚焦于代码思维而非工具操作。 VSCode里那些让你效率翻倍的“骚操作”,本质上是将开发流程中的重复性、高频操作进行极致的简化与自动化。它不是…

    2026年9月22日
    300
  • PHP实时输出如何与消息队列集成_PHP实时输出与消息队列结合

    答案:PHP通过消息队列解耦耗时任务与用户响应,利用flush()实现实时输出感知,结合RabbitMQ、Redis等队列将任务异步处理,前端通过轮询或SSE获取进度,提升系统性能与用户体验。 PHP 实时输出与消息队列的结合,关键在于解耦耗时任务和即时响应用户。虽然 PHP 本身是同步阻塞的,但通…

    2026年9月22日
    100
  • 怎样在iPhone情侣模式中管理消息通知?自定义提示音的技巧

    怎样在iPhone情侣模式中管理消息通知?自定义提示音的技巧怎样在iPhone情侣模式中管理消息通知?自定义提示音的技巧怎样在iPhone情侣模式中管理消息通知?自定义提示音的技巧怎样在iPhone情侣模式中管理消息通知?自定义提示音的技巧

    答案:通过自定义提示音、专注模式和沟通策略管理情侣间消息通知。首先为情侣设置专属短信铃声,利用GarageBand制作个性化音效;其次在微信中为特定联系人开启消息免打扰或独立提示音;再通过iOS“专注模式”创建“情侣模式”,仅允许其通知,并设定自动启用时段;若遇不重要通知,可长按关闭或暂时静音联系人…

    2026年9月22日 • 用户投稿
    000
  • Laravel 文件上传:解决数据库存储物理路径而非可访问 URL 的问题

    本教程旨在解决 laravel 文件上传后,数据库中存储文件物理路径而非可访问 url 的常见问题。通过分析 move() 方法的返回值,并引入 url() 辅助函数,我们将演示如何正确地将文件移动到指定目录,同时确保数据库记录的是可供前端访问的图片资源链接,从而避免图片无法正常显示。 在 Lara…

    2026年9月22日
    100
  • PHP中操作JSON数组对象:添加与修改属性的实践指南

    本教程详细阐述如何在php中高效地处理包含对象的json数组。我们将学习如何利用`json_decode()`将json字符串转换为php数据结构,进而为数组中的现有对象添加或修改属性,并通过`json_encode()`将其转换回json字符串,避免手动构建json的常见错误。 在现代Web开发中…

    2026年9月22日
    1300
  • 实现Java双向路径搜索的正确方法

    本文旨在帮助开发者理解并正确实现Java中的双向路径搜索算法。通过分析常见的实现错误,我们将提供一种清晰、可行的解决方案,并详细解释如何构建完整的路径,克服单向搜索树的局限性,从而实现从起点到终点的完整路径搜索。 双向路径搜索是一种优化路径搜索效率的策略,它同时从起点和终点开始搜索,并在中间相遇。然…

    2026年9月22日
    900
  • 如何在iPhone情侣模式中设置双人日历提醒?确保约会准时的技巧

    如何在iPhone情侣模式中设置双人日历提醒?确保约会准时的技巧如何在iPhone情侣模式中设置双人日历提醒?确保约会准时的技巧如何在iPhone情侣模式中设置双人日历提醒?确保约会准时的技巧如何在iPhone情侣模式中设置双人日历提醒?确保约会准时的技巧

    最核心的办法是使用iPhone的“共享日历”功能。首先创建共享日历并邀请伴侣加入,接着在日历中添加事件并设置双重提醒(如提前2小时和15-30分钟),确保双方开启日历通知权限,并检查iCloud同步状态以避免提醒延迟。通过添加地点、利用位置提醒、设置事件颜色分类、备注重要信息及结合“提醒事项”App…

    2026年9月22日 • 用户投稿
    100
  • VSCode设置Markdown写作环境(实用技巧,排版美化指南)

    要在vscode里打造舒服又高效的markdown写作环境,答案是通过安装核心扩展并进行个性化配置来实现;需安装markdown all in one、markdown preview enhanced、prettier和paste image等扩展,结合settings.json中的编辑器设置、自…

    2026年9月22日
    100
  • 如何用Filmora制作高质量AI视频?简易AI视频剪辑的实用指南

    如何用Filmora制作高质量AI视频?简易AI视频剪辑的实用指南如何用Filmora制作高质量AI视频?简易AI视频剪辑的实用指南如何用Filmora制作高质量AI视频?简易AI视频剪辑的实用指南如何用Filmora制作高质量AI视频?简易AI视频剪辑的实用指南

    Filmora的AI功能通过AI Copilot脚本生成、AI文本转视频、AI语音、图像生成、智能抠像及音频优化等工具,显著提升视频制作效率与专业度,尤其在视觉处理、听觉优化和创意辅助方面表现突出;关键在于将AI作为辅助起点,避免过度依赖,结合人工精修,才能实现高质量AI视频创作。 ☞☞☞AI 智能…

    2026年9月22日 • 用户投稿
    400
  • 好用的终端复用神器-Tmux

    好用的终端复用神器-Tmux好用的终端复用神器-Tmux好用的终端复用神器-Tmux好用的终端复用神器-Tmux

    前言 许久之前就听说过tmux,但是一直没上手,直到最近需要一直在linux下完成一些任务,我才切实感受到了tmux的优点:任意分屏、保存工作 就单单这两点,就足够实用了。分屏,曾今还十分痴迷i3wm和dwm这样的窗口管理工具,尤其是dwm的操作逻辑,大大提升linux工作效率。其他详情可以查看阮一…

    2026年9月22日 • 用户投稿
    100
  • LINUX如何比较两个文件的差异_Linux使用diff命令比较文件差异

    diff命令用于比较文件差异,基本用法为diff file1 file2,输出显示修改、添加或删除的行;结合-u、-i、-w等选项可提升可读性,常用于比较配置文件、代码版本、生成补丁(diff -u生成.patch文件)及验证文件一致性。 在Linux系统中,比较两个文件的差异是日常运维、开发和配置…

    2026年9月22日
    000

发表回复

登录后才能评论
关注微信