js将一维数组转换为树状嵌套对象

前端 潘老师 3个月前 (12-08) 66 ℃ (0) 扫码查看

本文主要讲解关于js将一维数组转换为树状嵌套对象 相关内容,让我们来一起学习下吧!

当开发过程中,遇到一组有层级关系的一维数组对象,需要将其处理为有上下级依赖关系的树状对象,遇到这个场景可以将本文的内容做参考使用。

场景示例

本文内容只适合处理像以下有清晰简明的数据结构,复杂凌乱的结构是不支持的。

现在有一份一维数组数据,其中每项有一个属性代表着其级别(权重),其数据如下:

const list = [
  {
    name: '目录',
    weight: 1
  },
  {
    name: '导航一',
    weight: 2
  },
  {
    name: '导航-路由一',
    weight: 3
  },
  {
    name: '导航-路由二',
    weight: 3
  },
  {
    name: '导航二',
    weight: 2
  },
  {
    name: '导航二-路由',
    weight: 3
  }
]

现在的诉求是,将list数组转为树状对象,并能正确的表达其上下级关系。期望结果为:

const result = {
  name: '目录',
  weight: 1,
  children: [
    {
      name: '导航一',
      weight: 2,
      children: [
        {
          name: '导航-路由一',
          weight: 3,
          children: []
        },
        {
          name: '导航-路由二',
          weight: 3,
          children: []
        },
      ]
    },
    {
      name: '导航二',
      weight: 2,
      children: [
        {
          name: '导航二-路由',
          weight: 3,
          children: []
        }
      ]
    }
  ]
}

若是你也有上面场景需求,那就向下划拉划拉吧。

这个场景的使用举一个简单例子:

需要对md文件的h标签内容作为目录或者锚点信息使用。比如掘金是怎么处理md的h标签转为右侧目录的。虽不知具体逻辑,但读取md内容,解析h标签内容,转为层级结构这个过程肯定不会少的。当然这个过程也能使用一些md相关库辅助快速实现。

接下来展开聊下具体思路与代码实现:

思路

首先分析这个list,能直观感受到的就是weight属性是破局的关键点。

但怎么能让它顺顺利利的听话,还需要设置一些规则才行。

比如:

  • weight在循环过程中若是遇到相同或小的值,需要结束循环,因为后面的就属于下一个关系了。
  • weight需要在循环过程中有一个参考项,这个参考项告诉它是否越界了。

完整代码

// 关系解析器 - 适用于关系清晰的数组结构,而且只存在一个最高级,通常是第一项。
class RelationshipParser {
#dataSource; // 源数据
#result; // 处理的结果
/**
* 
* @param {array} dataSource // 一维数组源数据, 没用ts编写的话,尽量校验下dataSource
*/
constructor(dataSource) {
this.#dataSource = JSON.parse(JSON.stringify(dataSource));
this.#init();
}
getResult() {
return JSON.parse(JSON.stringify(this.#result))
}
#init() {
const topLevelItem = this.#getTopLevel(); // 通常只有一个最高级
this.#parseData(this.#dataSource, topLevelItem);
this.#result = topLevelItem;
}
#getTopLevel() {
const topValue = Math.min(...this.#dataSource.map(item => item.weight));
return this.#dataSource.find(item => item.weight === topValue);  
}
/**
* 递归解析当前dataSource,组成依赖关系树
* @param {array} dataSource // 源数据
* @param {object} currentItem // 当前节点,parseData函数处理的都是他的子级
*/
#parseData(dataSource, currentItem) {
currentItem.children = [] // 这个children就是容器,可以修改
// 起始索引,用于循环使用
const startIndex = dataSource.findIndex(item => item.weight === currentItem.weight);
// 当前权重,用于划分当前边界
const currentWeight = currentItem.weight;
// 边界,用于划分当前命中范围
let boundaryDepth = Number.MAX_SAFE_INTEGER;
// 这里startIndex + 1作为起始索引,是为了只处理currentItem后面的数据
for (let index = startIndex + 1; index < dataSource.length; index++) {
const item = dataSource[index];
// 若当前权重小于等于入参权重,则跳出循环。
// 如 weigit:3 = weigit: 3, 说明是同级
// 如 weigit:2 < weigit: 3, 说明没有关系
// 如 weigit:4 > weigit: 3, 说明是嵌套关系,继续向下处理
if (item.weight <= currentWeight) {
break;
}
// 若当前权重小于等于边界权重,其实就是不是同一个权重就不处理
// 如 weigit:2 < weight: 10000,说明是第一次命中,将当前项push到 currentItem 内
// 只有第一次是小于,后面只会处理等于,因为小于在上一拦截了,大于就是越界了不做处理
if (item.weight <= boundaryDepth) {
// 递归处理当前项的子级
this.#parseData(dataSource.slice(index), item);
// 将当前项push到currentItem
currentItem.children.push(item);
boundaryDepth = item.weight;
}
}
}
}

看下使用效果:

// 列表
const list = [
{
name: '目录',
weight: 1
},
{
name: '导航一',
weight: 2
},
{
name: '导航-路由一',
weight: 3
},
{
name: '导航-路由二',
weight: 3
},
{
name: '导航二',
weight: 2
},
{
name: '导航二-路由',
weight: 3
}
]
// 调用
const relationshipParser = new RelationshipParser(list);
console.log(relationshipParser.getResult());
// => 如下
{
"name":"目录",
"weight":1,
"children":[
{
"name":"导航一",
"weight":2,
"children":[
{
"name":"导航-路由一",
"weight":3,
"children":[
]
},
{
"name":"导航-路由二",
"weight":3,
"children":[
]
}
]
},
{
"name":"导航二",
"weight":2,
"children":[
{
"name":"导航二-路由",
"weight":3,
"children":[
]
}
]
}
]
}

以上就是关于js将一维数组转换为树状嵌套对象 相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12285.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】