持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

前言

hi，all～，不知大家对前端面试还考算法这个现象怎么看，是否感觉越来越卷了？但是前端真的没有必要考算法？最近，我在项目中就碰到了这样的问题。

情景还原

最近，项目中加了一个三级品类。点击一级品类出现二级品类，点击二级品类如果它有三级品类就展示三级品类。听着很简单的一个功能对吧，实际确实很简单。这个和算法有什么关系呢？看不出来。

莫慌，待老夫再讲一个需求。这个三级品类需要支持第三方链接跳转的。第三方链接会传一个品类id。如果这个品类id是三级品类的，你就得把他上层的一级品类与二级品类同时选中。如果是二级品类，选中该二级品类与他的对应的一级品类。如果是一级品类，则展示一级品类及二级品类的全部按钮。

这个有与算法有什么关系呢？来看看后端反的数据结构吧。真实数据中还有parentId，利用parentId也可以实现，但我这块就不做赘述了。大家感兴趣可以自己实现。

const data = {
    subjects: [
        {
            id: 1,
            subSubjects: [
                {
                    id: 5,
                },
                {
                    id: 6,
                },
            ],
        },
        {
            id: 2,
            subSubjects: [
                {
                    id: 7,
                },
                {
                    id: 8,
                    subSubjects: [
                        {
                            id: 11,
                        },
                        {
                            id: 12
                        }
                    ]
                },
            ],
        },
        {
            id: 3,
            subSubjects: [
                {
                    id: 9,
                },
            ],
        },
        {
            id: 4,
            subSubjects: [
                {
                    id: 10,
                },
            ],
        }
    ]
};

结构出来之后，有没有感到一丝熟悉？没错，是一颗树结构。而根据需求，我们需要在这棵树中拿到该树到某一叶子节点的路径。哎，好像在这块见过他——路径总和。

解题思路就不多做赘述，对树进行一次深度遍历，在遍历途中记录好父节点路径就行了。那我们就应该这样进行处理：

const result = [];

function find(params, num, result) {
    for (let i = 0; i < params.length; i++) {
        result.push(params[i].id);
        const len = result.length;
        if (params[i]?.subSubjects) {
            find(params[i].subSubjects, num, result);
        }
        if (result.length > len || params[i].id === num) {
            return;
        }
        result.pop();
    }
}

find(data.subjects, 11, result);

console.log(result);  // [2, 8, 11]

啊，结果正确，完美收官。bye～

记一次算法在实际项目中的使用。

前言

情景还原