首页 > 其他分享 >js 给树形(层级)数组添加层级标识

js 给树形(层级)数组添加层级标识

时间:2023-02-23 10:02:42浏览次数:37  
标签:层级 const name level js 树形 id array children

树形数据,需要给每层的数据添加层级,如下:

const treeData = [
  {
    id: 1, name: 'a', children: [
      { id: 101, name: 'a1', children: null }
    ]
  },
  {
    id: 2, name: 'b', children: [
      {
        id: 201, name: 'b1', children: [
          { id: 211, name: 'b2', children: null }
        ]
      }
    ]
  },
]

const arrayTreeAddLevel = (array, levelName = 'level', childrenName = 'children') => {
  if (!Array.isArray(array)) return []
    const recursive = (array, level = 0) => {
    level++
    return array.map(v => {
      v[levelName] = level
      const child = v[childrenName]
      if (child && child.length) recursive(child, level)
        return v
      })
    }
  return recursive(array)
}

const newData = arrayTreeAddLevel(treeData)

标签:层级,const,name,level,js,树形,id,array,children
From: https://www.cnblogs.com/ZerlinM/p/17146863.html

相关文章

  • json.dumps()使用indent参数 格式化输出json数据格式
    json.dumps() 方法 将一个Python数据结构转换为JSON字符串data=[{"name":"小王","sex":'男'},{"name":"小明","sex":'女'}]json_str=json.dum......
  • 使用 Three.js 的 3D 制作动画场景
    推荐:将 NSDT场景编辑器 加入你的3D开发工具链。由于GSL语法的复杂性,对于许多开发人员来说WebGL是一个未知的领域。但是有了Three.js,在浏览器中3D的实现变得简单......
  • JS滚动到页面底部
    code//例如:页面高度1000,屏幕高度900,相差100,//scrollTop:向上滚动100像素,就到达页面底部了。functionScrollToBottom(){$("html,body").animate({scrollTop:$......
  • nodejs 查用语法
    合并objectsvaro1={a:1};varo2={b:2};varo3={c:3};varobj=Object.assign(o1,o2,o3);console.log(obj);//{a:1,b:2,c:3}console.lo......
  • JS批量下载图片
    已用该文章的知识实现了批量下载,所需的两个JS文件可以在GitHub下载<scriptsrc="/js/jszip.js"></script><scriptsrc="/js/FileSaver.min.js"></script><script>......
  • js 内存泄露是什么?常见的有哪些?
    内存泄露定义:一块被分配的内存既不能使用也无法回收,直到浏览器进程结束;常见的有以下这些:1,意外的全局变量;2,console.log;3,DOM泄露;4,闭包;5,被遗忘的定......
  • spring boot内置tomcat运行JSP报错
    =============================================== 2023/2/23_第1次修改                       粽先生 ==================================......
  • js用正则截取标签内的数据,xml数据读取
    <aa>1<bb>2<cc>3</cc></bb><dd>4</dd></aa>如何使用正则表达式获取每个标签内容?......
  • ar小Demo(aframe.js)
    官网:https://aframe.io/中文网:https://www.techbrood.com/aframe/guides?p=building-a-basic-scene虚拟现实https://mp.weixin.qq.com/s/6ddpdknOHAKO9ORUPIqnAg......
  • 【JS】JavaScript进阶 ES6 - 黑马视频笔记
    1.作用域作用域(scope)规定了变量能够被访问的“范围”,离开这个范围变量便不能被访问。分为:局部作用域、全局作用域。1.1局部作用域局部作用域分为:函数作用域、块作用......