JavaScript树型数据与一维数组相互转换

简介: JavaScript树型数据与一维数组相互转换

1. 父子关系数据(一维数组)转换为树型结构数据

1.1 原始数据

var source = [
  {
    id: 1,
    pid: 0,
    name: '江苏省'
  },{
      id: 2,
      pid: 1,
      name: '南京市'
  },{
      id: 7,
      pid: 0,
      name: '上海市'
  }, {
    id: 3,
    pid: 2,
    name: '鼓楼区'
  },{
    id: 6,
    pid: 5,
    name: '武汉市'   
  },{
    id: 4,
    pid: 2,
    name: '玄武区'   
  },{
    id: 5,
    pid: 0,
    name: '湖北省'   
  }]

1.2 js代码

function toTree(data) {
    let result = [];
  if (!Array.isArray(data)) {
    return result;
  }
  data.forEach(item => {
    delete item.children;
  });
  let map = {};
  data.forEach(item => {
    map[item.id] = item; // id为键,原数据每一项为值的map对象
  });
  data.forEach(item => {
    let parent = map[item.pid]; // item的pid若与map对象的键相同,则item为父级节点
    let label = "";
    item.label = item.name;
    if (parent) {
      (parent.children || (parent.children = [])).push(item);
        parent.children.forEach(_item => {
          _item.label = _item.name; 
        });
    } else {
      result.push(item);
    }
  });
  console.log(result)
  return result;
}
toTree(source);

1.3 转换效果

2020062310470442.png

参考文章(侵删)

2. 树型结构数据转换为一维数组

2.1 原始数据

const treeObj = {
  id: '0',
  name: '中国',
  children:[
    {
      id: '1',
      name:'湖北省',
      children:[
        {
          id: '1-1',
          name:'武汉市',
          children:[
            {
              id: '1-1-1',
              name:'武昌区',
            },        
          ]
        },    
      ]
    },
    {
      id: '2',
      name:'江苏省',
      children:[
        {
          id: '2-1',
          name:'南京市',
          children:[
            {
              id: '2-1-1',
              name:'玄武区',
            }   
          ]
        },    
        {
          id: '2-2',
          name:'镇江市',
          children:[
            {
              id: '2-2-1',
              name:'句容市',
              children: [
                {
                  id: '2-2-1-1',
                  name:'下蜀镇',
                },       
              ]
            },    
            {
              id: '2-2-2',
              name:'京口区'
            },    
          ]
        },       
      ]
    },
    {
      id: '3',
      name:'浙江省',
    }    
  ]
};

2.2 js代码

// 将treeObj中的所有对象,放入一个数组中,要求某个对象在另一个对象的children时,其parent_id是对应的另一个对象的id
// 其原理实际上是数据结构中的广度优先遍历
function tree2Array(treeObj, rootid) {
   const temp = [];  // 设置临时数组,用来存放队列
   const out = [];    // 设置输出数组,用来存放要输出的一维数组
   temp.push(treeObj);
   // 首先把根元素存放入out中
   let pid = rootid;
   const obj = deepCopy(treeObj);
   obj.pid = pid;
   delete obj['children'];
   out.push(obj)
   // 对树对象进行广度优先的遍历
   while(temp.length > 0) {
       const first = temp.shift();
       const children = first.children;
       if(children && children.length > 0) {
           pid = first.id;
           const len = first.children.length;
           for(let i=0;i<len;i++) {
               temp.push(children[i]);
               const obj = deepCopy(children[i]);
               obj.pid = pid;
               delete obj['children'];
               out.push(obj)
           }
       } 
   }
   return out
}
console.log(tree2Array(treeObj, 'root'))
// 深拷贝
function deepCopy(obj){
    // 深度复制数组
    if(Object.prototype.toString.call(obj) === "[object Array]"){    
      const object=[];
      for(let i=0;i<obj.length;i++){
        object.push(deepCopy(obj[i]))
      }   
      return object
    }
    // 深度复制对象
    if(Object.prototype.toString.call(obj) === "[object Object]"){   
      const object={};
      for(let p in obj){
        object[p]=obj[p]
      }   
      return object
    }
}

2.3 转换效果

2020062310470442.png

参考文章(侵删)


相关文章
|
3天前
|
JavaScript 前端开发
js实现数据的双向绑定
js实现数据的双向绑定
13 2
|
5天前
|
前端开发 JavaScript 安全
JavaScript——数字超过精度导致数据有误
JavaScript——数字超过精度导致数据有误
15 2
|
4天前
|
JavaScript 前端开发
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
|
4天前
|
JavaScript 前端开发
JavaScript中通过按回车键进行数据的录入
这篇文章提供了一个JavaScript示例代码,演示了如何通过监听回车键(keyCode为13)在网页上实现数据的录入和触发一个警告框提示"正在登录验证......"。
JavaScript中通过按回车键进行数据的录入
|
7天前
|
JavaScript 算法 数据安全/隐私保护
烯牛数据JS逆向:MD5数据加密?不存在的!
烯牛数据JS逆向:MD5数据加密?不存在的!
23 1
|
7天前
|
JavaScript 前端开发 网络协议
抖音直播弹幕数据逆向:websocket和JS注入
抖音直播弹幕数据逆向:websocket和JS注入
31 1
|
4天前
|
JavaScript 前端开发 索引
JavaScript数组相关的方法有哪些?
JavaScript数组相关的方法有哪些?
|
4天前
|
JavaScript 前端开发
记录Javascript数组类练习
记录Javascript数组类练习
|
4天前
|
JavaScript 容器
JS-数组的定义
JS-数组的定义
|
6天前
|
JavaScript 前端开发
JavaScript——快速判断数组对象的值是否全部满足条件
JavaScript——快速判断数组对象的值是否全部满足条件
19 0

热门文章

最新文章