有 JS 或者 TS 的操作树的库吗？自己写起来感觉头都大了

V2EX = way to explore

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

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 392 天前的主题，其中的信息可能已经有所发展或是发生改变。

项目需要，需要完全通过前端来操作树。不是 DOM 树也不是树形组件，是下面这样的数据结构意义上的树：

const tree = [
  {
    id: '1',
    title: '节点 1',
    children: [
      {
        id: '1-1',
        title: '节点 1-1'
      },
    ]
  }
]

需要用到下面这些操作：

增加节点
删除节点
修改节点
移动节点，包括平级和跨层级移动

拼拼凑凑勉强写了个能用的，但是总感觉还是很不放心。就像之前去看 lodash 的源代码一样，看起来很简单的功能，为了考虑周全各种状况，最后写出来的代码都比想象中长很多。

所以有类似 lodash 这样的可以放心使用操作树的 JS 库吗？

节点

lodash

title

操作树

30 条回复 • 2023-11-03 00:30:46 +08:00

nulIptr

2023-10-26 23:07:43 +08:00

这不就是普通的业务代码吗，实在觉得自己写的不行就有请 chatgpt 吧

kuber

2023-10-26 23:26:21 +08:00

能压扁来处理吗？你是什么场景？

Pastsong

2023-10-26 23:27:42 +08:00 via Android

npm 库一大堆

angrylid

2023-10-27 01:47:11 +08:00 via Android

你是要做类似资源管理器左侧目录那种功能吗

gooin

2023-10-27 09:59:17 +08:00

antd 呗

SixGodHave7

2023-10-27 10:01:33 +08:00

@nulIptr 确实，我个人觉得像这些基础逻辑用 gpt 比自己靠谱

Leila233

2023-10-27 10:01:35 +08:00

之前 start 了一个库，感觉还不错，也比较简单： https://github.com/wintc23/js-tree-tool

Coder89757

2023-10-27 10:20:32 +08:00

https://www.npmjs.com/package/tree-model

0829ewlLuna

2023-10-27 10:37:13 +08:00

之前研究过 antd 的 treeSelect 组件，可以去看看他们的源码，你说的这几个场景都有覆盖，我是扒了他们的源码改改用的，使用到的场景是一个文档的目录页面，需要支持展开收起，以及文件目录的删除/平移/跨级移动。

sx931210

2023-10-27 12:08:01 +08:00

火焰纹章好玩吗

MrDavidJones

2023-10-27 12:08:49 +08:00 via iPhone

https://github.com/dsherret/ts-morph/tree/latest/packages/ts-morph

NerbraskaGuy

2023-10-27 13:10:45 +08:00

之前做项目，后端接入第三方数据之后数据清洗全放在了前端，也是这种树结构还好几层，各种展开筛选增删，弄麻了

txzh007

2023-10-27 13:43:52 +08:00

ui 组件很多都支持,麻烦的是移动后的逻辑处理

duan602728596

2023-10-27 14:00:25 +08:00

只能多写测试用例覆盖一下了

iOCZ

2023-10-27 14:02:09 +08:00

用宽度优先遍历打平即可

ChefIsAwesome

2023-10-27 14:05:07 +08:00 via Android

浏览器环境的话，你直接创建一个 dom 元素，把值写在 attribute 上，这样那一堆 dom 操作节点的方法你都能用了。

Nazz

2023-10-27 15:48:28 +08:00

练一练递归

darkengine

2023-10-27 16:01:11 +08:00

这个树操作打算支持拖拽吗？

HelloWorld556

2023-10-27 16:03:33 +08:00

我是问的 gpt ，写出来的非常好用

dudubaba

2023-10-27 19:54:14 +08:00

先递归打平，增删改完再递归还原。嗖一下，比引入库快多了。

coderHu

2023-10-27 23:21:47 +08:00

https://www.npmjs.com/package/treemate

learningman

2023-10-28 02:31:21 +08:00 via Android

基础不牢建议转行

HaroldFinchNYC

2023-10-28 03:50:48 +08:00

@NerbraskaGuy 那你们后端太懒了

lisxour

2023-10-28 09:13:54 +08:00

@txzh007 对数据处理总不能用一个 ui 库去完成吧。。。

meteor957

2023-10-28 09:32:06 +08:00 via Android

@learningman 你的建议没人会听，你的建议毫无价值

dayeye2006199

2023-10-28 11:29:58 +08:00 via Android

Leetcode 多刷刷

learningman

2023-10-28 12:55:39 +08:00

@meteor957 那就不叫建议好了，改叫早晚转行比较好

txzh007

2023-10-30 10:04:25 +08:00

@lisxour 数据是数据,ui 是 ui,是 ui 改变数据,还是数据改变 ui,拖拽操作这些 ui 组件都会有拖拽回调

humbass

2023-11-01 02:49:15 +08:00

听说这个 https://www.npmjs.com/package/tree-model 就是楼主想要的

enchilada2020

2023-11-03 00:30:46 +08:00

@ChefIsAwesome 角度刁钻！