这是今年前台最常见的面试题，你都会了吗？

在面试或者招聘前台开发人员时，期望、现实和需求之间总是存在着巨大差距。面试其实是一个交流想法的地方，挑战人们的思考方式，并客观地分析给定的问题。可以通过面试理解人们如何做出决策，理解一个人对技术和处理问题的热情程度，也是在理解未来可能一起共事的同事。

以下是我们在面试探讨中提出的少量问题，希望这个问题列表可以帮助面试者和候选人能够在面试中正确地设定期望、要求和现实。这是我的前台交流学习qun：前面是七三一，中间是七七一，后面是二逐个。假如需要学习资料在里面下载。我做这行十多年，有问题随时来问我，学习方法，学习效率等等问题。

基本的 JavaScript 问题

1. 让下面的代码可以运行：

const a = [1, 2, 3, 4, 5];// Implement thisa.multiply();console.log(a); // [1, 2, 3, 4, 5, 1, 4, 9, 16, 25]

2. 以下代码会返回false，解释为什么会这样：

// false0.2 + 0.1 === 0.3

3.JavaScript 中有哪些不同的数据类型？

提醒：JavaScript 中只有两种类型——主要数据类型和引用类型（对象），其中有六种主要数据类型。

4. 处理以下异步代码问题。

获取并计算属于某个班级（假设 ID 为 75）的每个学生的平均分数。每个学生在一年内可以参与一门或者多门课程。以下 API 可用于获取所需的数据。

// GET LIST OF ALL THE STUDENTSGET /api/studentsResponse:[{    "id": 1,    "name": "John",    "classroomId": 75}]// GET COURSES FOR GIVEN A STUDENTGET /api/courses?filter=studentId eq 1Response:[{   "id": "history",   "studentId": 1}, {   "id": "algebra",   "studentId": 1},]// GET EVALUATION FOR EACH COURSEGET /api/evaluation/history?filter=studentId eq 1Response:{    "id": 200,    "score": 50,    "totalScore": 100}

编写一个以班级 ID 作为参数的函数，你将使用这个函数计算该班级中每个学生的平均分数。这个函数的最终输出应该是带有平均分数的学生列表：

[  { "id": 1, "name": "John", "average": 70.5 },  { "id": 3, "name": "Lois", "average": 67 },}

使用普通回调、promises、observables、generator 或者 async-wait 编写所需的函数。尝试使用至少 3 种不同的技术处理这个问题。

5. 使用 JavaScript 代理商实现简单的数据绑定

提醒：ES Proxy 允许你阻拦对任何对象属性或者方法的调用。首先，每当底层绑定对象发生变更时，都应升级 DOM。

6. 解释 JavaScript 的并发模型

你能否熟习 Elixir、Clojure、Java 等其余编程语言中使用的并发模型？

提醒：事件循环、任务队列、调用栈、堆等。

7.“new”关键字在 JavaScript 中有什么作用？

提醒：在 JavaScript 中，new 是用于实例化对象的运算符。

另外，请注意 [[Construct]] 和 [[Call]]。

8.JavaScript 中有哪些不同的函数调用模式？请详细解释。

提醒：有四种模式，函数调用、方法调用、.call() 和.apply()。

9. 详情少量即将发布的新的 ECMAScript 提案。

提醒：与 2018 年一样，BigInt、部分函数、管道操作符等。

10.JavaScript 中的 iterator 和 iterable 是什么？你知道有哪些内置的 iterator 吗？

11. 为什么 JavaScript 类被认为是一种反模式？

JavaScript 的类能否还有其余用武之地？

12. 如何将下面的对象序列化成 JSON？

假如我们将下面的对象转换为 JSON 字符串，会发生什么？

const a = {    key1: Symbol(),    key2: 10}// What will happen?console.log(JSON.stringify(a));

13. 你熟习 Typed Arrays 吗？假如是，请解释它们的用处以及它们与传统数组的差别？

14. 请解释默认参数的原理？

假如我们在调用 makeAPIRequest 函数时使用默认的 timeout，那么正确的语法是怎么的？

function makeAPIRequest(url, timeout = 2000, headers) {   // Some code to fetch data} 

15. 解释什么是 TCO——尾部调用优化。有没有支持尾部调用优化的 JavaScript 引擎？

提醒：截至 2019 年，没有。

JavaScript 前台应用程序设计问题

1. 解释单向数据流和双向数据绑定。

Angular 1.x 基于双向数据绑定，而 React、Vue、Elm 等基于单向数据流架构。

2. 单向数据流架构适合用在 MVC 的哪些方面？

MVC 拥有大约 50 年的悠久历史，并已演变为 MVP、MVVM 和 MV*。两者之间的相互关系是什么？假如 MVC 是架构模式，那么单向数据流是什么？这些模式能否能处理同样的问题？

3. 用户端 MVC 与服务器端或者经典的 MVC 有何不同？

提醒：经典 MVC 是适用于桌面应用程序的 Smalltalk MVC。在 Web 应用程序中，至少有两个不同的数据 MVC 周期。

4. 是哪些因素让函数式编程有别于面向对象或者命令式编程？

提醒：柯里化、point-free 函数、部分函数应用、高阶函数、纯函数、独立反作用、记录类型（联合、代数数据类型）等。

5. 在 JavaScript 和前台的上下文中，函数式编程如何与反应式编程相关？

提醒：没有正确答案。但粗略地说，函数式编程是使用纯函数，针对小块代码，而反应式编程关于大块代码，即板块之间的数据流、连接以 FP 风格编写的组件。FRP——函数反应式编程是另一个不同但相关的概念。

6. 不可变数据结构处理了哪些问题？

不可变结构能否有任何性能影响？JS 生态系统中哪些库提供了不可变的数据结构？这些库的优点和缺点是什么？

提醒：线程安全（我们真的需要担心这个问题吗？）、无反作用的函数、更好的状态管理等。

7. 大型应用程序能否应该使用静态类型？

• TypeScript 或者 Flow 与 Elm、ReasonML 或者 PureScript 之间有什么区别？它们的优点和缺点是什么？

• 选择特定类型系统的主要标准是什么？

• 什么是类型推断？

• 静态类型语言和强类型语言之间有什么区别？在这方面 JavaScript 的本质是什么？

• 你知道有哪些语言时弱类型但静态类型的吗？你知道有哪些语言时动态类型但强类型的吗？

提醒：结构化与有名无实的类型系统、类型稳健性、工具 / 生态系统支持、正确性先于便利性。

8.JavaScript 世界中哪些突出的板块系统？请评论一下 ES 板块系统。

列出在实现不同板块系统之间的互操作性时所涉及的少量复杂性（主要对 ES 板块和 CommonJS 互操作性感兴趣）。

9.HTTP2 将如何影响 JavaScript 应用程序打包？

列出 HTTP2 有别于其前身的少量基本特征。

10.Fetch API 相对于传统的 Ajax 有哪些改进？

使用 Fetch API 是有任何缺点或者痛点吗？有哪些 Ajax 可以做但 fetch 做不到的事情吗？

11. 请解释一下基于拉取和基于推送的反应式系统。

探讨概念、含义、用途等

• 在探讨中提及惰性与及早请求。

• 在探讨中提及单数和复数值维度。

• 最后谈谈值解析的同步和异步性质。

• 提供示例，说明 JavaScript 中可用的每个组合。

提醒：Observable 是一个惰性的、基于推送的复数值构造，并带有异步 / 同步调度程序。

12. 谈谈与 Promise 相关的少量问题。

提醒：及早求值、撤销机制、用 then() 方法冒充 map() 和 flatMap() 等。

前台基础和理论相关问题

1. HTML 中 Doctype 的用途是什么？

对于以下每种情况，将会发生什么：

• Doctype 不存在。

• 使用 HTML4 Doctype，但 HTML 页面使用了 HTML5 标签，如

• 使用了无效的 Doctype。

2.DOM 和 BOM 有什么区别？

提醒：BOM、DOM、ECMAScript 和 JavaScript 都是不同的东西。

3.JavaScript 中的事件解决是如何进行的？

如下图所示，我们有三个 div 元素。它们每个都有一个与之关联的单击解决程序。解决程序执行以下任务：

• 外部 div 解决程序将 hello outer 打印到控制台。

• 内部 div 解决程序将 hello inner 打印到控制台。

• 最内部的 div 解决程序将 hello innermost 打印到控制台。

编写一段代码来分配这些解决程序，以便在单击最里面的 div 时始终打印以下序列。

hello inner → hello innermost → hello outer

提醒：事件捕获和事件泡沫。

4. 使用单页应用程序将文件上载到服务器有哪些不同的方法？

提醒：XMLHttpRequest2（流媒体）、fetch（非流媒体）、File API

5.CSS re-flow 和 repaint 之间有什么区别？

哪些 CSS 属性在发生变更时会导致 re-flow 和 repaint？

6. 什么是 CSS 选择器特异性以及它的原理是什么？

CSS 特异性的算法。

7.CSS 像素与硬件 / 物理像素有何不同？

提醒：不是像素的像素不是像素——ppk。

8. 什么是切片（sectioning）算法？

提醒：它也被称为 HTML5 轮廓（outline）算法，在构建具备语义结构的网站时非常重要。

9. 假如你使用过 CSS Flex/CSS 网格，为什么你要用它们？它们为你处理了什么问题？

• 在使用 CSS 网格时，％和 fr 有何不同？

• 在使用 CSS Flexbox 时，有时候 flex-items/children 不考虑容器设置的宽度 / 高度，为什么会这样？

• 可以使用 CSS 网格创立 Masonry 布局吗？假如可以，怎么做？

• 请解释 CSS 网格和 CSS Flexbox 术语。

• 如何在 CSS 网格和 Flexbox 中渲染浮动元素（float: left | right;）？

提醒：相等高度的列、垂直居中、复杂网格等。

10. 什么时候应该使用 CSS 动画而不是 CSS 过渡？选择标准是什么？

11. 假如你正在评审 CSS 代码，你向要在代码中查找哪些常见问题？

示例：使用魔术数，如 width: 67px;，或者使用 em 代替 rem，在通用代码之前使用媒体查询，滥用 ID 和类等。

12. 如何通过 JavaScript 检测触摸事件？

你能否认为检测设施对触摸事件的支持是个坏主意？假如是，为什么？比较触摸事件和指针事件。当设施同时支持触摸和鼠标事件时，你认为这些事件的正确顺序应该是怎么的？

13. 为 Script 标记定义的async和defer属性有什么用？

现在我们有 HTTP2 和 ES 板块，它们真的很有用吗？