首页 > 编程语言 >javascript手写树形结构

javascript手写树形结构

时间:2022-12-06 14:57:40浏览次数:48  
标签:系统管理 name parentMenu menuId javascript 树形 parentId 手写 null

const arr1 = [
  {
    menuId: 1,
    name: "系统管理1",
    parentMenu: null,
  },
  {
    menuId: 2,
    name: "系统管理2",
    parentMenu: null,
  },
  {
    menuId: 3,
    name: "系统管理1_0",
    parentMenu: 1,
  },
  {
    menuId: 4,
    name: "系统管理1_1",
    parentMenu: 1,
  },
  {
    menuId: 5,
    name: "系统管理2_0",
    parentMenu: 2,
  },
  {
    menuId: 6,
    name: "系统管理2_2_0",
    parentMenu: 5,
  },
  {
    menuId: 7,
    name: "系统管理3",
    parentMenu: null,
  },
  {
    menuId: 8,
    name: "系统管理1-1-2",
    parentMenu: 4,
  },
];
const arr2 = [
  {
    id: 1,
    name: "1",
    parentId: null,
  },
  {
    id: 2,
    name: "2",
    parentId: null,
  },
  {
    id: 3,
    name: "1_0",
    parentId: 1,
  },
  
];

function toTree2(arr, Id='id', parentId='parentId', children='children') {
  // 先copy一份数据
  let newA=JSON.parse(JSON.stringify(arr));
  return newA.filter(p=>{
    //遍历
    const c = newA.filter(item=>item[parentId]==p[Id]);
    //找到就赋值
    c.length && (p[children] = c)
    return p[parentId]==null
  })

}

const resultArr = toTree2(arr1,'menuId','parentMenu','list');
const resultArr1 = toTree2(arr2);
arr1[6].name='hedan';
console.log('树形结构', resultArr1);

 

标签:系统管理,name,parentMenu,menuId,javascript,树形,parentId,手写,null
From: https://www.cnblogs.com/ddqyc/p/16955196.html

相关文章

  • JavaScript文件分片上传,断点续传
    ​前言一、SpringMVC简介1.1、SpringMVC引言为了使Spring有可插入的MVC架构,SpringFrameWork在Spring基础上开发SpringMVC框架,从而在使用Spring进行WEB开发时可以......
  • Javascript-极速入门指南
    内容概要Javascript编程语言JS编程语言简介注释语法引入JS的多种方式结束符号变量与常量定义变量let关键字与var关键字的区别定义常量基本数据类型运算......
  • 前端-JavaScript
    1.JS简介1.全称JavaScript,但是与Java一点关系都没有,这么叫是因为蹭热度。2.是一门前端工程师的编程语言,但是它本身有很多逻辑错误。2.JS基础1.注释语法: //单行......
  • web前端开发:JavaScript网页脚本语言
    目录JavaScript网页脚本语言一、JavaScript简介1.注释语法2.引入JS的方式(1)head内script标签内编写(2)head内script标签src属性引入外部JS资源(3)body内最底部通过script标签src......
  • 前端之JavaScript
    前端之JavaScriptjs简介全程javascript但是与java一毛钱关系都没有之所以这么教是为了蹭当时大火的java的热度,所有我们一般把它叫做JS他是一门前端工程师的编程语言......
  • JavaScript简介
    JavaScript概述全称JavaScript,但是与Java一毛钱关系都没有,之所以这么叫是为了蹭Java的热度。它是一门前端工程师的编程语言,但是它本身有很多逻辑错误(不是很严谨)。IT行......
  • MYSQL---纯手写sql之查询【日期字段】
    前言:MySQL查询指定的日期格式字段,使用date_format(date,format)函数date_Format('自定义时间','时间格式')自定义时间:2022-12-0500:00:00时间格式:%Y-%M-%......
  • JavaScript——基础知识、函数
    JavaScript——基础知识、函数一、JS简介 JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但......
  • 前端之JavaScript
    目录JavaScriptJS简介JS基础变量与常量基本数据类型1.数值类型(Number)2.类型转换关键字parse3.字符类型4.布尔值(Boolean)5.对象(object)6.数组运算符流程控制函数内置对象作......
  • 前端学习4 JavaScript
    JavaScript一、JavaScript简介1.JS简介JS全程JavaScript但是跟Java半毛钱关系都没有之所以这么叫是为例蹭热度它是一门前端工程师的编程语言但是它本身有很......