文末
js前端的重头戏，值得花大部分时间学习。
推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。
另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。
学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。
面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。
这是288页的前端面试题
===================================================================
玩法：两个玩家，一个玩家使用（X），一个玩家使用（O），轮流在棋盘上下棋（点击单元格）。
获胜条件：横、竖、斜（对角线）三个棋子相同。
平局：棋盘满子，但是，不满足任何一种获胜条件。
重点：运用学到的 TS 知识，来开发下棋游戏。
游戏的模板（HTML、CSS），已准备好，直接使用即可。
模板（HTML、CSS）的说明：
-
下一步提示：给游戏面板（#bord）标签，添加 x 或 o 类名。
-
下棋（点击单元格）：给单元格（.cell）标签，添加 x 或 o 类名。
-
展示和隐藏获胜信息：设置获胜信息面板（#message）标签的样式属性 display。
===================================================================
效果：点击棋盘的任意单元格，单元格显示 X（默认）。
-
获取到所有的单元格列表。
-
给当前被点击的单元格添加类名 x。
-
遍历单元格列表，给每一个单元格添加点击事件。
优化（1）：防止单元格重复点击，在添加事件时，使用 once 属性，让单元格只能被点击一次。
优化（2）：使用函数声明形式的事件处理程序（代码多了后，代码结构会更清晰）。
效果：玩家（X）和玩家（O）轮流交替下棋。
-
创建一个存储当前玩家的变量（currentPlayer），默认值为：x。
-
切换到另一个玩家：在添加类名（下棋完成一步）后，根据当前玩家，得到另外一个玩家。
-
将添加给单元格时写死的类名 x ，替换为变量（currentPlayer）的值。
-
处理下一步提示：移除游戏面板中的 x 和 o 类名，添加下一个玩家对应的类名。
使用变量（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 = '男' }
特点：没有自增行为，需要为每一个成员赋值！
枚举是一组有名字的常量（只读）的集合。
效果：使用枚举代替原来的字符串类名（x 和 o）。
-
创建字符串枚举（Player），提供 X 和 O 两个成员。
-
将变量（currentPlayer）的类型设置为 Player 枚举类型，默认值为 Player.X。
-
将成员 X 的值设置为：‘x’（类名）；将成员 O 的值设置为：‘o’（类名）。
-
将所有用到 x 和 o 的地方全部使用枚举成员代替。
===================================================================
思路：判断棋盘中，横、竖、斜（对角线）是否存在三个相同的 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 方法） 。
- 通过索引获取元素
console.log(cells[0])
console.log(cells[1])
- 使用 for 循环遍历
for (let i = 0; i < cells.length; i++) {
console.log(cells[i])
}
ES6
-
列举常用的ES6特性：
-
箭头函数需要注意哪些地方？
-
let、const、var
-
拓展：var方式定义的变量有什么样的bug？
-
Set数据结构
-
拓展：数组去重的方法
-
箭头函数this的指向。
-
手写ES6 class继承。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
微信小程序
-
简单描述一下微信小程序的相关文件类型?
-
你是怎么封装微信小程序的数据请求？
-
有哪些参数传值的方法？
-
你使用过哪些方法，来提高微信小程序的应用速度？
-
小程序和原生App哪个好？
-
简述微信小程序原理？
-
分析微信小程序的优劣势
-
怎么解决小程序的异步请求问题？
其他知识点面试
-
webpack的原理
-
webpack的loader和plugin的区别？
-
怎么使用webpack对项目进行优化?
-
防抖、节流
-
浏览器的缓存机制
-
描述一下二叉树, 并说明二叉树的几种遍历方式?
-
项目类问题
-
笔试编程题：
最后
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
