2024年Web前端最全TypeScript实战：下棋游戏，2024年最新前端面试精讲

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法

  

枚举是组织有关联数据的一种方式（比如，x 和 o 就是有关联的数据）。

使用场景：当变量的值，只能是几个固定值中的一个，应该使用枚举来实现。

注意：JS 中没有枚举，这是 TS 为了弥补 JS 自身不足而新增的。

• 创建枚举的语法：

enum 枚举名称 { 成员1, 成员2, … }

示例：

enum Gender { Female, Male }

enum Player { X, O }

约定枚举名称、成员名称以大写字母开头。

多个成员之间使用逗号（,）分隔。

注意：枚举中的成员，根据功能自己指定！

注意：枚举中的成员不是键值对！

• 使用枚举：

枚举是一种类型，因此，可以其作为变量的类型注解。

enum Gender { Female, Male }

let userGender: Gender

访问枚举（Gender）中的成员，作为变量（userGender）的值：

userGender = Gender.Female

userGender = Gender.Male

注意：枚举成员是只读的，也就是说枚举中的成员可以访问，但是不能赋值！

Gender.Female = ‘男’ // 错误！

• 枚举总结

枚举是组织有关联数据的一种方式。

使用场景：当变量的值，只能是几个固定值中的一个，应该使用枚举来实现。

enum Gender { Female, Male }

let userGender: Gender = Gender.Male

注意点：枚举中的成员是只读的，因此，只能访问不能赋值！

问题：将枚举成员赋值给变量，变量的值是什么呢？

enum Gender { Female, Male }

let userGender: Gender = Gender.Female

console.log(userGender) // ?

枚举成员是有值的，默认为：从 0 开始自增的数值。

我们把，枚举成员的值为数字的枚举，称为：数字枚举。

当然，也可以给枚举中的成员初始化值。

enum Gender { Female = 1, Male } // Female => 1 Male => 2

enum Gender { Female = 1, Male = 100 } // Female => 1 Male => 100

字符串枚举：枚举成员的值是字符串。

enum Gender { Female = ‘女’, Male = ‘男’ }

注意：字符串枚举没有自增长行为，因此，每个成员必须有初始值。

console.log(Gender.Female) // 女

console.log(Gender.Male) // 男

• 两种常用的枚举总结：

enum Gender { Female, Male }

enum Gender { Female = 100, Male } // 初始化成员的值

特点：成员的值是从 0 开始自增的数值。

enum Gender { Female = ‘女’, Male = ‘男’ }

特点：没有自增行为，需要为每一个成员赋值！

枚举是一组有名字的常量（只读）的集合。

2.4 使用枚举修改当前玩家

---

效果：使用枚举代替原来的字符串类名（x 和 o）。

1. 创建字符串枚举（Player），提供 X 和 O 两个成员。

2. 将变量（currentPlayer）的类型设置为 Player 枚举类型，默认值为 Player.X。

3. 将成员 X 的值设置为：‘x’（类名）；将成员 O 的值设置为：‘o’（类名）。

4. 将所有用到 x 和 o 的地方全部使用枚举成员代替。

3. 游戏判赢

===================================================================

3.1 判赢的思路

---

思路：判断棋盘中，横、竖、斜（对角线）是否存在三个相同的 x 或 o。

只要有一个满足条件，就说明 x 或 o 获胜了。

如果所有单元格都有内容，但没有获胜的情况，就说明是平局。

如何判断？

单元格元素列表（cells）中，每个单元格元素都有自己的索引，如下图所示：

使用单元格索引，来表示每种获胜情况（使用数组来存储，比如：[0, 1, 2]）。

然后，使用一个“大”数组（外层），来存储这 8 种情况（因为每次判赢都要判断所有情况）。

判断过程：遍历这个大数组，分别判断每一种情况对应的 3 个单元格元素，是否都是相同的 x 或 o 类名。

只要有一种情况满足，就说明获胜了。

分析判赢数组

数组的基本结构：

[ 元素1, 元素2, … ]

判赢数组：每个元素又是数组（二维数组，概念知道即可）。

let winsArr = [

[0, 1, 2], [3, 4, 5], …

]

只要是数组用法都一样，比如：

// 访问数组元素：

winsArr[0] // [0, 1, 2]

winsArr[0][1] // 1

单元格元素列表说明

单元格元素列表（cells），实际上是一个伪数组。

伪数组的特征：具有长度（length）属性和索引。

伪数组的操作：1 通过索引获取元素 2 使用 for 循环遍历（推荐使用 forEach 方法） 。

1. 通过索引获取元素

console.log(cells[0])

console.log(cells[1])

2. 使用 for 循环遍历

for (let i = 0; i < cells.length; i++) {

console.log(cells[i])

}

3.2 封装判赢函数

---

封装函数，主要考虑：参数和返回值。

• 该函数的返回值是什么？ 布尔值（判断是否获胜）

• 该函数的有参数吗？是什么？ 当前玩家

说明：判赢，就是在判断当前玩家下棋后是否获胜（玩家没下棋，不可能获胜，不需要判断）。

// 声明函数：

function checkWin(player: Player): boolean {}

// 调用函数：

let isWin = checkWin(currentPlayer)

技巧：如果想不到返回值和参数，可以反推，也就是从如何调用函数的角度来分析。

问题：什么时候判赢？ 玩家点击单元格下棋后

1. 声明函数（checkWin），指定参数（player），类型注解为：Player 枚举。

2. 指定返回值：现在函数中写死返回 true 或 false。

3. 在给单元格添加类名后（下棋后），调用函数 checkWin，拿到函数返回值。

4. 判断函数返回值是否为 true，如果是，说明当前玩家获胜了。

3.3 实现判赢函数

算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1. 声明函数（checkWin），指定参数（player），类型注解为：Player 枚举。

2. 指定返回值：现在函数中写死返回 true 或 false。

3. 在给单元格添加类名后（下棋后），调用函数 checkWin，拿到函数返回值。

4. 判断函数返回值是否为 true，如果是，说明当前玩家获胜了。

3.3 实现判赢函数

算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   [外链图片转存中…(img-qYIvrjpa-1714830665496)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】