js树状结构进入子级后怎么返回

在JS中，如果要从子级返回到父级，可以通过以下几种方式实现：

1使用递归：在进入子级之前，记录下当前层级的信息，然后递归调用自身，直到没有子级为止。当退出子级时，使用保存的信息返回到上一层级。例如：

function traverse(node) {

// 记录当前层级信息

const currentLevelInfo = {

node: node,

parent: nodeparentNode,

siblings: [nodeparentNodechildren]

};

// 递归遍历子级

for (let child of nodechildren) {

traverse(child);

}

// 退出子级，返回上一层级

// do something with currentLevelInfo

}

2使用栈：在进入子级时，将当前节点入栈，然后处理子级。当退出子级时，从栈中取出上一个节点，回到上一层级。例如：

function traverse(node) {

const stack = [node];

while (stacklength > 0) {

const current = stackpop();

// 处理当前节点

//

// 处理子级

for (let child of currentchildren) {

stackpush(child);

}

}

}

无论哪种方式，都需要记录当前层级的信息，并且在退出子级时返回到上一层级。具体选择哪种方式，取决于具体的情况和个人喜好。

数组： 是由相同类型的元素的集合所组成的数据结构，分配一块连续的内存来存储。知道第一个元素的内存地址，加上下标（偏移量）就能找到第2或N个。

数组随机访问的速度快，增加和删除则慢（因为删除index2，后面的3-n都要往前挪一位）

链表： 非连续存储的指向型存储，随机访问的速度慢（需一层层查找），增加和删除则快（不需要挪位）

树形结构、图形结构

树形结构又指向其他树点，就是图形结构

图结构，在webpack和vite中有用到，作用是，能找出是否有文件被重复加载

堆和栈

对象是数组+链表的结构

只要是树形结构，解答基本都可以用递归解决

之前给小伙伴们分享过JS的 setInterval 和 setTimeout 函数，这篇文章要分享给大家的是JS当中的递归函数。

简单来说，递归函数就是自己调用自己，然后在一定条件下会停止或者跳转递归。

这个例子简单的利用递归函数实现了一个小需求，希望这篇文章对初学前端的小伙伴有帮助。

// using nodejs

let path = require('path');

let fs = require('fs');

const tree = ($path)=>fsreaddir($path,(err,files)=>{

filesforEach(f => {

let file_path = pathjoin($path,f);

let state = fslstatSync(file_path);

if(stateisDirectory()){

tree(file_path);

}else if(stateisFile()){

consolelog(file_path);

}

});

});

tree(pathjoin(__dirname,'/'));

要求：

搭建一个管理学生信息系统，具备查询、添加、修改、删除功能等。

核心思路：先定义菜单框架，再挨着定义每种方法，最后在菜单里面调用每种方法

注意：

1用户输入要用parseInt强转 ,如果不用parseInt,下面switch循环的参数必须加单引号

2不确定用户要循环多少次，最好使用switch循环，结构比较清晰

3case 0退出系统下面必须使用return而不是break，return结束整个循环

4switch循环完一次后还得d出本界面方便用户继续 *** 作，所以得使用递归方法再次调用自身，直至用户输入0退出系统结束循环，所以switch循环下面要加thismenu()再次调用自身

注意：此处拼接对象时不用考虑数组里面三个对象如何转换，this调出学生对象，再使用forEach遍历拼接即可。

switch (num) {

                    case 1:

                        thisshow(); 

                        break;

                    case 2:

                        thisadd();

                        break;

                    case 3:

                        thisupdate();

                        break;

                    case 4:

                        thisdel();

                        break;

                    case 0:

                        alert('成功退出系统！');

                        return 

                }

function somaCrawl (a){

  if (a == (somalength - 1)){

    return soma[a]styleleft;

  }else {

    soma[a]styleleft = parseInt(somaCrawl(a + 1)) - 20 + 'px';

    return soma[a]styleleft;

  }

}

开始切入正题之前，有必要告知大家一下，这篇文章可能有一些深度，初学者可能理解会有些吃力。我会尽量把复杂问题简单化，争取让每个阅读的童鞋们都能看得懂。希望你对element-ui，vue-router，KeepAlive组件有一点了解。现在，我们开始吧。

熟悉element-ui的童鞋们都知道，ElMenuItem和ElSubMenu都需要一个index属性，该属性必须是唯一的。现在，我们想把路由配置直接应用于ElMenu，该如何确保index的唯一性呢？我们需要有一个生成唯一index的函数。如下是genKey函数的定义，是不是很简单？

现在，我们创建addRouteMetaKey函数，该函数对路由树进行递归遍历，为每一个路由配置的meta属性动态添加key字段。这个函数很简单，属于最基础的递归使用例子，我就不做太多解释了。

提示 ：数组的forEach方法不是纯函数，因为它有副作用，所以forEach方法不能称之为函数式编程工具。

通过addRouteMetaKey函数，我们可以把路由的metakey作为index的值了。

现在，我们想实现另一个功能，就是 基于标签页的路由组件缓存控制 。使用过Vuejs KeepAlive组件的童鞋们，应该多多少少都遇到一些坑吧？在我们的项目中，有一个顶部标签页导航，每个tab项对应一个url，以每个url对应路由的title作为tab项标题，当切换tab的时候加载缓存中的url对应的路由组件，关闭tab项，下次打开该路由url，重新挂载对应的路由组件，而不是从缓存中加载。

当路由层级不确定的时候，KeepAlive会变的难以手动控制。所以，我 剑走偏锋，尝试了一种简单的解决方案 ，实践证明： 这是非常有效的 。我的方案就是把无限层级的路由树转化为一维数组。通过为meta添加必要的字段，进行页面结构个性化定制。

我们需要把每层路由配置的path转化为全路径，所以需要一个函数：getRouteFullPath，该函数定义如下：

getRouteFullPath函数中使用到的joinPath函数用于将多个路径字符串拼接为1个完整的路径，定义如下：

现在，我们把路由树转化为一维数组。我们定义toFlatRoutes函数，该函数使用了数组的reduce方法对路由树进行聚合递归，将路由配置中的path属性的值替换为全路径，还顺便给路由配置添加了name属性，返回一个新的一维路由配置数组。 这是函数式编程和递归结合的一个例子。

以上，我们解决了KeepAlive的缓存控制问题；现在，我们又有了一个新的用户体验上的需求，就是我们想根据url对应的路由，自动展开该路由metakey所属的侧边菜单；我们通过查阅element-ui文档得知，ElMenu有一个open方法，接收index作为参数，展开index对应的菜单。

现在的问题是，我们的路由对应的index是ElMenuItem的，而路由树已经被我们转化为了一维数组，通过路由的matched字段是得不到我们想要的菜单index的。所以， 我们需要遍历原始路由树 。

如下代码，我们定义getMenuKey函数，该函数接收的参数为route对象。如果路由存在，我们进行查找。首先进行简单查找，如果找到一个菜单menu，则返回该菜单的metakey；如果简单查找无果，则对路由树进行递归查找； 这是函数式编程和递归结合的另一个例子。

现在，我们大功告成了；以上就是本节的知识点，童鞋们理解了吗？只要我们熟悉递归的使用，其实 *** 作树很简单。如果大家还有不懂的，可以评论区问我。感谢阅读！

以上就是关于js树状结构进入子级后怎么返回全部的内容，包括:js树状结构进入子级后怎么返回、【JS算法】JS数据结构、前端-JS递归函数等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！