数据格式的转换:数组与树形

数据格式的转换:数组与树形

记录一下找到的数组和树形之间的转换方法。。。

  1. 数组转换成树形
// 方法一:使用循环深层遍历(性能相对较高)
function jsonToTree(jsonData, id, pid) {
      let result = [],
        temp = {};
      for (let i = 0; i < jsonData.length; i++) {
        temp[jsonData[i][id]] = jsonData[i]; // 以id作为索引存储元素,可以无需遍历直接定位元素
      }
      for (let j = 0; j < jsonData.length; j++) {
        let currentElement = jsonData[j];
        let tempCurrentElementParent = temp[currentElement[pid]]; // 临时变量里面的当前元素的父元素
        if (tempCurrentElementParent) {
          // 如果存在父元素
          if (!tempCurrentElementParent["children"]) {
            // 如果父元素没有chindren键
            tempCurrentElementParent["children"] = []; // 设上父元素的children键
          }
          tempCurrentElementParent["children"].push(currentElement); // 给父元素加上当前元素作为子元素
        } else {
          // 不存在父元素,意味着当前元素是一级元素
          result.push(currentElement);
        }
      }
      return result;
    }

// 方法二:使用递归
function translateDataToTree(data) {
    // 没有父节点的数据
    const parent = data.filter(value => value.pid.trim() === '-1'
    || value.pid.trim() === null
    || value.pid.trim() === '');

    // 有父节点的数据
    const child = data.filter(value => value.pid.trim() !== '-1'
    && value.pid.trim() !== null
    && value.pid.trim() !== '');


    // 定义转换方法的具体实现
    const translator = (parents, children) => {
      // 遍历父节点数据
      parents.forEach((item) => {
        // 遍历子节点数据
        children.forEach((current, index) => {
          // 此时找到父节点对应的一个子节点
          // if (current.pid === parent.id) {
          if (current.pid === item.id) {
            // 对子节点数据进行深复制,这里只支持部分类型的数据深复制,
            const temp = JSON.parse(JSON.stringify(children));
            // 让当前子节点从temp中移除,temp作为新的子节点数据,这里是为了让递归时,子节点的遍历次数更少,如果父子关系的层级越多,越有利
            temp.splice(index, 1);
            // 让当前子节点作为唯一的父节点,去递归查找其对应的子节点
            translator([current], temp);
            // 把找到子节点放入父节点的children属性中
            if (typeof item.children !== 'undefined') {
              item.children.push(current);
            } else {
              // eslint-disable-next-line no-param-reassign
              item.children = [current];
            }
          }
        });
      });
    };

    // 调用转换方法
    translator(parent, child);
    // 返回最终的结果
    return parent;
  }
  1. 树形转换成数组
function tree_to_array(nodes) {

  var r = [];

  if (Array.isArray(nodes)) {

    for (var i = 0, l = nodes.length; i < l; i++) {

      r.push(nodes[i]); // 取每项数据放入一个新数组

      if (Array.isArray(nodes[i]["children"]) && nodes[i]["children"].length > 0)

        // 若存在children则递归调用,把数据拼接到新数组中,并且删除该children

        r = r.concat(tree_to_array(nodes[i]["children"]));

      delete nodes[i]["children"]

    }

  }

  return r;

}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值