首页 > 其他分享 >js数组转成树形结构

js数组转成树形结构

时间:2024-04-22 10:15:30浏览次数:15  
标签:key obj name pid js flag 树形 数组 id

js将数组转成对应的树形结构:

function transformArrayToObject(array) {
	const result = {};
	array.forEach(item => {
		const {
			id,
			name,
			pid,
			flag
		} = item;

		if (pid == 0) {
			result[name] = {
				id,
				flag,
				pid
			}
		} else {
			transformObj(result, item)
		}
	});
	return result;
}

function transformObj(obj, item) {
	const {
		id,
		name,
		pid,
		flag
	} = item;
	for (var key in obj) {
		var val = obj[key]
		if (key != 'id') {
			if (typeof val === 'object') {
				transformObj(val, item)
			}
		} else {
			if (val == pid) {
				obj[name] = {
					id,
					flag,
					pid
				}
				break;
			}
		}
	}
	return obj
}

function adjustObj(obj) {
	let flag = false;
	for (var key in obj) {
		if (typeof obj[key] === 'object') {
			obj[key] = adjustObj(obj[key]);
			flag = true
		}
	}
	if (!flag) {
		obj = obj.flag
	}
	return obj
}

const array = [{
	id: 1,
	name: 'index',
	pid: 0,
	flag: true,
},
{
	id: 2,
	name: 'monitor',
	pid: 1,
	flag: true,
},
{
	id: 3,
	name: 'scan',
	pid: 1,
	flag: true,
},
{
	id: 4,
	name: 'subscan',
	pid: 3,
	flag: false,
},
{
	id: 5,
	name: 'legder',
	pid: 0,
	flag: true,
},

{
	id: 6,
	name: 'add',
	pid: 5,
	flag: false
},
];

const transformedObject = transformArrayToObject(array);
console.log("没有子级不做处理,依旧是对象结构:", transformedObject)
//const adObj = adjustObj(transformedObject)
//console.log("对没有子级的做处理,不返回对象:", adObj)

 效果图:

 

 

标签:key,obj,name,pid,js,flag,树形,数组,id
From: https://www.cnblogs.com/huiing/p/18149971

相关文章

  • input js 只能输入数字和两位小数
    functiononlyNumber(obj){//得到第一个字符是否为负号vart=obj.value.charAt(0);//先把非数字的都替换掉,除了数字和.和-号obj.value=obj.value.replace(/[^\d\.]/g,'');//前两位不能是0加数字obj.value=obj.value.replace(/^0\d[0-9]*/g,'');......
  • json模块
    【一】什么是序列化将Python中的字典、列表、元组...转换成字符串类型如果使用str强制转换数据类型,造成的后果就是转换后的字符串无法转回Python对象【二】什么是反序列化将字符串类型的数据转换成Python对象(列表、字典、元组...)能将python对象转为字符串-->字符串......
  • 【js】两个数组对象合并成一个树结构的数据
    1模板2/**3*合并两个数组,将岗位信息按照部门进行分组4*@param{Array}array1岗位信息数组,每个岗位包含部门ID(deptId)、岗位ID(postId)和岗位名称(postName)5*@param{Array}array2部门信息数组,每个部门包含部门ID(id)和部门名称(label)6*@returns{Arr......
  • 30 天精通 RxJS (27):简易实作 Observable(二)
    前一篇文章我们已经完成了基本的observable以及Observer的简易实现,这篇文章我们会接续上一篇的内容实现简易的Observable类别,以及一个creationoperator和一个transformoperator。建立简易Observable类别这是我们上一篇文章写的建立observable实例的函数func......
  • 前端资源共享方案对比-笔记:iframe/JS-SDK/微前端
    vue2异步加载之前说过,vue3还是之前的方法,只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage但是本文还是详细说一遍:为什么需要异步加载语言包主要还是缩小提代码包,没有按需加载前,语言包内容太多好几屏幕全部是,虽然从webpack-analysis看图里面占比可以忽略不计......
  • 树状数组入门
    树状数组下标记得是从1开始,本节点id通过加lowbit可以访问到父节点的id,用于点修。本节点id减去lowbit则是查看左边第一个比自己高一级的节点id,比如7会查到6,6会查到4,这样子累加此三个的值就可以得到前七个的前缀和。inttreeArr[M]={0};//startfrom1intlowbit(intx){......
  • 在React中的函数组件和类组件——附带示例的对比
    在React中,创建组件有两种主要方式:函数组件和类组件。每种方式都有自己的语法和用例,尽管随着ReactHooks的引入,它们之间的差距已经显著缩小。但选择适当的组件类型对于构建高效和可维护的React应用程序仍然非常关键。在本文中,我们将探讨函数和类组件之间的基本区别,清楚地理解它们......
  • next.js app目录 i18n国际化简单实现
    最近在用next写一个多语言的项目,找了好久没找到简单实现的教程,实践起来感觉都比较复杂,最后终于是在官方文档找到了,结合网上找到的代码demo,终于实现了,在这里简单总结一下。此教程适用于比较简单的项目实现,如果你是刚入门next,并且不想用太复杂的方式去实现一个多语言项目,那么这个教......
  • 何时使用JSX.Element vs ReactNode vs ReactElement?
    在React开发中,JSX.Element、ReactNode和ReactElement这三个类型分别代表不同级别的React组件树中的元素,它们在不同的上下文中有着各自的用途。以下是它们的区别及使用场景的概述:JSX.Element定义:JSX.Element是当你编写JSX语法时,编译器(如Babel)将这些语法转化为等效的Reac......
  • threejs - 渲染第一个3D场景 - 旋转的正方体
    1.安装threejs&使用2.创建三要素 场景scene相机camera渲染器render 3.场景newTHREE.Scene()  相机分为2种 1.透视相机2.正交相机 渲染器的使用 把canvas标签渲染到body页面document.body.appendChild(renderer.doLement); // 渲染canvasre......