JS/TS 中的递归

原创

zayyo

发布于 2023-11-29 21:31:14

1990

发布于 2023-11-29 21:31:14

文章被收录于专栏：zayyo前端zayyo前端

什么是递归？

根据维基百科的定义，递归是这样描述的：

"递归通常用于描述以类似于已显示方式重复对象的过程。例如，当两面镜子相互对着时，产生的图像就是一个很好的例子。"

在 JavaScript/TypeScript 中呢？

在 JavaScript/TypeScript 中，递归是指函数或类型在满足特定条件之前重复调用自身，这可以出现在函数中，即递归函数调用，也可以出现在类型中。

示例

假设我们有一个包含文件（File）和文件夹（Folder）的数组，并且我们需要在控制台中显示每个文件（或文件夹）的名称：

首先，我们需要创建一个适用于我们递归函数的类型：

type Item = {
  id: string
  name: string
  // 如果存在 children，那么这是一个文件夹（Folder），否则是文件（File）。
  children?: Item[]
}

正如您所见，我们使用了递归，因为我们将 children 的类型设置为 Item[]，这意味着创建了一种递归、嵌套的结构。

接下来，我们的函数会是这样的：

const showFileAndFolders = (items: Item[]) => {
  // 遍历所有项目。
  items.forEach(item => {

    // 如果存在 children，则为文件夹（Folder），否则为文件（File）。
    if (item.children) {
      // 是文件夹，显示名称并再次调用函数以处理 `children`。
      console.log('Folder: ', item.name)

      // 递归调用，函数内部再次调用自身。
      showFileAndFolders(item.children)

      return;
    } else {
      // 是文件，显示名称。
      console.log('File: ', item.name)
      return; 
    }
  })
}

其他示例

递归的常见应用也可见于以下情况：

斐波那契数列

const generateFibonacci = (num: number) => {
  if (num <= 1) return n;
  return generateFibonacci(num - 1) + generateFibonacci(num - 2);
}

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第三期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第三期

登录后参与评论

0 条评论

热度