2024年最新TypeScript实战：下棋游戏，前端处理数据渲染页面的方式

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

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

1.1 游戏演示

---

玩法：两个玩家，一个玩家使用（X），一个玩家使用（O），轮流在棋盘上下棋（点击单元格）。

获胜条件：横、竖、斜（对角线）三个棋子相同。

平局：棋盘满子，但是，不满足任何一种获胜条件。

1.2 游戏模板说明

---

重点：运用学到的 TS 知识，来开发下棋游戏。

游戏的模板（HTML、CSS），已准备好，直接使用即可。

模板（HTML、CSS）的说明：

1. 下一步提示：给游戏面板（#bord）标签，添加 x 或 o 类名。

2. 下棋（点击单元格）：给单元格（.cell）标签，添加 x 或 o 类名。

3. 展示和隐藏获胜信息：设置获胜信息面板（#message）标签的样式属性 display。

2. 点击下棋

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

2.1 单元格点击

---

效果：点击棋盘的任意单元格，单元格显示 X（默认）。

1. 获取到所有的单元格列表。

2. 给当前被点击的单元格添加类名 x。

3. 遍历单元格列表，给每一个单元格添加点击事件。

优化（1）：防止单元格重复点击，在添加事件时，使用 once 属性，让单元格只能被点击一次。

优化（2）：使用函数声明形式的事件处理程序（代码多了后，代码结构会更清晰）。

2.2 切换玩家

---

效果：玩家（X）和玩家（O）轮流交替下棋。

1. 创建一个存储当前玩家的变量（currentPlayer），默认值为：x。

2. 切换到另一个玩家：在添加类名（下棋完成一步）后，根据当前玩家，得到另外一个玩家。

3. 将添加给单元格时写死的类名 x ，替换为变量（currentPlayer）的值。

4. 处理下一步提示：移除游戏面板中的 x 和 o 类名，添加下一个玩家对应的类名。

2.3 枚举

---

使用变量（currentPlayer）处理当前玩家，存在的问题：

变量的类型是 string，它的值可以是任意字符串。

也就是：string 类型的变量，取值太宽泛，无法很好的限制值为 x 和 o。

如果不小心写错了（o  0），代码不会报错，但功能就无法实现了，并且很难找错。

枚举是组织有关联数据的一种方式（比如，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], …

]

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

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

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！