概念
一种函数,自己调用自己,就是递归
语法特点
- 嵌套的层级是未知 或者 是很多层的
- 递归中比出现 if 结构
需求
根据数据,生成类似页面结构
数据
[ { "name": "广东", "children": [ { "name": "广州", "children": [ { "name": "白云" }, { "name": "海珠", "children": [ { "name": "南石头街道" } ] } ] }, { "name": "深圳", "children": [ { "name": "南山" } ] } ] } ]
不使用递归
const list = [{ name: "广东", children: [{ name: "广州", children: [{ name: "白云" }, { name: "海珠", children: [{ name: "南石头街道" }] }] }, { name: "深圳", children: [{ name: "南山" }] }] }]; let section = document.querySelect('section'); let section = document.querySelector('section'); list.forEach((v1) => { section.innerHTML += `<div>${v1.name}</div>`; if (v1.children) { v1.children.forEach((v2) => { section.innerHTML += `<div>${v2.name}</div>`; if (v2.children) { v2.children.forEach(v3 => { section.innerHTML += `<div>${v3.name}</div>`; if (v3.children) { v3.children.forEach(v4 => { section.innerHTML += `<div>${v4.name}</div>`; }) } }) } }) } })
使用递归
<script> // 递归实现步骤 // 1. 定义函数：传入参数 let body = document.body function showChis(date, lever = 0) { // console.log(date); // 2. 不考虑递归：解决一层问题：遍历数组，数组第一层对象中的name取出来实现效果 let str = '---' date.forEach((item) => { // console.log(item); // 第一个就出来了然后在判定 body.innerHTML += `<div>${str.repeat(lever)} ${item.name}</div>`; // console.log(item.children); if (item.children) { // 3. 测试 // 4. 寻找递归点：只要item对象有children属性，与data本身的性质一样 showChis(item.children, lever + 1); // 5. 递归出口：隐式递归出口（函数自然运行结束） } // 显示出口：判定，判定后return }) } let z = new showChis(date); </script>
