JS,实现一维数组JSON树结构的转换

JavaScript026

JS,实现一维数组JSON树结构的转换,第1张

1、方法思路使用js数组自带的filter()方法;数据格式要求,父子节点通过,Id,ParentId进行关联。默认父结节id为0。

样例数据: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":"电熨斗"}]

2、实现方法:

function creatTreeData(list){

var clonelist = JSON.parse(JSON.stringify(list))

var result =clonelist.filter(function(father){

var childlist = clonelist.filter(function(child){

return father.id= child.pid

})

if(childlist.length>0){

father.children=childlist

}

return father.pid ==0

})

return result

}

3、方法封装

function treeData(list,id,pid,children){

var clone = JSON.parse(JSON.stringify(list))

return clone.filter(function(father){

var childlist =clone.filter(function(child){

return father[id]==child[pid]

})

if(childlist.length>0){

father[children]=childlist

}

return father[pid]==0

})

}

转自网上:

new Array()

new Array(len)

new Array([item0,[item1,[item2,...]]]

使用数组对象的方法:

var objArray=new Array()

objArray.concact([item1[,item2[,....]]]-----将参数列表连接到objArray的后面形成一个新的数组并返回,原有数组不受影响。如:var arr=["a","b","c"]

arr.concact("d","e")

将返回包括从"a"到"e"字母元素的数组。而arr本身不受影响。

objArray.join(separator)---以separator指定的字符作为分割符,将数组转换为字符串,当seperator 为逗号时,其作用和toString()相同。

objArray.pop()---------通俗的讲,就是弹出数组的最后一个元素。结合下面的push方法,使得将数组作为栈来使用成为可能。pop方法返回数组最后一个元素的值,并将length属性减1,即返回后立即丢失最后一个元素。

objArray.push([value1[,value2[,....]]])-------------将参数添加到数组的结尾。如:[1,2,3, 4].push("a","b")将得到[1,2,3,4,"a","b"]

objArray.reverse()将数组中的元素反转排列。如:[1,2,3].reverse()将得到[3,2,1],这个操作是在原有数组上经行操作,同时也返回数组本身

objArray.shift()-----------移去数组的第一个元素,并返回这个元素的值。这个方法的性质和pop方法很类似,pop方法是移去最后一个元素。

objArray.slice(start,end)----------- 返回数组对象的一个子集,索引从start开始(包括 start),到end结束(不包括end),原有数组不受影响。如:[1,2,3,4,5,6].slice(1,4)将得到[2,3,4]。当 start或者end为负数时,则使用他们加上length后地值。如:[1,2,3,4,5,6].slice(-4,-1)将得到[3,4,5]。如果end小于等于start,将返回空数组。

objArray.sort(comparefn)------- 根据comparefn定义的大小比较函数,对一个数组进行排序。函数comparefn必须接受两个参数element1,element2,如果需要需要element1排在element2之前,应该返回一个负数;如果需要element1排在element2之后,应该返回一个正数,如果两个数平等对待(即保持原有顺序)则返回0。当省略comparefn时,则元素按照字典顺序排列。如:对定义的比较函数cmp: function cmp(e1,e2){return e1-e2}则[3,4,2,7].sort(cmp)将得到[2,3,4,7].

objArray.splice(start,deleteCount[,item1,item2[,...]]]) 这是一个复杂的函数,用于完成数组元素的删除 取代和插入操作。其中,start参数表示要进行操作的索引位置,deleteCount指从start开始要删除的元素的元素个数(包括了start位置),如果deleteCount省略,则表示从start开始要删除数组的剩余部分。[,item1[,item2[,...]]]则表示可选的插入到start之前的元素列表。如:

var arr=[0,1,2,3,4,5,6]

arr.splice(1,1)

document.write(arr)//显示“0,2,3,4,5,6”

arr=[0,1,2,3,4,5,6]

arr.splice(0,0,"a","b")

document.write(arr)//显示“a,b,0,1,2,3,4,5,6"

arr=[0,1,2,3,4,5,6]

arr.splice(3,2,"c","d")

document.write(arr)//显示"0,1,2,c,d,5,6"

objArray.unshift(item1[,item2[,...]]])------------------- 将参数列表插入到数组的开头。其性质和push方法类型,但push方法是将元素添加到数组的结尾。如: [1,2,3,4].unshift("a","b")将得到["a","b",1,2,3,4]。

// 将树数据转换一维数组

    treeDataToCompressed(source) {  // source树形数据

      for (const i in source) {

        this.res.push(source[i])

        source[i].children && source[i].children.length > 0

          ? this.treeDataToCompressed(source[i].children)

          : "" // 子级递归

      }

      return this.res

    },

// 树形数据获取一维数组的ID集合

 flatten(array = []) {

      // console.log(array)

      return [].concat(

        ...array.map(item =>

          [].concat(item.id, this.flatten(item.children || []))

        )

      )

    },