js 实现一个简单的树形函数
时间: 2024-03-02 21:52:04 浏览: 59
好的,下面是一个简单的树形函数的实现:
```javascript
function TreeNode(val) {
this.val = val;
this.children = [];
}
function createTree(arr) {
const map = {};
const root = new TreeNode(0);
arr.forEach((item) => {
const node = new TreeNode(item.id);
node.val = item.val;
map[item.id] = node;
if (item.pid === 0) {
root.children.push(node);
} else {
const parent = map[item.pid];
parent.children.push(node);
}
});
return root.children;
}
```
这个函数接受一个数组作为参数,数组中的每个元素都包含一个节点的 `id` 和 `pid` (父节点的 `id`),以及这个节点的值 `val`。函数返回一个树形结构,其中根节点是一个空节点,它的所有子节点都是数组中 `pid === 0` 的节点,其他节点则作为它们的父节点的 `children` 属性的子节点。
相关问题
js实现一个简单的树形结构
可以使用递归函数实现一个简单的树形结构,比如这样:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>树形结构</title>
</head>
<body>
<ul id="tree">
<li>节点1</li>
<li>节点2
<ul>
<li>子节点1</li>
<li>子节点2
<ul>
<li>孙子节点1</li>
<li>孙子节点2</li>
</ul>
</li>
<li>子节点3</li>
</ul>
</li>
<li>节点3</li>
</ul>
<script>
// 递归函数,遍历树形结构
function traverse(node) {
if (node.nodeName == 'UL' || node.nodeName == 'OL') {
for (var i = 0; i < node.childNodes.length; i++) {
var childNode = node.childNodes[i];
if (childNode.nodeName == 'LI') {
console.log(childNode.textContent);
traverse(childNode); // 递归遍历子节点
}
}
}
}
// 遍历树形结构
traverse(document.getElementById('tree'));
</script>
</body>
</html>
```
这里使用了一个 `traverse` 函数来遍历树形结构,它接收一个节点作为参数,然后判断节点是否是列表(`UL` 或 `OL`),如果是,则遍历它的子节点,如果子节点是列表项(`LI`),则输出节点内容,并递归遍历它的子节点。最后,我们调用 `traverse` 函数来遍历整个树形结构。
阅读全文
相关推荐

















