如何递归地将嵌套对象数组转换为平面对象数组?

2024-05-26

我有以下深度嵌套对象数组:

const data = [
    {
      name: "foo",
      children:[
        {
          count: 1,
          name: "A"
        },
        { 
          count: 2,
          name: "B"
        }
      ]
    },
    {
      name: "bar",
      children: [
        {
          count: 3,
          name: "C",
          children: [
            {
              count: 4,
              name: "D"
            }
          ]
        }
      ]
    }
  ]

我想改变的方式是这样的:

const expectedStructure = [
    {
      count: 1,
      name: "A",
      label: "foo = A"
    },
    {
      count: 2,
      name: "B",
      label: "foo = B"
    },
    {
      count: 3,
      name: "C",
      label: "bar = C"
    },
    {
      count: 4,
      name: "D",
      label: "bar = D"
    }
  ]

我创建了递归函数,将嵌套数组转换为平面对象数组。

这是我的代码:

function getChildren(array, result=[]) {
    array.forEach(({children, ...rest}) => {
        result.push(rest);
        if(children) {
            getChildren(children, result);
        }
    });
    return result;
}

这是我得到的输出:

[ { name: 'foo' },
  { count: 1, name: 'A' },
  { count: 2, name: 'B' },
  { name: 'bar' },
  { count: 3, name: 'C' },
  { count: 4, name: 'D' } ]

问题是我需要添加label字段到我的输出数组中的每个对象,并且如果不多次迭代最终数组以进行所需的转换,我无法找到解决方案。如何正确插入label领域而不极大增加函数的复杂性?


每次迭代检查当前项是否是“父”项,并重新分配label如果是。

const data = [{name:"foo",children:[{count:1,name:"A"},{count:2,name:"B"}]},{name:"bar",children:[{count:3,name:"C",children:[{count:4,name:"D"}]}]}];

function getChildren(array, result = [], label = "") {
  array.forEach(({ children, name, count }) => {
    if (!label || name[1]) {
      label = `${name} = `;
    }
    if (count) {
      result.push({ count, name, label: label + name });
    }
    if (children) {
      getChildren(children, result, label);
    }
  });
  return result;
}

const res = getChildren(data);

console.log(res);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何递归地将嵌套对象数组转换为平面对象数组? 的相关文章

  • socket.io 的良好初学者教程? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • Javascript Promise“then”始终运行,即使 Promise 未能执行

    我希望当调用第二个 then 时不执行第三个 then 但是 即使 Promise 被拒绝 调用第二个 then 并且代码返回 rejected 然后返回 undefined 它仍然调用第三个 then 如何不运行第三个 then 这样 未
  • 如何修改每个JSON对象javascript

    我想修改里面的每个 JSON 值cooldown object cooldown user 1 This user2 0 This 在 Javascript 中使用 for 语句 我研究了好几个小时 只找到了内部的 blocks Edit
  • IE从哪个版本开始支持Object.create(null)?

    您可以通过多种方式在 JavaScript 中创建对象 creates an object which makes the Object prototype of data var data1 new Object Object liter
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 图像无法在带有 DOM 的 IE 中加载:控制台中的 7009 错误(无法解码)

    当在 IE 中的单个页面上加载许多图像时 在 IE11 中重现 其中一些图像开始加载失败 并在控制台中出现类似以下警告的内容 DOM7009 无法解码 URL 处的图像 某些唯一的 url 当我查看网络流量时 似乎确实从服务器收到了每个图像
  • 如何针对 Node.js 中发生的每个错误发送电子邮件?

    假设我的 node js 应用程序正在运行 如果出现错误 我的意思是所有错误 不仅仅是网络错误 如果出现错误 则很重要 我如何调用函数向我发送电子邮件 基本上 在我希望它写入 err out 之前 我希望向我发送一封电子邮件 我正在使用no
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • 日期出现奇怪的错误,“未捕获非法访问”

    所以我试图找到最新的DateJavascript 可以处理 我把它减少到 9 月 275760 并增加了我开始捕获未捕获的天数illegal access例外new Date 09 24 275760 to new Date 10 13 2
  • Three.js 各种大小的粒子

    我是 Three js 的新手 正在尝试找出添加 1000 个粒子的最佳方法 每个粒子都有不同的大小和颜色 每个粒子的纹理是通过绘制画布创建的 通过使用粒子系统 所有粒子都具有相同的颜色和大小 为每个粒子创建一个粒子系统是非常低效的 有没有
  • 对于只触及我的工作表的 Google 表格脚本,收到“此应用程序未经验证”

    我正在编写一个 Google Sheets 脚本 我只想访问与 gs 文件关联的同一电子表格中的数据 似乎我应该有权在自己的电子表格中运行脚本 但是每当我运行一个函数时 我都会得到一个This app isn t verified信息 我该
  • 在 JavaScript 循环之外声明变量可以提高速度和内存?

    C 也有类似的问题 但我们没有看到 JavaScript 的任何问题 在循环内声明变量是否可以接受 假设循环有 200 次迭代 使用样本 2 相对于样本 1 是否有性能要求 内存和速度 我们使用 jQuery 来循环 它提高了我们将 var
  • 在 Javascript 中连接空数组

    我正在浏览一些代码 我想知道这有什么用处 grid push concat row 根据我的理解 它等同于 grid push row 为什么要大惊小怪 连接 你想使用 concat当您需要展平数组并且没有由其他数组组成的数组时 例如 va
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • 在 CKEditor 中设置字体大小和字体系列

    我正在使用 ckeditor 我想问一下这个插件如何设置font family和font size 我尝试过使用 CKEDITOR config font defaultLabel Arial CKEDITOR config fontSiz
  • 使用 MongoDB 和 Nodejs 插入和查询日期

    我需要一些帮助在 mongodb 和 nodejs 中按日期查找记录 我将日期添加到抓取脚本中的 json 对象 如下所示 jsonObj last updated new Date 该对象被插入到 mongodb 中 我可以看到如下 la
  • 如何在执行新操作时取消先前操作的执行?

    我有一个动作创建器 它会进行昂贵的计算 并在每次用户输入内容时调度一个动作 基本上是实时更新 但是 如果用户输入多个内容 我不希望之前昂贵的计算完全运行 理想情况下 我希望能够取消执行先前的计算并只执行当前的计算 没有内置功能可以取消Pro
  • Vue.js[vuex] 如何从突变中调度?

    我有一个要应用于 json 对象的过滤器列表 我的突变看起来像这样 const mutations setStars state payload state stars payload this dispatch filter setRev

随机推荐

  • 如何使用 VBS 将 ping 写入文本文件

    如果我使用 VBS 运行一些 CMD 命令 在本例中为 ping 如何使用 VBS 而不是 DOS 将命令写入文本文件 Set objCmdTest WScript CreateObject WScript Shell Set Output
  • 如何找出NPX运行的是哪个文件?

    当你跑步的时候 说 npx webpack在终端中 NPX 找到一个webpack打包某处并运行它 如何确定NXP运行的二进制文件的确切位置 我正在寻找类似的工具which https en wikipedia org wiki Which
  • 在 IntelliJ IDEA 中附加 Gradle 源

    当我使用默认的 gradle 包装器并创建目录选项在 IntelliJ 中创建 Gradle 项目后 我看到项目结构是通过以下命令创建的build gradle file IntelliJ 提示我 您可以配置 Gradle 包装器以使用带有
  • 如何根据条件禁用 TestNG 测试

    目前有没有办法根据条件禁用 TestNG 测试 我知道您当前可以在 TestNG 中禁用测试 Test enabled false group blah public void testCurrency 我想根据条件禁用相同的测试 但不知道
  • Firebase 验证电子邮件模板编辑

    是否有或将会有任何方式来编辑验证电子邮件模板或使用不同的语言 而不仅仅是英语 对于非英语用户来说 用户体验很糟糕 请您分享一下此功能的路线图 谢谢 托马斯 在发送 firebase 电子邮件之前 您可以设置模板的语言 您可以在firebas
  • wpf 控件宽度绑定

    我有两个带有内容的边框 第二个边框宽度根据情况而变化 在内容上 我试图将第一个边框绑定到第二个边框宽度 但是 它不起作用 我不确定我错过了什么 有人可以给我一些指导吗 下面是我目前正在尝试的示例
  • 在 R 中执行 read.csv 时未读取所有行

    这是输入文件 http www yourfilelink com get php fid 841283 http www yourfilelink com get php fid 841283 我执行了 options stringsAsF
  • Qt WebEngine 中 QWebInspector 的替代品是什么?

    代码片段的示例在这里 from PySide2 import QtCore QtGui QtWidgets QtWebChannel from PySide2 QtWebEngineWidgets import QWebEngineView
  • 为 javascript 编写一个真正具有包容性的随机方法

    Javascript MATH 对象有一个随机方法 该方法从集合 0 1 返回 0 含 0 1 不包括 有没有办法返回一个真正随机的方法 其中包括 1 e g var rand MATH random 2 if rand gt 1 rand
  • 自动创建文件“requirements.txt”

    有时我从以下网站下载Python源代码GitHub https en wikipedia org wiki GitHub并且不知道如何安装所有依赖项 如果没有的话要求 txt文件我必须手动创建它 给定Python源代码目录 是否可以创建要求
  • Django 模型实例是否可哈希?

    Django 模型实例是否可哈希 例如 我可以使用 Django 模型实例作为字典键 或者创建一组唯一的模型吗 如果它们是可哈希的 那么是什么导致两个 Django 模型实例被认为是相同的 它是否天真地实现了 Hashable 以便仅当它们
  • 在Python中将列表附加到自身[重复]

    这个问题在这里已经有答案了 我想将一个列表附加到自身 我认为这会起作用 x 1 2 y x extend x print y 我想回来 1 2 1 2 但我得到的只是内置的None 我究竟做错了什么 我正在使用Python v2 6 x e
  • Flutter VideoPlayer 无法播放 YouTube 视频

    我正在开发 flutter 应用程序并使用 ext video player 播放 YouTube 视频 当我在视频播放器上播放频道视频时 它不起作用 但我添加了 YouTube 上的任何视频 播放器正在工作 为什么会发生这样的事 impo
  • Flutter getter 没有为类指定,当指定时

    我越来越 dart 没有为该类定义 getter currentPickup PickupEvent undefined getter event currentPickup 错误 import dart async import pack
  • 无法登录 mediawiki:为了防止会话劫持而取消?

    我多年来一直使用托管在 AWS EC2 实例上的私有 mediawiki 我认为某些扩展出了问题 特别是在数学渲染过程中停止了 所以我尝试使用 Google Chrome 浏览器重新加载页面 缓存全部被删除 之后 我无法登录并看到此消息 您
  • 在设置/重置位方面,“分支”意味着什么?

    在一次采访中 我被问到 你如何设置或重置一点 这是一个很简单的问题 我也回答了 之后 他们问我如何做同样的事情 但不分支 我不知道什么是分支 我搜索并发现位摆弄黑客 http graphics stanford edu 7Eseander
  • Visual Studio 2010:如何重新映射 F2 来重命名文件而不是打开对象浏览器

    In Visual Studio 2010 Solution Explorer tree view how can I remap the F2 key to Rename the Selected File rather than ope
  • 为什么这个 chrome.browserAction.setIcon 方法不起作用?

    我正在查看文档页面 https developer chrome com extensions browserAction method setIcon我不知道我的代码有什么问题 chrome browserAction setIcon d
  • j2me中读取文件内容

    我有一个如下所示的文件 OrderNo id name count Format 1 AA1 sdflsdfsdfd 12 01 2 AB2 asdaewqrftr 13 02 3 AA3 aerefytrsu 12 01 我想读取这个文件
  • 如何递归地将嵌套对象数组转换为平面对象数组?

    我有以下深度嵌套对象数组 const data name foo children count 1 name A count 2 name B name bar children count 3 name C children count