js 怎么生成树结构，算法太烂

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 3968 days ago, the information mentioned may be changed or developed.

var arr = [
    {id:1, pid:0, name:"SYSTEM"},
    {id:2, pid:1, name:"aa"},
    {id:3, pid:2, name:"aaa"},
    {id:4, pid:2, name:"b"},
    {id:5, pid:0, name:"c"},
    {id:6, pid:5, name:"cc"}
];


/*
var result = [{
        "name": "SYSTEM",
        "expanded": true,
        "id": 0,
         "items": [
                   {
                        name: "Sub",
                       "expanded": true,
                        "id":1,
                       "pid":0,
                       "items":[ ......]
                   },
                   {}
 } ];
*/

遇到这样的就傻眼了，99

树结构

var

aaa

35 replies • 2015-06-17 22:15:22 +08:00

Jaylee

Jun 16, 2015

你在说啥？

coolicer

Jun 16, 2015

@Jaylee

```js
生成这样的结构
var datasource = [{
"text": "null",//根节点
"expanded": true,
"items": [
{
"text":"user1",//第一个子菜单
"expanded": true,
"items":[
{
"text":"user2",//二级菜单
"expanded": true,
"items":[
{
"text":"user4",//三级
"items":[
{
"text":"user5"//四级
}
]
}
]
},
{
"text":"user3",
}
]
},
]
}];
```

imn1

Jun 16, 2015

这个事情就不要在前端做了，除非是用nodejs

sneezry

Jun 16, 2015 via iPhone

楼主，看你的意思好像不知道js里树应该怎么写出来吗~不用这么搞，js里其实也有指针，对象和数组直接引用就是指针。爪机打字太费事，一会给楼主个例子。

coolicer

Jun 16, 2015

coolicer

Jun 16, 2015

@sneezry 差不多吧，没搞过。问过一些都不懂，好失望

coolicer

Jun 16, 2015

@imn1 没办法，业务分给前端做。还要自己写存储过程拿结果。

Septembers

Jun 16, 2015 via Android

see http://www.oschina.net/code/snippet_173183_11767

Septembers

Jun 16, 2015 via Android

@imn1 为什么不利用桌面过剩的算力？
（如果前端渣，导致阻塞的话那另说

coolicer

Jun 16, 2015

@Septembers 有点叼哦。5行。

coolicer

Jun 16, 2015

@Septembers 额，我看看怎么转成 js.

Septembers

Jun 16, 2015 via Android

@coolicer 自己移植下完事

loading

Jun 16, 2015 via Android

@Septembers 前几天也写文件管理也遇到目录树传到前端，参考下重构下自己的代码。

Septembers

Jun 16, 2015 via Android

@coolicer 找参考实现别死盯着目标语言，有时候找找其他的语言的移植过来用也不错

czheo

Jun 16, 2015

https://jsfiddle.net/6nk0mkm3/1/

imn1

Jun 16, 2015

@Septembers
浏览器是有对脚本运行时间限制的，一般人不会调这个，起码我也是只知道firefox怎么调
如果太多脚本、或者运算时间长，页面就会卡住（引擎好的会报错），用户体验就差了
前端首先要考虑低端配置的客户端，而不是认为客户端必然有“富余”

czheo

Jun 16, 2015

@imn1 你叫react那种把整个dom做成virtual dom的怎么整

sneezry

Jun 16, 2015

@czheo 同学写的非常好了，我就不写了 :P

oxyflour

Jun 16, 2015

https://gist.github.com/oxyflour/a90ecc4616587997c950

核心函数只要三行（然而你需要支持 es6 语法的环境，比如最新的 firefox

Septembers

Jun 16, 2015 via Android

@oxyflour 递归深度太深不会炸？

imn1

Jun 16, 2015

@czheo
那要看用户群，反正我这台机不敢在浏览器乱按 F12

iNaru

Jun 16, 2015

var temp = [];
for(var i in arr){
arr[i].expanded = true;
var id = arr[i].pid - 1;
(id in arr ? (arr[id].items || (arr[id].items = [])) : temp).push(arr[i])
}
console.log(temp);

oxyflour

Jun 16, 2015

@Septembers 会炸的（但是用 ff 试了，深度要到好几千呢，比如下面这个就不会炸
tree(0, Array.apply(null, new Array(2048)).map((v, i) => { return {id:i+1, pid:i} }))

iNaru

Jun 16, 2015

@iNaru 这个原数组会被污染，之前最好用克隆的数组进行。

Septembers

Jun 16, 2015 via Android

@imn1

1. 主流用户
2. 高端用户建立在主流之上满足用户
3. 低端用户建立在主流以下满足用户

先满足主流
如果低端/主流用户想得到主流/高端的体验请升级

众口难调某些用户喜欢在低端位置获取高端体验这样诉求只能是miss

imn1

Jun 16, 2015

@Septembers
这个就不用跟我说了，我全职做市场调查超过5年，非全职市场分析超过20年

skyler

Jun 16, 2015

看看 jstree 找找灵感吧 XD

br00k

Jun 17, 2015

一般都是后端干好吧。

mingzepeng

Jun 17, 2015

像js这种动态语言，生成树结构不要太方便啊

mingzepeng

Jun 17, 2015

看错楼主的表达了，不好意思。

coolicer

Jun 17, 2015

@czheo https://jsfiddle.net/6nk0mkm3/2/
我加多一层就报错了？

siroccoicode

Jun 17, 2015

@coolicer 你的用例中id、pid为字符串型，而作者代码判断条件使用===判断的数字型。作者代码中还有一个问题：如果原数组中id排序并非顺序，会出现parent在objMap取空的问题

coolicer

Jun 17, 2015

@siroccoicode 谢谢提醒

czheo

Jun 17, 2015 via iPhone

@siroccoicode objMap的bug都看出来了，你真仔细。不像某些lz拿来主义

coolicer

Jun 17, 2015

@czheo = = 我也有注意到全等，也是有转类型的，只是不知道为什么不行。