js实现层级
层级结构的实现方法
在JavaScript中实现层级结构通常涉及树形数据结构的构建、遍历和操作。以下是几种常见的实现方式：
使用对象嵌套
对象嵌套是最直观的层级表示方法，适合固定或简单的层级结构：
const hierarchy = {
name: 'Root',
children: [
{
name: 'Child 1',
children: [
{ name: 'Grandchild 1', children: [] },
{ name: 'Grandchild 2', children: [] }
]
},
{
name: 'Child 2',
children: []
}
]
};使用扁平化结构+引用
通过ID和parentID建立关联，适合动态或大型层级数据：
const flatData = [
{ id: 1, name: 'Root', parentId: null },
{ id: 2, name: 'Child 1', parentId: 1 },
{ id: 3, name: 'Child 2', parentId: 1 },
{ id: 4, name: 'Grandchild 1', parentId: 2 }
];
function buildTree(items, parentId = null) {
return items.filter(item => item.parentId === parentId)
.map(item => ({
...item,
children: buildTree(items, item.id)
}));
}使用类实现
面向对象方式更适合需要封装层级操作的场景：
class TreeNode {
constructor(value) {
this.value = value;
this.children = [];
}
addChild(childNode) {
this.children.push(childNode);
}
removeChild(childNode) {
this.children = this.children.filter(child => child !== childNode);
}
}层级遍历算法
深度优先遍历(DFS)
递归实现：
function dfs(node) {
console.log(node.value);
node.children.forEach(child => dfs(child));
}栈实现：
function dfsStack(root) {
const stack = [root];
while (stack.length) {
const node = stack.pop();
console.log(node.value);
stack.push(...node.children.reverse());
}
}广度优先遍历(BFS)
队列实现：
function bfs(root) {
const queue = [root];
while (queue.length) {
const node = queue.shift();
console.log(node.value);
queue.push(...node.children);
}
}常见应用场景
动态渲染层级菜单
结合DOM操作实现动态菜单：
function renderMenu(node, parentElement) {
const li = document.createElement('li');
li.textContent = node.name;
parentElement.appendChild(li);
if (node.children.length) {
const ul = document.createElement('ul');
node.children.forEach(child => renderMenu(child, ul));
li.appendChild(ul);
}
}多级分类系统
处理商品分类等场景：
function findCategoryPath(categories, targetId, path = []) {
for (const category of categories) {
if (category.id === targetId) return [...path, category];
const found = findCategoryPath(category.children, targetId, [...path, category]);
if (found) return found;
}
return null;
}性能优化技巧
对于大型层级结构，可采用以下优化策略：
- 使用Map存储节点引用加速查找
- 实现惰性加载（按需展开子节点）
- 添加缓存机制存储计算结果
- 使用虚拟滚动技术渲染大量节点
const nodeMap = new Map();
function buildTreeWithMap(items) {
items.forEach(item => nodeMap.set(item.id, item));
items.forEach(item => {
if (item.parentId && nodeMap.has(item.parentId)) {
nodeMap.get(item.parentId).children.push(item);
}
});
return items.filter(item => item.parentId === null);
}
