合合信息&龙湖数科一面

最新推荐文章于 2024-11-06 00:13:23 发布

Redstone Monstrosity

最新推荐文章于 2024-11-06 00:13:23 发布

阅读量869

点赞数 12

文章标签：面试前端

本文链接：https://blog.csdn.net/qq_43858368/article/details/142588620

版权

1. 请尽可能详细地说明，Git中merge和rebase的区别和应用场景？Git中pull和fetch的区别和应用场景？Git中revert和reset的区别和应用场景？你的回答中不要写出示例代码。

Git中merge和rebase的区别和应用场景

merge

区别：git merge 命令用于将两个或多个开发历史合并在一起，创建一个新的合并提交（merge commit）。这个合并提交有两个父提交，分别指向被合并的两个分支的最后提交。
应用场景：当你想要保留完整的分支历史和每个分支的开发脉络时，使用 merge 是合适的。这在多人协作的项目中很常见，因为它清晰地展示了哪些更改是在哪个分支上进行的，以及何时合并到主分支。

rebase

区别：git rebase 命令将一个分支上的提交重新应用到另一个分支的基础之上。它会改变这些提交的历史，因为它们的父提交已经改变了。
应用场景：当你想要保持一个线性的历史记录，或者在发布前整理提交历史时，使用 rebase 是合适的。它可以使提交历史更加清晰，特别是在本地分支上工作时，可以将本地的多个小提交合并成一个更有意义的提交，然后一次性推送到远程仓库。

Git中pull和fetch的区别和应用场景

fetch

区别：git fetch 命令用于从远程仓库获取最新的数据，但是不会自动合并到当前分支。它只是将远程仓库的数据下载到本地，并更新远程跟踪分支。
应用场景：当你想要查看远程仓库的最新状态，或者在不影响本地工作的情况下比较本地分支和远程分支的差异时，使用 fetch 是合适的。

pull

区别：git pull 命令实际上是 git fetch 和 git merge 的组合。它会从远程仓库获取最新的数据，并自动尝试合并到当前分支。
应用场景：当你想要更新当前分支，并且准备好立即合并远程仓库的更改时，使用 pull 是合适的。这是日常工作中常用的命令，因为它可以快速地将远程的更改集成到本地工作中。

Git中revert和reset的区别和应用场景

revert

区别：git revert 命令创建一个新的提交，这个提交的内容是撤销指定提交的更改。它不会改变已有的提交历史，而是在历史中添加一个新的提交。
应用场景：当你想要撤销某个提交的更改，但又不想改变该提交之后的历史时，使用 revert 是合适的。这在公共仓库中很常见，因为它不会重写历史，从而避免了潜在的合作问题。

reset

区别：git reset 命令用于将当前分支的 HEAD 指针移动到指定的提交，并可以选择性地更新工作目录和暂存区。它可以有三种模式：soft、mixed 和 hard。
- --soft：只移动 HEAD 指针，保留工作目录和暂存区的更改。
- --mixed（默认）：移动 HEAD 指针并重置暂存区，但保留工作目录的更改。
- --hard：移动 HEAD 指针，重置暂存区和工作目录，丢弃所有未提交的更改。
应用场景：当你想要撤销最近的提交，或者回退到某个特定的提交，并且愿意丢失之后的所有更改时，使用 reset 是合适的。这在本地开发中很常见，因为它可以让你重新开始或者修正错误。

总的来说，选择 merge 还是 rebase 取决于你是否想要保留分支的历史；fetch 还是 pull 取决于你是否想要立即合并远程更改；revert 还是 reset 取决于你是否愿意改变历史以及是否需要保留未提交的更改。

补充：请尽可能详细地说明，git stash是什么和应用场景？你的回答中不要写出示例代码。

git stash 是 Git 版本控制系统中的一个命令，用于临时保存当前工作目录中的更改，以便用户可以切换到其他分支或任务，而不必担心未提交的更改会丢失或干扰其他工作。这个命令非常有用，特别是在多任务处理或分支切换时。

Git Stash 的基本概念

保存当前状态：git stash 会将当前工作目录中的所有已跟踪文件的更改（包括已修改、新增和删除的文件）以及暂存区的状态保存起来。
恢复状态：之后，用户可以使用 git stash apply 或 git stash pop 命令来恢复之前保存的状态。apply 会保留 stash 列表中的条目，而 pop 会在恢复状态后将其从列表中移除。
查看 stash 列表：用户可以使用 git stash list 命令查看所有保存的 stash 条目。
删除 stash：不再需要的 stash 条目可以使用 git stash drop 命令删除。

应用场景

多任务处理：
当开发者同时处理多个任务或功能时，可能需要在不同任务之间切换。使用 git stash 可以保存当前任务的进度，然后切换到另一个任务，而不会丢失之前的工作。
分支切换：
在开发过程中，经常需要在不同的分支之间切换。如果当前分支有未提交的更改，直接切换分支可能会导致工作丢失或冲突。git stash 可以用来保存这些更改，允许用户安全地切换分支。
解决冲突：
当合并两个分支时，可能会出现冲突。在这种情况下，开发者可以使用 git stash 保存当前的工作状态，然后解决冲突，最后再恢复之前的工作。
临时保存更改：
如果开发者需要暂时离开工作，或者想要进行一些不相关的操作（如运行测试、构建项目等），可以使用 git stash 来保存当前的更改。
代码审查前的准备：
在提交代码进行审查之前，开发者可能需要清理工作目录，以便进行干净的提交。git stash 可以用来保存所有未提交的更改，然后进行必要的清理工作。

注意事项

git stash 默认不会保存未跟踪文件（如新创建但尚未添加到 Git 的文件）。如果需要保存这些文件，可以使用 git stash save --include-untracked 或 git stash save --all 命令。
如果 stash 中保存的更改与当前工作目录中的更改有冲突，恢复 stash 时可能会出现问题。在这种情况下，开发者需要手动解决冲突。

总之，git stash 是一个强大的工具，可以帮助开发者在多个任务和分支之间高效地切换和管理代码更改。

2. 智力题：一只青蛙白天爬3米晚上退下去2米,用了8天爬到井口.问爬一半用几天。

3天

3. 请尽可能详细地说明，TCP三次握手的过程？如果只有2次握手，可能会导致什么问题？你的回答中不要写出示例代码。

TCP三次握手的过程

TCP（传输控制协议）的三次握手是一种在客户端和服务器之间建立可靠连接的过程。以下是详细的步骤：

第一次握手（SYN）

客户端发送SYN报文：
- 客户端选择一个初始序列号（ISN），并向服务器发送一个SYN（同步序列编号）报文段。
- 这个报文段中包含客户端的初始序列号（例如，ISN = x）。
服务器接收SYN报文：
- 服务器接收到SYN报文后，知道客户端请求建立连接。

第二次握手（SYN + ACK）

服务器发送SYN + ACK报文：
- 服务器也选择一个初始序列号（例如，ISN = y），并向客户端发送一个SYN报文段。
- 同时，服务器还会发送一个ACK（确认）报文段，确认客户端的初始序列号（x + 1）。
- 这个组合报文段中包含服务器的初始序列号（y）和确认号（x + 1）。
客户端接收SYN + ACK报文：
- 客户端接收到SYN + ACK报文后，知道服务器已准备好建立连接，并且确认了客户端的初始序列号。

第三次握手（ACK）

客户端发送ACK报文：
- 客户端向服务器发送一个ACK报文段，确认服务器的初始序列号（y + 1）。
- 这个报文段中包含确认号（y + 1）。
服务器接收ACK报文：
- 服务器接收到ACK报文后，知道客户端已确认服务器的初始序列号，连接建立成功。

如果只有两次握手可能导致的问题

如果TCP连接只进行两次握手而不是三次握手，可能会导致以下问题：

1. 半开连接（Half-Open Connection）

问题描述：在两次握手的情况下，服务器在发送SYN + ACK报文后，即使没有收到客户端的ACK确认，也会认为连接已经建立。如果客户端因为网络问题或其他原因没有发送ACK报文，服务器会一直等待这个ACK，导致资源被无效占用。
后果：这种情况下，服务器可能会为不存在的客户端保持大量的连接状态信息，浪费系统资源，并可能导致服务器无法处理新的合法连接请求。

2. 重复连接请求

问题描述：由于客户端没有发送最后的ACK确认，在网络状况不佳或延迟较高的情况下，客户端可能会重新发送SYN报文。服务器收到重复的SYN报文后，会再次发送SYN + ACK报文，导致多个重复的连接请求。
后果：服务器可能会为同一个客户端建立多个无效的连接状态，进一步加剧资源浪费，并可能导致服务不可用。

3. 安全性问题

问题描述：两次握手无法有效防止某些类型的攻击，如SYN洪泛攻击（SYN Flood Attack）。攻击者可以发送大量的SYN报文，但不完成后续的握手过程，使服务器陷入处理大量半开连接的状态。
后果：服务器资源被大量消耗，正常的用户连接请求无法得到及时处理，严重影响服务的可用性和稳定性。

总结

三次握手的设计不仅是为了确保双方都能确认对方的接收和发送能力，还能有效避免上述的半开连接、重复连接请求和安全性问题。通过三次握手，TCP协议能够在建立连接时提供更高的可靠性和安全性。

4. 请尽可能详细地说明，TypeScript中interface和type的区别？你的回答中不要写出示例代码。

在TypeScript中，interface和type都是用来定义复杂类型的工具，但它们之间存在一些关键的区别：

1. 语法和扩展性

Interface:
- 主要用于定义对象的形状，即对象应该具有哪些属性以及这些属性的类型。
- 可以通过声明合并（declaration merging）来扩展接口。这意味着如果两个或多个接口具有相同的名称，它们会自动合并为一个接口，且所有成员都会被包含在内。
- 接口支持声明类的结构，可以被类实现（implements）。
Type:
- 更加灵活，不仅可以定义对象的形状，还可以定义联合类型、交叉类型、元组等更复杂的类型。
- 类型别名不支持声明合并，如果有重复的类型别名，TypeScript会报错。
- 类型别名不能被类实现，但可以被用作泛型参数。

2. 表达能力

Interface:
- 主要关注于描述对象的形状和结构。
- 在描述对象时，接口更加直观和易于理解。
Type:
- 具有更强的表达能力，可以定义任何类型的别名，包括基本类型、对象类型、联合类型、交叉类型等。
- 可以使用条件类型、映射类型等高级类型特性来创建更复杂的类型。

3. 使用场景

Interface:
- 当需要定义一个类的结构或者多个对象共享相同的形状时，接口是一个很好的选择。
- 接口更适合于面向对象的设计，因为它支持类的实现和继承。
Type:
- 当需要创建一个类型的别名，且这个类型不是简单的对象形状时，类型别名更为合适。
- 类型别名在处理复杂的类型逻辑和类型转换时非常有用。

4. 兼容性

Interface:
- 在JavaScript中没有直接的对应概念，但是可以通过编译生成的代码来模拟接口的行为。
- 接口在编译后的JavaScript代码中会被移除，不会影响运行时的性能。
Type:
- 同样，类型别名在JavaScript中也没有直接的对应概念，它们也是编译时的构造。
- 类型别名在编译后同样会被移除，不会对运行时的代码产生影响。

总的来说，interface和type在TypeScript中都是用来定义类型的强大工具，但它们在语法、扩展性、表达能力和使用场景上有所不同。选择使用哪一个取决于具体的需求和偏好。在实际开发中，开发者通常会根据需要灵活地使用这两种工具。

4. 请尽可能详细地说明，display: none;visibility: hidden;opacity: 0;这3者的区别和应用场景？你的回答中不要写出示例代码。

display: none;, visibility: hidden;, 和 opacity: 0; 是CSS中常用的三种方法来控制元素的可见性，但它们在实现方式和应用场景上有着显著的区别。

display: none;

作用：这个属性会从布局中完全移除元素，使其既不可见也不占据任何空间。
影响：页面的布局会重新计算，不考虑该元素的存在。
应用场景：
- 当你想要隐藏某个元素，并且不希望它在页面上占用空间时。
- 在响应式设计中，根据不同的屏幕尺寸隐藏某些元素。
- 在动态内容加载时，可以先隐藏元素，待内容加载完成后再显示。

visibility: hidden;

作用：这个属性会使元素不可见，但它仍然占据着页面上的空间，并且参与布局的计算。
影响：元素的布局位置保持不变，只是视觉上不可见。
应用场景：
- 当你需要隐藏一个元素，但希望保留它在页面上的位置时。
- 在动画效果中，可能需要先隐藏元素，然后通过改变其他属性（如位置或大小）来实现动画效果。
- 在交互设计中，可能需要隐藏某些辅助性的元素，但又不希望它们影响页面的布局。

opacity: 0;

作用：这个属性通过设置元素的透明度为0来使其不可见，但它仍然占据空间并参与布局。
影响：元素在视觉上完全透明，但其布局位置和其他属性（如点击事件）仍然有效。
应用场景：
- 当你需要实现淡入淡出的动画效果时，可以通过改变opacity值来实现。
- 在需要隐藏元素的同时，还希望保留其可交互性（例如，用户可以点击透明元素触发事件）。
- 在设计中需要元素“隐形”但仍需响应用户操作的情况。

总结来说，选择使用哪种方法取决于你是否需要元素在布局中保留空间，是否需要保持元素的交互性，以及是否需要动画效果。display: none; 是最彻底的隐藏方式，适用于不需要保留空间和交互性的情况；visibility: hidden; 适用于需要保留空间但不需要交互性的情况；而 opacity: 0; 则适用于需要动画效果或保留交互性的情况。

5. 请尽可能详细地说明，flex布局的优势和应用场景？你的回答中不要写出示例代码。

Flex布局（Flexible Box Layout Module）是一种用于在页面上布置和对齐元素的CSS布局模型。它提供了一种更加灵活的方式来控制容器内项目的排列和对齐方式。Flex布局的优势和应用场景如下：

Flex布局的优势

灵活性：
- Flex布局允许开发者轻松地改变元素的顺序、对齐方式和大小，以适应不同的屏幕尺寸和设备。
- 它能够自动调整元素间的空间分配，使得布局在不同分辨率和设备上都能保持一致性和美观性。
简化复杂布局：
- 对于需要创建多列或多行布局的情况，Flex布局提供了一种简单的方法来实现复杂的布局设计。
- 它可以轻松处理不同大小和未知数量的子元素，无需使用浮动、定位或其他复杂的CSS技巧。
响应式设计：
- Flex布局非常适合创建响应式网站和应用，因为它可以根据可用空间自动调整元素的排列。
- 结合媒体查询，可以实现更加精细的控制，以适应不同的屏幕尺寸和方向。
易于维护：
- 使用Flex布局编写的代码通常更加简洁和直观，易于理解和维护。
- 当需要修改布局时，只需更改少量的CSS属性，而不需要重构整个布局结构。
跨浏览器兼容性：
- Flex布局得到了现代浏览器的广泛支持，包括Chrome、Firefox、Safari和Edge等。
- 虽然在一些旧版本的浏览器中可能需要前缀或不支持，但总体上兼容性问题较少。

应用场景

导航菜单：
- Flex布局非常适合创建水平或垂直的导航菜单，它可以自动调整菜单项之间的间距和对齐方式。
卡片布局：
- 在创建卡片式设计时，Flex布局可以帮助你轻松地对齐卡片，并在不同屏幕尺寸下保持一致的布局。
表单布局：
- 对于复杂的表单，Flex布局可以帮助你将表单控件分组并对齐，使得表单看起来更加整洁和有序。
网格系统：
- 虽然Flex布局不是专门为网格系统设计的，但它可以用来创建灵活的行和列布局，适用于各种网格系统。
响应式图片库：
- 使用Flex布局可以轻松地创建一个响应式的图片库，其中图片可以根据容器大小自动调整大小和排列。
社交媒体布局：
- 社交媒体网站常用的时间线布局或动态流布局可以通过Flex布局来实现，以适应不同内容的长度和类型。
工具提示和弹出框：
- Flex布局可以帮助你精确地对齐工具提示和弹出框的内容，使其在视觉上更加吸引人。

总之，Flex布局因其强大的灵活性和对复杂布局的简化能力，在现代网页设计中得到了广泛应用。它不仅能够提高开发效率，还能提升用户体验，特别是在需要适应多种设备和屏幕尺寸的场景中。

5. 请尽可能详细地说明，html的meta标签中的viewpoint属性的取值和作用？你的回答中不要写出示例代码。

HTML中的<meta>标签用于提供有关页面的元信息（metadata），这些信息不会显示在页面上，但对于浏览器、搜索引擎和其他网络服务来说是重要的。viewport属性是<meta>标签中的一个重要属性，它用于控制网页在移动设备上的显示方式。viewport属性通常与content属性一起使用，以定义视口的特定设置。

viewport属性的取值

viewport属性的值是一个包含多个指令的字符串，每个指令通过分号（;）分隔。以下是一些常用的指令及其取值：

width：
- 取值为一个具体的数值（如width=320）或device-width。
- device-width表示设备的宽度，通常用于使页面宽度与设备屏幕宽度相匹配。
height：
- 取值为一个具体的数值（如height=480）或device-height。
- device-height表示设备的高度，但这个属性在移动设备上使用较少，因为页面高度通常由内容自动决定。
initial-scale：
- 取值为一个数值，表示页面初始加载时的缩放比例。
- 例如，initial-scale=1.0表示页面以100%的比例显示。
minimum-scale 和 maximum-scale：
- 取值为一个数值，分别表示用户可以缩放的最小和最大比例。
- 例如，minimum-scale=0.5和maximum-scale=2.0允许用户在0.5倍到2倍之间缩放页面。
user-scalable：
- 取值为yes或no，表示用户是否可以手动缩放页面。
- user-scalable=no会禁用用户的缩放功能，这在某些情况下可以提高性能和安全性，但也可能影响用户体验。

viewport属性的作用

viewport属性的主要作用是优化网页在移动设备上的显示效果，具体包括以下几个方面：

控制页面尺寸：
- 通过设置width和height，可以控制页面在设备上的显示尺寸，使其适应不同的屏幕大小。
调整缩放比例：
- initial-scale、minimum-scale和maximum-scale等属性允许开发者精确控制页面的初始缩放比例和用户的缩放范围。
禁用或启用用户缩放：
- user-scalable属性可以用来禁止用户手动缩放页面，这在某些高性能要求的场景中很有用，但也可能导致可访问性问题。
改善用户体验：
- 合理设置viewport属性可以帮助网页在不同设备上保持一致的布局和视觉效果，从而提升用户体验。

总之，viewport属性是响应式网页设计中的一个关键元素，它使得开发者能够针对不同尺寸和分辨率的设备优化网页的显示效果。通过合理配置这些属性，可以确保网页在各种移动设备上都能提供良好的浏览体验。

6. 请尽可能详细地说明你的思路，如何用2个栈实现1个队列？你的回答中不要写出示例代码。

要用两个栈实现一个队列，我们需要理解队列和栈的基本特性：

队列（Queue）是一种先进先出（FIFO）的数据结构，元素在队尾添加，在队首移除。
栈（Stack）是一种后进先出（LIFO）的数据结构，元素只能在栈顶添加或移除。

为了使用两个栈实现一个队列，我们可以将一个栈用作输入栈（用于push操作），另一个栈用作输出栈（用于pop操作）。以下是实现思路：

思路

初始化两个栈：
- 栈A（输入栈）：用于存放新添加的元素。
- 栈B（输出栈）：用于存放准备移除的元素。
入队操作（push）：
- 将新元素直接压入栈A。
出队操作（pop）：
- 如果栈B不为空，则直接从栈B顶部弹出元素，这是队列的队首元素。
- 如果栈B为空，则需要将栈A中的所有元素依次弹出并压入栈B。这样栈A底部的元素（即最先进入队列的元素）会移动到栈B的顶部，然后可以从栈B顶部弹出该元素。
查看队首元素（peek）：
- 类似于出队操作，如果栈B不为空，则查看栈B顶部的元素。
- 如果栈B为空，则将栈A中的所有元素转移到栈B，然后查看栈B顶部的元素。
判断队列是否为空：
- 如果栈A和栈B都为空，则队列为空。

工作原理

当执行入队操作时，新元素总是被添加到栈A中，保持了元素的添加顺序。
出队操作需要确保最先进入队列的元素能够被最先移除。这通过将栈A中的元素逆序转移到栈B来实现，因为栈的后进先出特性会使得原本在栈A底部的元素移动到栈B的顶部。

注意事项

在执行出队操作时，如果栈B为空，则必须将栈A中的所有元素转移到栈B，这个过程的时间复杂度是O(n)，其中n是栈A中元素的数量。
在频繁进行出队操作的场景下，这种方法的效率可能不如直接使用队列数据结构。

通过上述思路，我们可以利用两个栈来模拟队列的行为，实现先进先出的特性。这种方法在实际应用中尤其适用于当队列的大小固定或者入队操作远多于出队操作的场景。

7. 请尽可能详细地说明你的思路，如何用2个栈实现1个队列？你的回答中不要写出示例代码。

要用两个栈实现一个队列，我们需要理解队列和栈的基本特性：

队列（Queue）是一种先进先出（FIFO）的数据结构，元素在队尾添加，在队首移除。
栈（Stack）是一种后进先出（LIFO）的数据结构，元素只能在栈顶添加或移除。

为了使用两个栈实现一个队列，我们可以将一个栈用作输入栈（用于push操作），另一个栈用作输出栈（用于pop操作）。以下是实现思路：

思路

初始化两个栈：
- 栈A（输入栈）：用于存放新添加的元素。
- 栈B（输出栈）：用于存放准备移除的元素。
入队操作（push）：
- 将新元素直接压入栈A。
出队操作（pop）：
- 如果栈B不为空，则直接从栈B顶部弹出元素，这是队列的队首元素。
- 如果栈B为空，则需要将栈A中的所有元素依次弹出并压入栈B。这样栈A底部的元素（即最先进入队列的元素）会移动到栈B的顶部，然后可以从栈B顶部弹出该元素。
查看队首元素（peek）：
- 类似于出队操作，如果栈B不为空，则查看栈B顶部的元素。
- 如果栈B为空，则将栈A中的所有元素转移到栈B，然后查看栈B顶部的元素。
判断队列是否为空：
- 如果栈A和栈B都为空，则队列为空。

工作原理

当执行入队操作时，新元素总是被添加到栈A中，保持了元素的添加顺序。
出队操作需要确保最先进入队列的元素能够被最先移除。这通过将栈A中的元素逆序转移到栈B来实现，因为栈的后进先出特性会使得原本在栈A底部的元素移动到栈B的顶部。

注意事项

在执行出队操作时，如果栈B为空，则必须将栈A中的所有元素转移到栈B，这个过程的时间复杂度是O(n)，其中n是栈A中元素的数量。
在频繁进行出队操作的场景下，这种方法的效率可能不如直接使用队列数据结构。

8. 算法：ES6类继承

这段代码中存在几个问题，我们将逐一解决它们：

在myChild类的构造函数中，this.a;这一行是无效的，因为它没有做任何事情。如果你想访问或修改a属性，你需要使用赋值操作。
在myChild类的func方法中，this.func();这行代码会导致无限递归，因为它调用了自身。如果你想调用父类的func方法，你应该使用super.func();。
myParent类中的a属性应该使用this.a来初始化，以确保它成为实例的一部分。
myChild类的func方法应该调用父类的func方法，而不是自身。

下面是修正后的代码：

class myParent {
  a = 1; // 初始化实例属性a
  constructor() {
    // 构造函数可以为空，因为我们已经使用属性初始化器设置了a的值
  }
  func() {
    console.log(this.a); // 打印实例属性a的值
  }
}

class myChild extends myParent {
  constructor() {
    super(); // 调用父类的构造函数
    // 如果你想修改a的值，可以在这里赋值，例如：this.a = 2;
  }
  func(): void {
    super.func(); // 调用父类的func方法
  }
}

const child = new myChild();
child.func(); // 输出应该是1，因为myChild没有修改a的值

现在，这段代码应该可以正确地实现类的继承，并且child.func()将输出1，因为myChild类没有修改从myParent继承来的a属性的值。如果你想在子类中修改a的值，你可以在子类的构造函数中进行赋值操作。

9. 算法：斐波那契数列

代码问题分析

性能问题：
- fab 函数使用了递归的方式计算斐波那契数列，这种方式在计算较大的 n 时会非常低效。因为每次递归调用都会重新计算很多子问题，导致大量的重复计算。
类型注解问题：
- 虽然代码中使用了 TypeScript 的类型注解，但 fab 函数的返回类型是 number，这在逻辑上是正确的，但在实际应用中，如果 n 是 0 或负数，函数的行为未定义，可能会返回 undefined 或导致栈溢出。
输入验证问题：
- outPutFabArr 函数没有对输入 n 进行任何验证。如果传入负数或非数字，可能会导致意外的行为。

改进建议

优化斐波那契数列计算：
- 使用动态规划或记忆化递归来减少重复计算。
增加输入验证：
- 确保输入 n 是一个非负整数。
处理边界情况：
- 明确处理 n 为 0 的情况。

改进后的代码

const fab = (n: number, memo: { [key: number]: number } = {}): number => {
  if (n in memo) return memo[n];
  if (n === 0) return 0;
  if (n === 1 || n === 2) return 1;
  memo[n] = fab(n - 1, memo) + fab(n - 2, memo);
  return memo[n];
};

const outPutFabArr = (n: number): number[] => {
  if (typeof n !== 'number' || n < 0 || !Number.isInteger(n)) {
    throw new Error('Input must be a non-negative integer');
  }
  const arr: number[] = [];
  for (let i = 0; i <= n; i++) {
    arr.push(fab(i));
  }
  return arr;
};

console.log(outPutFabArr(10)); // 输出: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55]

详细说明

记忆化递归：
- 在 fab 函数中引入一个 memo 对象来存储已经计算过的斐波那契数，避免重复计算。
- if (n in memo) return memo[n]; 这一行检查是否已经计算过该值，如果是则直接返回。
处理 n 为 0 的情况：
- 添加 if (n === 0) return 0; 来明确处理 n 为 0 的情况。
输入验证：
- 在 outPutFabArr 函数中增加对 n 的类型和值的验证，确保它是一个非负整数。
- 如果输入不合法，抛出一个错误。