将JSON一维数据结构转化为树形数据结构的JS方法

2018-09-29  本文已影响161人  microkof

将JSON一维数据结构转化为树形数据结构是编程中的基本算法,这里总结一下,当然,也参考了一些前人的经验。

复习一下传址赋值(又叫引用赋值)

研究转化方法之前,先了解一下传址赋值,它是解决JSON结构转化的一个前提,如果没有传址赋值这种特性,咱们的方法就复杂多了。

看代码:

var a = {
  b: {
    c: 1
  }
}

var x = a.b

a.b.c = 2

console.log(x) // {c: 2}

可以看出,表面上var x = a.b在前,a.b.c = 2重赋值在后,但是在前赋值的变量确实会被在后赋值的代码所影响。道理很简单,当一个变量的值为数组或对象的时候,变量的值并不会在内存中克隆一份,而是直接指向数组或者对象的内存原地址,只要原数据有变化,变量也就等于有变化了。下面是数组的例子,你以为x是永远不变的[2,3]么?并不是:

var a = [1,[2,3],4]

var x = a[1]

a[1][1] = 6

console.log(x) // [2, 6]

JSON一维结构转树形结构的要求

首先先明确一维结构的写法,比如,让你将某国军队的从属关系存入数据表,你怎么存?

比较普遍的写法是:

var jsonData = [{
    "id": "1",
    "pid": "0",
    "name": "第一战区"
}, {
    "id": "4",
    "pid": "1",
    "name": "第1军"
}, {
    "id": "5",
    "pid": "4",
    "name": "第1师"
}]

也就是说,使用pid标记上级,这样一级级的追溯,最终可以形成树状结构,大致如下:

var jsonData = [{
    "id": "1",
    "pid": "0",
    "name": "第一战区",
    "children": [
        {
            "id": "4",
            "pid": "1",
            "name": "第1军",
            "children": [
                {
                    "id": "5",
                    "pid": "4",
                    "name": "第1师"
                }
            ]
        }
    ]
}]

思路

  1. 利用临时数组变量,将无序的JSON数据编制序列。
    因为默认的JSON结构,你无法迅速定位一个想要的元素,如果用临时数组变量,将元素按照id存入数组,就可以快速定位元素。
  2. 遍历JSON的每一个元素,去临时变量里寻找它的父元素,如果找到,就填到这个父元素的children里面,如果找不到父元素,说明它就是一级元素。
    最终将所有一级元素push到result变量即可。
    这里就涉及到一个问题,就是如果先发生了一级元素已经push到result变量,那么之后再发生下级元素填到该一级元素的children里,还来得及么?
    这里就用到JS的传址赋值的特点了,所以答案是:来得及。

代码

代码的JSON使用了别人的一个例子,而函数是我自己写的:

var jsonData = [{
    "id": "1",
    "pid": "0",
    "name": "家用电器"
}, {
    "id": "4",
    "pid": "1",
    "name": "大家电"
}, {
    "id": "5",
    "pid": "1",
    "name": "生活电器"
}, {
    "id": "2",
    "pid": "0",
    "name": "服饰"
}, {
    "id": "3",
    "pid": "0",
    "name": "化妆"
}, {
    "id": "7",
    "pid": "4",
    "name": "空调"
}, {
    "id": "8",
    "pid": "4",
    "name": "冰箱"
}, {
    "id": "9",
    "pid": "4",
    "name": "洗衣机"
}, {
    "id": "10",
    "pid": "4",
    "name": "热水器"
}, {
    "id": "11",
    "pid": "3",
    "name": "面部护理"
}, {
    "id": "12",
    "pid": "3",
    "name": "口腔护理"
}, {
    "id": "13",
    "pid": "2",
    "name": "男装"
}, {
    "id": "14",
    "pid": "2",
    "name": "女装"
}, {
    "id": "15",
    "pid": "7",
    "name": "海尔空调"
}, {
    "id": "16",
    "pid": "7",
    "name": "美的空调"
}, {
    "id": "19",
    "pid": "5",
    "name": "加湿器"
}, {
    "id": "20",
    "pid": "5",
    "name": "电熨斗"
}];

function one_dimensional_to_tree(jsonData){
    var result = [], temp = {}, i = 0, j = 0, len = jsonData.length
    for(; i < len; i++){
        temp[jsonData[i]['id']] = jsonData[i] // 以id作为索引存储元素,可以无需遍历直接定位元素
    }
    for(; j < len; j++){
        var currentElement = jsonData[j]
        var tempCurrentElementParent = temp[currentElement['pid']] // 临时变量里面的当前元素的父元素
        if (tempCurrentElementParent) { // 如果存在父元素
          if (!tempCurrentElementParent['children']) { // 如果父元素没有chindren键
            tempCurrentElementParent['children'] = [] // 设上父元素的children键
          }
          tempCurrentElementParent['children'].push(currentElement) // 给父元素加上当前元素作为子元素
        } else { // 不存在父元素,意味着当前元素是一级元素
            result.push(currentElement);
        }
    }
    return result;
}

console.log(one_dimensional_to_tree(jsonData))
上一篇 下一篇

猜你喜欢

热点阅读