记录一下 javascript 的一些方法

计算嵌套对象层级的深度

我有这样一个对象,长得像佟丽娅,哈哈哈哈,做梦笑醒。

重来!

长得是这个样子:

{
    children: [
        {
            children: [
                {
                    children:[

                    ]
                },{
                    children:[

                    ]
                }
            ]
        },{
            children: [
                {
                    children:[
                        
                    ]
                }
            ]
        },{
            children: [
                {
                    children:[
                        
                    ]
                }
            ]
        }
    ]
}

嗯,是不是很熟悉!
哈哈哈哈,就是绘制树状图的数据。

需求是树状图超过屏幕长度的时候,我要动态计算树状图节点间距,
所以,我需要知道节点深度,也就是最长分支上有多少个间隔。
比如最长分支上有12个节点,这里就有11个间隔,巴拉巴拉

我的代码如下

function reduce (o, depth, array) {
  if (o.children && o.children.length) {
    for (let item of o.children) {
      array.push(1 + depth)
      if (item.children) {
        reduce(item, 1 + depth, array)
      }
    }
  } else {
    array.push(1 + depth)
  }
  return Math.max.apply(null, array)
}
let depth = reduce(source, 0, [])

对象深复制

同样,这个需求是由于 D3 绘制树状图引入的

同样的数据,又要用表格展示,又要用树状图展示

嗯。。。安排!

首先,将后端返回的扁平数据结构转换成树状图需要的结构

const dataSet = d3.stratify()
      .id(d => d.id)
      .parentId(d => d.pid)(nodeList)

然后,拷贝 dataset ,并改变其中的层级,使之可以方便的渲染在 table 结构中

const data = [dataSet].map(ergodicList)
function ergodicList (item) {
  let d = item.data
  let obj = {
    label: d.name,
    description: d.description,
    info: d.info,
    state: d.state,
    type: d.type,
    pid: d.pid,
    id: d.id
  }
  if (item.children && item.children.length) {
    obj['children'] = copyChildren(item.children)
  }
  return obj
}
// 拆成两个函数是为了方便阅读理解
function copyChildren (list) {
  return list.map(ergodicList)
}

如果有更好方法,欢迎交流。

猜你喜欢

转载自blog.csdn.net/zhai_865327/article/details/107243647