记录一下 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)
}
如果有更好方法,欢迎交流。