javascript中线形数据转换为树形数据以及树形数据递归调用

90 阅读 0 评论 60 点赞

我是靠谱客的博主可爱花卷，最近开发中收集的这篇文章主要介绍javascript中线形数据转换为树形数据以及树形数据递归调用，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前言

关于树的问题已经是一个老生常谈的话题了，但是大部分情况下都是通过后台进行异步获取数据，如果使用javascript怎么实现数据库中的线性数据向树形数据转换呢？今天我们就一起来整理一下。

必备小知识

js中有六大数据类型，包括五种基本数据类型（Number,String,Boolean,Undefined,Null），和一种复杂的引用数据类型(Object)，为了更好的理解引用数据类型的不同之处我们通过下面这个例子看看。

题目1： var a = 100;

　　　　var b = a;

　　　 a = 200;

　　　　console.log (b);

题目2： var a = {age : 20};

　　　　var b = a;

　　　　b.age = 21;

　　　　console.log (a.age);

题目1的答案是 100，题目2的答案是21，

题目1

简单的值类型，在从一个变量向另一个变量赋值基本类型时，会在该变量上创建一个新值，然后再把该值复制到为新变量分配的位置上。此时，a中保存的值为 100 ，当使用 a 来初始化 b 时，b 中保存的值也为100，但b中的100与a中的是完全独立的，该值只是a中的值的一个副本，此后，这两个变量可以参加任何操作而相互不受影响。也就是说基本类型在赋值操作后，两个变量是相互不受影响的。

题目2

引用类型，当从一个变量向另一个变量赋值引用类型的值时，同样也会将存储在变量中的对象的值复制一份放到为新变量分配的空间中。

这时保存在变量中的是对象在堆内存中的地址，所以，与简单赋值不同，这个值的副本实际上是一个指针，而这个指针指向存储在堆内存的一个对象。那么赋值操作后，两个变量都保存了同一个对象地址，则这两个变量指向了同一个对象。因此，改变其中任何一个变量，都会相互影响。

因此，引用类型的赋值其实是对象保存在栈区地址指针的赋值，因此两个变量指向同一个对象，任何的操作都会相互影响。

补充

Object包括Object Array Function，他们都是对象，Number Boolean String也可以通过new Number()、new Number()、new String()创建但是他们和对象是有差异的，官方文档中将这种称为包装对象，具体解释可以看javascript权威指南的第三章3.6包装对象一节，在这里主要区分引用数据类型和简单值类型的区别。

基本原料

下面这段代码可以理解为通过在数据库中查询获得的数据，该数据为数组结构，数组中每个元素都是对象，切记对象是引用数据类型；

var list = [{
    id: "a",
    pid: null,
    name: "理科"
}, {
    id: "b",
    pid: "a",
    name: "数学"
}, {
    id: "c",
    pid: "a",
    name: "物理"
}, {
    id: "d",
    pid: "a",
    name: "化学"
}, {
    id: "e",
    pid: "f",
    name: "动物"
}, {
    id: "f",
    pid: "a",
    name: "生物"
}, {
    id: "g",
    pid: "h",
    name: "政治"
}, {
    id: "j",
    pid: "h",
    name: "历史"
}, {
    id: "h",
    pid: null,
    name: "文科"
}, {
    id: "i",
    pid: "j",
    name: "近代史"
}, {
    id: "k",
    pi