相信写过js的小伙伴一定听过递归，但是怎么用递归你知道吗？所谓递归我们可以理解成自己调用自己。那么它的实际应用场景又是什么呢？接下来我会把我项目中用到的递归展示给大家。如有错误，欢迎大家指正。
引子:
请计算n！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>递归</title>
</head>
<body>
<script>
//方法一 for循环
const factorial1 = (n) => {
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i;
}
return result;
};
console.log(factorial1(10)); //3628800
//方法二 递归
const factorial2 = (n) => {
return n === 1 ? 1 : n * factorial2(n - 1);
};
console.log(factorial2(10)); //3628800
</script>
</body>
</html>
总结：通过上面代码我们可以发现，递归就是函数自己调用自己的一个过程。而且这样可以使我们的代码更简洁。
工作实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>递归</title>
</head>
<body>
<script>
//实例1:前端展示类似省市区的树形数据
const data = [
{
type: "P",
name: "重庆市",
children: [
{
type: "C",
name: "重庆市",
children: [{ type: "D", name: "涪陵区" }],
},
],
},
{
type: "P",
name: "西藏",
children: [{ type: "C", name: "昌都地区" }],
},
{ type: "P", name: "陕西省" },
];
const formatRegionList = (regionList) => {
return regionList.map((item) => {
if (!item.children) {
return item.name;
} else {
return item.name + "," + formatRegionList(item.children);
}
});
};
console.log(formatRegionList(data)); //(3) ["重庆市,重庆市,涪陵区", "西藏,昌都地区", "陕西省"]
// 实例2:前端遍历导航栏
const privateRoutes = [
{
pathname: "/admin/dashboard",
component: "xxx", //项目的组建名 比如 Dashboard
title: "仪表盘",
icon: "DashboardOutlined",
isTop: true, //顶级菜单
},
{
pathname: "",
title: "设置",
icon: "SettingOutlined",
isTop: true, //顶级菜单
children: [
{
pathname: "/admin/profile",
component: "xxx",
title: "我的账户",
icon: "UserOutlined",
isTop: false, //二级菜单
},
],
},
];
// 实例3:REACT中返回路由组件
const getComponent = (privateRoutes) => {
return privateRoutes.map((item) => {
if (!item.children) {
return item.pathname;
// <Route
// key={item.pathname}
// path={item.pathname}
// component={item.component}
// />
} else {
return getComponent(item.children);
}
});
};
console.log(getComponent(privateRoutes));
//(2) ["/admin/dashboard", Array(1)]
//0: "/admin/dashboard"
//1: ["/admin/profile"]
</script>
</body>
</html>
面试题实例
题目：递归乘法。 写一个递归函数，不使用 * 运算符， 实现两个正整数的相乘。可以使用加号、减号、位移，但要吝啬一些。
示例1:
输入：A = 1, B = 10
输出：10
示例2:
输入：A = 3, B = 4
输出：12
提示:保证乘法范围不会溢出
题目来源：力扣（LeetCode）
链接：https://leetcode-cn.com/probl...
著作权归领扣网络所有。商业转载请联系官方授权，非商业转载请注明出处。
//我的写法
const multiply = (A, B) => {
if (A === 0) {
return 0;
} else if (A === 1) {
return B;
} else {
return B + multiply(A - 1, B);
}
};
console.log(multiply(0, 10)); //0
console.log(multiply(1, 10)); //10
console.log(multiply(2, 10)); //20
console.log(multiply(3, 4)); //12
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。