首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将数组从平面一维转换为树形,如javascript/lodash所示

将数组从平面一维转换为树形是一种常见的数据处理操作,可以使用递归算法来实现。在JavaScript中,可以使用lodash库来简化操作。

首先,我们需要定义一个节点对象,用于表示树的节点。节点对象通常包含一个值属性和一个子节点数组属性。

接下来,我们可以编写一个递归函数,该函数接收一个平面一维数组和一个父节点作为参数。函数的目标是将数组中的元素转换为树的节点,并将节点添加到父节点的子节点数组中。

以下是一个示例代码:

代码语言:txt
复制
const _ = require('lodash');

// 定义节点对象
class TreeNode {
  constructor(value) {
    this.value = value;
    this.children = [];
  }
}

// 将数组转换为树形结构
function arrayToTree(arr, parent = null) {
  const grouped = _.groupBy(arr, 'parentId');

  if (grouped[parent?.id]) {
    grouped[parent?.id].forEach(item => {
      const node = new TreeNode(item);
      parent?.children.push(node);
      arrayToTree(arr, node);
    });
  }
}

// 示例数据
const arr = [
  { id: 1, parentId: null, name: 'Node 1' },
  { id: 2, parentId: 1, name: 'Node 1.1' },
  { id: 3, parentId: 1, name: 'Node 1.2' },
  { id: 4, parentId: 2, name: 'Node 1.1.1' },
  { id: 5, parentId: 2, name: 'Node 1.1.2' },
  { id: 6, parentId: 3, name: 'Node 1.2.1' },
];

// 转换数组为树形结构
const root = new TreeNode(null);
arrayToTree(arr, root);

console.log(root.children);

在上述示例中,我们使用lodash的groupBy函数将数组按照parentId进行分组。然后,我们遍历每个父节点的子节点数组,创建对应的节点对象,并将节点添加到父节点的子节点数组中。最后,我们可以通过访问根节点的children属性来获取转换后的树形结构。

这种将数组从平面一维转换为树形的操作在许多场景中都很有用,例如处理层级结构的数据、构建导航菜单等。

腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版(CMYSQL):https://cloud.tencent.com/product/cmysql
  • 云原生应用引擎(TKE):https://cloud.tencent.com/product/tke
  • 人工智能(AI):https://cloud.tencent.com/product/ai
  • 物联网(IoT):https://cloud.tencent.com/product/iotexplorer
  • 移动开发(移动推送、移动分析):https://cloud.tencent.com/product/mobile
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 区块链(BCS):https://cloud.tencent.com/product/bcs
  • 元宇宙(Metaverse):https://cloud.tencent.com/product/metaverse

请注意,以上链接仅为示例,具体的产品选择应根据实际需求和情况进行评估。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

干货 | 减少50%空间,携程机票React Native Bundle 分析与优化

如上所示中,展示了业务模块的整体大小以及压缩后的尺寸,并且进行了图形化的占比展示。...底部的占比图中,文件类型的角度,显示了当前业务包中的 JavaScript、Font、Image 等文件类型的大小占比。...bundle Size 详情页面,使用树形结构图,直观地展示了当前业务包中各个模块的尺寸大小以及占比。 可对相应的模块文件进行搜索查看,同时会高亮展示在树形结构图区域,以便排查和优化打包结果。...如下所示,如果直接引用 lodash,大小时71K。...被替换为 import map from 'lodash/map' import some from 'lodash/some' 注意这个选项 preventFullImport 在引入整个库的时候会让插件抛出异常

1.6K20

分享 9 个实用的 JavaScript 技巧

本文总结 9 个实用的 JavaScript 技巧,帮助您编写更好的前端代码,感受这种优雅编程语言的美妙之处。 现在,让我们一起来看看吧。 1....在 React 中,此技巧通常用于在构建 UI 组件时 props 接收多个值。 3. 浅复制对象或数组的几种方法 众所周知,JavaScript 中的对象和数组等非原始数据类型是通过引用传递的。...) // [ 1, 2, 3 ] [ 1, 2, 3, 8 ] 使用扩展运算符 扩展运算符不仅擅长解构赋值,还能够数组或对象中解包项目: let a = [1, 2, 3] let b = [...a...如上所示lodash 中的 cloneDeep 方法完美克隆了 obj 内的函数,并且可以在新的 cp_obj 上成功执行。 5....执行此操作需要 3 个步骤: 字符串拆分为数组 反转数组 数组换为字符串 这 3 个步骤需要利用 3 种不同的内置方法,如下所示: const author = "Yang Zhou"; const

18830
  • 你不知道的 JavaScript 中卷(1、类型)

    类型之争 JavaScript是一门弱类型语言,所以非常灵活,如下所示: var data = http.get('/post/data'); // [{ title: "类型", content: "...显示类型转换 在某些情况下,程序员需要手动一个类型转换为另一个类型。例如,您可能需要将一个字符串转换为一个数字,或者一个布尔值转换为一个字符串。..." 隐式类型转换 JavaScript引擎在必要时会自动一个类型转换为另一个类型,不需要程序员手动进行转换。...在JavaScript中,有一些值会被转换为false,这些值被称为“假值”,其他所有值都被转换为true。...第三方库 如今,有很多第三方库可以帮助我们实现判断变量类型,以下是一些常用的: LodashLodash是一个实用的JavaScript工具库,提供了许多常见操作的函数,包括类型检查。

    29630

    JavaScript 现代 Web 开发框架教程(九)

    对于模块加载器在任何环境下创建的变量,习惯上给模块分配实际的 Underscore 字符,清单 16-1 所示。 Listing 16-1....Underscore 的实用函数主要作用于集合(数组和类似数组的对象,参数)、对象文字和函数。Underscore 最常用于过滤和转换数据。...幸运的是,创建这个应用的开发人员使用 Underscore 的indexBy()函数airports数组创建了一个索引对象,清单 16-6 所示。 Listing 16-6....这些数据通常会通过键来解引用,以便可以提取一些特定的值,但有时不管键是什么,使用所有的值都是有用的,清单 16-12 中的 Underscore 模板所示。...如果电影概要包含一个 HTML 标签,,它将被转换为。相比之下,鳄鱼标签<%=可以用来输出带有 HTML 标记的非转义字符串。

    6810

    JavaScript原型链污染原理及相关CVE漏洞剖析

    0x00 背景 2019年初,Snyk的安全研究人员披露了流行的JavaScriptLodash中一个严重漏洞的详细信息,该漏洞使黑客能够攻击多个Web应用程序,这个安全漏洞就是一个“原型污染漏洞”(...0x01 JavaScript原型 JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象拥有一个原型对象,对象以其原型为模板、原型继承方法和属性...0x051CVE-2020-8203 lodash是一个JavaScript实用工具库,提供一致性,及模块化、性能和配件等功能。在4.17.16版本之前,lodash存在一个原型污染漏洞。...3969行的castPath路径proto.z解析成属性数组[‘proto‘,’z’]。接着3976行到3991行的while循环依次对这两个属性进行处理。...lodash修补该漏洞的方法如下所示,如果属性包含proto、constructor和prototype就直接返回object。 ?

    3.4K20

    让我告诉你一些强无敌的 NPM 软件包(超实用,收藏!)

    点击上方卡片关注 自:望道 https://juejin.cn/post/6950584088462163982 面对繁忙的日程安排与紧迫的工期限制,选择能够切实提升生产率的工具无疑至关重要。...实用工具 Lodash lodash[1]是一套现代 JavaScript 实用程序库,提供模块化、性能与多种附加功能。可提供关于 JavaScript 数组、对象及其他数据结构的多种实用功能。 ?...lodash-logo 安装及示例 yarn add lodash 不要滥用,尽量使用 ES 自带方法 。...qs-github 安装及示例 yarn add qs import { parse, stringify } from "qs"; // 用途一 // 浏览器上 URL地址参数转换为对象(字符串对象.../node_modules/.bin/eslint --init 之后,你可以在任何文件或目录上运行 ESLint,如下所示: $ .

    3K30

    Lodash那些“多余”和让人眼前一亮的 API

    一、收获 lodash那些功能强大的API lodash那些“多余”的API及原生JS对应写法 二、 Lodash Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。...仁者见仁智者见智,Lodash带来便利同时,我们应该时刻记住:JavaScript才是我们的根本; Lodash中“多余”的API并不多余,API内部处理了很多开发者常常忽略的异常情况,使代码更加安全;...[3, [4]], 5]], 3) [1, [2, [3, [4]], 5]].flat(Infinity) // [1, 2, 3, 4, 5] fromPairs(entries类型数组换为对象...,可用于清空数组 // [1, 2] 眼前一亮的API pullAt (根据下标选择元素,分到两个数组) takeRight ( 返回结尾元素开始n个元素的数组切片 ) // 倒数解构...}] } } xor( 创建一个给定数组唯一值的数组 ) 眼前二亮的API remove(元素筛选,分到两个数组) sortedUniq (去重,排序) takeRightWhile ( array

    3.4K10

    React Native 启动速度优化——JS 篇(全网最全,值得收藏)

    本文主要从 JavaScript 入手,总结了一些 JS 侧的优化要点。 1.JSEngine ?...71.23 KB 173.85 KB 119 Bytes 119 Bytes 表格可见 lodash 配合 babel-plugin-lodash 是最优的开发选择。...正式分包前,我们先抛开各种技术细节,把问题简化一下:对于一个全是数字的数组,如何把它分为偶数数组和奇数数组?...这个问题太简单了,刚学编程的人应该都能想到答案,遍历一遍原数组,如果当前元素是奇数,就放到奇数数组里,如果是偶数,放偶数数组里。 Metro 对 JS bundle 分包其实是一个道理。...具体的逻辑可见以下代码: // metro.business.config.js const fs = require('fs'); // 读取 idList.txt,转换为数组 const idList

    2.4K40

    一文讲懂什么是函数柯里化,柯里化的目的及其代码实现

    它不仅被用于 JavaScript,还被用于其他编程语言。 柯里化是一种函数的转换,它是指一个函数可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c)。 柯里化不会调用函数。...比柯里化多一点 根据定义,柯里化应该 sum(a, b, c) 转换为 sum(a)(b)(c)。...总结 柯里化 是一种转换, f(a,b,c) 转换为可以被以 f(a)(b)(c) 的形式进行调用。JavaScript 实现通常都保持该函数可以被正常调用,并且如果参数数量不足,则返回偏函数。...---- 现代 JavaScript 教程:开源的现代 JavaScript 入门到进阶的优质教程。React 官方文档推荐,与 MDN 并列的 JavaScript 学习教程[3]。...[2] _.curry: https://lodash.com/docs#curry [3] React 官方文档推荐,与 MDN 并列的 JavaScript 学习教程: https://zh-hans.reactjs.org

    1.5K10

    深入理解JavaScript函数式编程

    (本篇文章内容输出来源:《拉钩教育大前端训练营》部分参考书籍:《JavaScript忍者秘籍》《你不知道的JavaScript 卷一》关于函数部分的讲解 进行总结)❞ 本章重点掌握Javascript中的高阶函数知识以及函数式编程...JavaScript中的高阶函数 ❝高阶函数 ❞ 函数作为参数,如下代码实现的是循环遍历数组,通过传递参数回调函数可以拿到每个数组遍历的值在回调函数中进行相应的处理 //模拟forEach function...fn(acc), value);//reduce 第二个参数是一个初始的值 reduce是所有数组进行遍历比如累加第一个的结果会传入到第二个中 函数组合要满足「结合律」 既可以把g和h组合,还可吧f和...fp.toLower),fp.split(' ')); console.log(f('NEVER SAY DIE'));//never_say_die map方法的区别和fp模块 如下代码,在_.map中对某个数组执行将数组元素转换为...PointFree模式 //world wild web => W,W,W //先切割字符串变成数组,map数组的每一个元素转换为大写,map数组获取数组的元素的首字母 const firstLetterToUpper

    4.3K30

    web中的树形结构【小结】

    最近在做一个项目,是一个b/s架构的,在项目中,用到了树形结构,即如图1所示的结构。...下载下来后,可以看到如图2所示的文件。 说明: 1、adapter:负责里面提供第三方底层库(包括 Ext 自带的底层库)映射为 Ext所支持的底层库。...; }) 执行的结果如图3(左)所示。 当加入汉语言包之后的结果如图3(右)所示。...上面的程序执行效果如下图所示: 4、异步树 Ext JS的树控件提供了对这种功能的支持,你只需要在创建树控件的时候,通过给树指定一个节点加载器,可以用来服务器端动态加载树的节点信息。...false,checked:false},          {id:10206,pId:102,name:'归档,10206',isParent:false,checked:false} ] 上面树形结构显示出来如下图所示

    3.5K20

    PHP实现的操作数组类库定义与用法示例

    php class ArrayHelper{ /** * 数组中删除空白的元素(包括只有空白字符的元素) * * 用法: * @code php * $arr = array('', 'test',...(); foreach ($arr as $row) { if (isset($row[$col])) { $ret[] = $row[$col]; } } return $ret; } /** * 一个二维数组换为...array(); foreach ($arr as $row) { $key = $row[$keyField]; $ret[$key][] = $row; } return $ret; } /** * 一个平面的二维数组按照指定的字段转换为树状结构...parent[$keyChildrens][] =& $arr[$offset]; } else { $tree[] =& $arr[$offset]; } } return $tree; } /** * 树形数组展开为平面数组...* * @param array $tree 树形数组 * @param string $keyChildrens 包含子节点的键名 * * @return array 展开后的数组 */ static

    76040

    一文讲懂什么是函数柯里化,柯里化的目的及其代码实现

    它不仅被用于 JavaScript,还被用于其他编程语言。 柯里化是一种函数的转换,它是指一个函数可调用的 f(a, b, c) 转换为可调用的 f(a)(b)(c)。 柯里化不会调用函数。...比柯里化多一点 根据定义,柯里化应该 sum(a, b, c) 转换为 sum(a)(b)(c)。...总结 柯里化 是一种转换, f(a,b,c) 转换为可以被以 f(a)(b)(c) 的形式进行调用。JavaScript 实现通常都保持该函数可以被正常调用,并且如果参数数量不足,则返回偏函数。...---- 现代 JavaScript 教程:开源的现代 JavaScript 入门到进阶的优质教程。React 官方文档推荐,与 MDN 并列的 JavaScript 学习教程[3]。...[2] _.curry: https://lodash.com/docs#curry [3] React 官方文档推荐,与 MDN 并列的 JavaScript 学习教程: https://zh-hans.reactjs.org

    66310
    领券