JS 将有父子关系的数组转换成树形结构数据

时间: 2018-11-27阅读: 1796标签: array

将类似如下数据转换成树形的数据

[{
    id: 1,
    name: '1',
}, {
    id: 2,
    name: '1-1',
    parentId: 1
}, {
    id: 3,
    name: '1-1-1',
    parentId: 2
}, {
    id: 4,
    name: '1-2',
    parentId: 1
}, {
    id: 5,
    name: '1-2-2',
    parentId: 4
}, {
    id: 6,
    name: '1-1-1-1',
    parentId: 3
}, {
    id: 7,
    name: '2',
}]

先附上代码

function translateDataToTree(data) {
  let parents = data.filter(value => value.parentId == 'undefined' || value.parentId == null)
  let children = data.filter(value => value.parentId !== 'undefined' && value.parentId != null)
  let translator = (parents, children) => {
    parents.forEach((parent) => {
      children.forEach((current, index) => {
        if (current.parentId === parent.id) {
          let temp = jsON.parse(jsON.stringify(children))
          temp.splice(index, 1)
          translator([current], temp)
          typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
        }
      }
      )
    }
    )
  }
 
  translator(parents, children)
 
  return parents
}

数据转换后是

[
  {
    "id": 1,
    "name": "1",
    "children": [
      {
        "id": 2,
        "name": "1-1",
        "parentId": 1,
        "children": [
          {
            "id": 3,
            "name": "1-1-1",
            "parentId": 2,
            "children": [
              {
                "id": 6,
                "name": "1-1-1-1",
                "parentId": 3
              }
            ]
          }
        ]
      },
      {
        "id": 4,
        "name": "1-2",
        "parentId": 1,
        "children": [
          {
            "id": 5,
            "name": "1-2-2",
            "parentId": 4
          }
        ]
      }
    ]
  },
  {
    "id": 7,
    "name": "2"
  }
]

思路:将有父子关系的数组数据先分为两类,一类是没有父节点的数据(取个别名parents),另一类是有父节点的数据(取个别名children),然后通过遍历parents,对每一个父节点在children查找对应的子节点,并将其放入父节点的children中(这里我的是以children表示子节点),然后每个子节点又作为一个父节点来重复之前的动作。(可能这里描述的不太清楚,下面我将对方法进行注释说明)

/**
 * 该方法用于将有父子关系的数组转换成树形结构的数组
 * 接收一个具有父子关系的数组作为参数
 * 返回一个树形结构的数组
 */
function translateDataToTree(data) {
  //没有父节点的数据
  let parents = data.filter(value => value.parentId == 'undefined' || value.parentId == null)
 
  //有父节点的数据
  let children = data.filter(value => value.parentId !== 'undefined' && value.parentId != null)
 
  //定义转换方法的具体实现
  let translator = (parents, children) => {
    //遍历父节点数据
    parents.forEach((parent) => {
      //遍历子节点数据
      children.forEach((current, index) => {
        //此时找到父节点对应的一个子节点
        if (current.parentId === parent.id) {
          //对子节点数据进行深复制,这里只支持部分类型的数据深复制,对深复制不了解的童靴可以先去了解下深复制
          let temp = JSON.parse(JSON.stringify(children))
          //让当前子节点从temp中移除,temp作为新的子节点数据,这里是为了让递归时,子节点的遍历次数更少,如果父子关系的层级越多,越有利
          temp.splice(index, 1)
          //让当前子节点作为唯一的父节点,去递归查找其对应的子节点
          translator([current], temp)
          //把找到子节点放入父节点的children属性中
          typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
        }
      }
      )
    }
    )
  }
 
  //调用转换方法
  translator(parents, children)
 
  //返回最终的结果
  return parents
}

当然在实际开发中,可能属性名称的定义可能跟我例子中的不同,使用该方法的话,就需将属性名改成实际的名称即可,关键的属性名有id,parentId,children


来源:https://blog.csdn.net/so_single/article/details/81431025


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1427

关闭

JavaScript数组中的22个常用方法

数组总共有22种方法,本文将其分为对象继承方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组方法、数组删改方法、数组位置方法、数组归并方法和数组迭代方法共10类来进行详细介绍

Array数组相关方法

push向数组末尾添加元素;unshift向数组开头增加元素;pop删除数组末尾一项;shift删除数组的第一项;join为数组添加指定的分隔符;slice找某一区域内的项,返回成新数组形式

js数组的迭代

js数组的迭代:forEach() 方法对数组的每个元素执行一次提供的函数。map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

在 Array.filter 中正确使用 Async

在第一篇文章中,我们介绍了 async / await 如何帮助处理异步事件,但在异步处理集合时却无济于事。在本文中,我们将研究该filter函数,它可能是支持异步函数的最直观的方法。

Array.slice 8种不同用法

在深入研究一些更高级的用法之前,让我们看一下slice方法的基础知识。如MDN文档,slice 是数组上的一个方法,它最多有两个参数,从该索引处开始提取原数组中的元素,如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取

原生js获取数组中的最大值max和最小值min的方法总结

JavaScript获取数组中的最大值和最小值:方法一:传统循环遍历,方法二:利用Math.max和Math.min,方式三.利用sort排序...

js中的Array

Array 对象用于在单个的变量中存储多个值。 创建 Array 对象的语法;参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时

如何快速的创建一个包含100个元素的数组

如何快速的创建一个包含100个元素的数组, 最初见到的问题是如何创建100个为元素为0 的数组,研究了一系列的方法,包含Es6 新的API ,不得不说, ES6 好强大!

js实现一维数组转换为树形结构数组

在设计树形结构的数据时候,数据库一般为:id,name,parent...如果后端不处理直接返给前端,前端就需要把这个一维数组转换为树形结构数组。下面整理了下如何通过js实现一维数组转换为树形结构数组。

js实现交换数组元素位置的方法总汇

交换数组元素位置是开发项目中经常用到的场景,总结下用过的几种方式:第三方变量、splice方法、解构赋值

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!