【小彬学vue系列专栏】 002 | 一颗树的惆怅

本文链接：https://blog.csdn.net/ASUKA2020/article/details/97888186

1.发现了什么

小彬发现了一个好东西。

这个新鲜玩意就是ElementUI（小彬简称为：EUI） 。在小彬理解中 EUI 就是 Bootstrap 外面套了一层 Vue 的壳，这个东西也有另一个名字，Vue组件。小彬统计过，EUI 共有 67 个组件，可见把 EUI 页面元素分的够细了。小彬脑海中闪现一副 Vue 手册上的一副图，也许 EUI 就是对这张图的忠诚诠释。

在这里插入图片描述

2.我想有棵树

最近小彬很苦恼，具体点是说是前端小美的苦恼，她想将一批数据按树层级的方式显示在页面上，EUI想要的数据格式是这样，由 label 和 children 组成的嵌套数据结构。

[{
    label: '测试1',
    children: [{
        label: '测试3',
        children: [{
            label: '测试6',
            children:[{
                'label':'子7'
            }]

        }]
    }]
}]

EUI 最终渲染出的效果是这样
在这里插入图片描述

要怎么处理成 EUI 树形控件所需要的数据结构，小彬思索了很久，并借助网上搜索的信息实现了对数据的树形化处理。

<script>
    var data = [
        { id: 3, name: "测试3", pid: 1 },
        { id: 1, name: "测试1", pid: 0 },
        { id: 6, name: "测试6", pid: 3 },
        { id: 7, name: "子7", pid: 6 },

    ];

    function toTree(data) {
        var map = {};
        data.forEach(function (item) { 
            map[item.id] = item;
        });

        var val = [];
        data.forEach(function (item) {
            item.label = item.name;
            var parent = map[item.pid]; 
            if (parent) {
                (parent.children || ( parent.children = [] )).push(item);
            } else {
                val.push(item);
            }
        });
        return val;
    }
    console.log(toTree(data))
</script>

代码的执行结果，可以直接用于EUI的树数据结构。
在这里插入图片描述

3.为什么会是这样

小彬这时有些疑问，就是这么几行代码，它的实现原理是什么呢？小彬对代码做了反复的调试运行，最后发现了构建树的关键：引用传值，也是取址。

小彬结合自己的后端经验进行思考，后端在一般给变量赋值时，默认用的是取值操作，这种情况会在内存中会重新开辟一个存储空间存放这个值。如果使用取址的方式，则需要使用&符号，这个符号其实也隐喻着「链接」的意思，使用这个符号后，取到的不是这个值而是这个值对应在内存中的地址，该变量还是指向之前变量的内存存储空间地址，而不会新开辟空间。

反观JavaScrpt前端，它在使用对象或数组数据类型时默认使用的是引用赋值，而正是这个特性，使得 JS 对EUI树的构建，用几行代码就能完成。