js 深拷贝与数组转树

原创已于 2022-10-21 20:38:42 修改 · 396 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #servlet

于 2022-09-17 23:46:00 首次发布

本文介绍了一种使用JavaScript实现树状结构数据的方法。通过递归函数arrayToTree将扁平化的数组转换为树形结构，便于展示层级关系数据。文章还提供了一个具体的例子来演示如何创建学校、班级和学生之间的层次关系。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

</body>
</html>
<script>

  // 创建parentId的子节点，这个函数是没有创建根节点的其他信息的，只是创建了根节点的子节点数组，所以这个函数的返回值是一个数组
  function arrayToTree(data,parentId){
    let result = [];
    for(let i = 0; i < data.length; i++){ // 创建子节点列表
      if(data[i].parentId === parentId){
        let obj = deepClone(data[i]); // 深拷贝，创建一个子节点
        let children = []; // 子节点的子节点列表
        children = arrayToTree(data, data[i].id); // 递归创建子节点的子节点
        if(children.length > 0){ // 注意需求子节点为空时是否展示子节点
          obj.children = children; // 加上children字段
        }
        result.push(obj);
      }
    }
    return result;
  }

  // 深拷贝
  function deepClone(obj){
    if(!obj || typeof obj !== 'object'){
      return;
    }
    let newObj = Array.isArray(obj) ? [] : {};
    for(let key in obj){ // 遍历可枚举属性，包括原型链上的
      if(obj.hasOwnProperty(key)){
        newObj[key] = (typeof obj[key] === 'object') ? deepClone(obj[key]) : obj[key];
      }
    }
    return newObj;
  }

  let arrData = [
    {
      id: 1, val: '学校', parentId: 0, department:['部门1', '部门2']
    }, {
      id: 2, val: '班级1', parentId: 1
    }, {
      id: 3, val: '班级2', parentId: 1
    }, {
      id: 4, val: '学生1', parentId: 2
    }, {
      id: 5, val: '学生2', parentId: 2
    }, {
      id: 6, val: '学生3', parentId: 3
    },
  ];

  console.log(arrayToTree(arrData, 0));

</script>