如何在JavaScript类中使用递归实现嵌套任务的增删操作

现有以下仅支持平级任务增删的Tasks类：

class Tasks {
    constructor () {
        this.store = [];
    }

    addTask(taskName) {
        var task = {
            id: +Date.now(),
            task: taskName,
            children: []
        }
        this.store.push(task);
    }

    deleteTask(id) {
       this.store = this.store.filter(function(task) {return task.id !== id});
    }
}

我们需要对其进行扩展，使其支持嵌套任务的递归增删，最终store结构如下：

nestedArr = [
    {
        id: 1,
        task: 'task 1',
        children: []
    },
    {
        id: 2,
        task: 'task 2',
        children: [
            {
                id: 3,
                task: 'task 1',
                children: []
            },
            {
                id: 4,
                task: 'task 2',
                children: [
                    {
                        id: 5,
                        task: 'task 1',
                        children: []
                    },
                    {
                        id: 6,
                        task: 'task 2',
                        children: []
                    }
                ]
            }
        ]
    }
]

修改后的完整代码 #

class Tasks {
    constructor() {
        this.store = [];
    }

    // 新增parentId参数，可选，默认null表示添加到根层级
    addTask(taskName, parentId = null) {
        const newTask = {
            id: +Date.now(),
            task: taskName,
            children: []
        };

        // 递归查找父任务的辅助函数
        const findParent = (arr) => {
            for (const task of arr) {
                if (task.id === parentId) {
                    return task;
                }
                if (task.children.length > 0) {
                    const found = findParent(task.children);
                    if (found) return found;
                }
            }
            return null;
        };

        if (parentId !== null) {
            const parentTask = findParent(this.store);
            if (parentTask) {
                parentTask.children.push(newTask);
                return;
            }
        }
        // 找不到父任务或parentId为null时，添加到根层级
        this.store.push(newTask);
    }

    deleteTask(id) {
        // 递归删除的辅助函数
        const recursiveDelete = (arr) => {
            // 先过滤当前层级的目标任务
            const filtered = arr.filter(task => task.id !== id);
            // 对每个剩余任务的子数组递归删除
            filtered.forEach(task => {
                task.children = recursiveDelete(task.children);
            });
            return filtered;
        };

        this.store = recursiveDelete(this.store);
    }
}

方法说明 #

1. addTask方法

   • 新增parentId可选参数，当传入该参数时，会递归遍历整个store结构，找到对应ID的父任务，将新任务添加到其children数组中
   • 如果未传入parentId或找不到对应父任务，新任务会被添加到根层级
   • 沿用原有逻辑用Date.now()生成唯一ID（高并发场景可替换为更可靠的ID生成方式）

2. deleteTask方法

   • 实现递归删除逻辑：先过滤当前层级中ID匹配的任务，再对每个剩余任务的children数组递归执行删除操作
   • 确保目标任务无论处于嵌套结构的哪一层，都会被彻底删除

使用示例 #

const todos = new Tasks();

// 添加根任务
todos.addTask('根任务1');
todos.addTask('根任务2');

// 假设根任务2的id为1699999999999（实际为Date.now()生成的值）
todos.addTask('根任务2的子任务1', 1699999999999);
todos.addTask('根任务2的子任务2', 1699999999999);

// 删除根任务2（会同时删除其所有子任务）
todos.deleteTask(1699999999999);

内容的提问来源于stack exchange，提问作者yogis75