2018 – 2022 年前端 JavaScript 面试题（收藏）
【相关推荐：前端面试题(2022)，js面试题（2022）】
我们真的是在编写代码，还是像乐高积木一样简单地组装代码？
在 2020 年底，我们仍然看到大多数面试者被问到 AJAX 时，面试者依然在 jQuery 语境中回答问题。这种差距还有很多典型的例子：
CSS Grid 和 Flexbox 布局已经得到了广泛支持。然而，CSS 面试时仍然集中在多列浮动布局 和行内块级元素居中。他们依然对 Bootstrap 或 Foundation 网格系统有着永不消亡的热情。
模块打包器（Module bundler）现在几乎是大规模应用程序的标配。然而，当谈到架构时，我们谈论的又是 minification(压缩) 和 concatenation(合并) 。在访面试中我们真正讨论过多少次 Webpack ？
如果 97％ 的代码来自 NPM ，但面试的重点缺又是数组排序或对象迭代。更糟糕的是，我们仍然对
typeof null很感兴趣。为什么不能聊点 选择合适的库，框架或工具的理性方法呢？我们仍在让面试者在原型之上进行经典继承，但并不是要验证对这些错误想法的需要。我们有更多的功能性模式。当然，使用 JavaScript class(类)，新引入的私有和静态属性可以好好的讨论一下。这将使人们更好地理解面试者的想法，关键决策等。
缓存讨论仍局限于 Cache control headers(控制头) 和 CDN。像 IndexDB，HTTP/2 或Service Workers 这样的东西只是路过。
这种例子不胜枚举，面试评估与工作实际需求之间的差距显而易见。一方面，我们的前端技术实现取得了跨越式发展，另一方面，新的开发方式还没有形成大的社区。社区分裂永远不是好兆头。这是一条灾难之路。差距总是会创造出一种新的东西，它有能力摧毁我们迄今为止所建造的一切。我无法想象 Java 开发人员使用 GWT 编写另一个 Facebook 。
面试是催生变革和汇聚人才的好方式。作为面试官的你，如果仅仅把面试当成面试，那么它只会让你自我膨胀。
要使一场面试成功，必须进行讨论。 它必须是一个交换思想的地方。 它应该挑起人们思考并客观地分析给定的问题。 它是理解人们做出的决策过程，也是了解一个人对技术和解决问题的热情，也意味着了解未来可能的同事。 所有那些难题，技巧或typeof null都无法称得上真正面试。
以下是我们在面试讨论中提出的一些问题清单。我们希望此清单可以帮助面试官和面试者在正确的背景下设定期望，需求和现实。
TLDR; 我们要先把自己当成面试官。
JavaScript 基础问题
1.使以下代码正常运行：
JavaScript 代码:
const a = [1, 2, 3, 4, 5]; // Implement this a.multiply(); console.log(a); // [1, 2, 3, 4, 5, 1, 4, 9, 16, 25]
2.以下代码在 JavaScript 中返回 false 。 解释一下为什么会这样：
JavaScript 代码:
// false 0.2 + 0.1 === 0.3
3.JavaScript 中有哪些不同的数据类型？
提示：只有两种类型 – 主要数据类型和引用类型（对象）。 有 6 种主要类型。
4.解决以下异步代码问题。
检索并计算属于同一教室中每个学生的平均分数，其中一些ID为75。每个学生可以在一年内参加一门或多门课程。 以下 API 可用于检索所需数据。
JavaScript 代码:
// GET LIST OF ALL THE STUDENTS
GET /api/students
Response:
[{
"id": 1,
"name": "John",
"classroomId": 75
}]
// GET COURSES FOR GIVEN A STUDENT
GET /api/courses?filter=studentId eq 1
Response:
[{
"id": "history",
"studentId": 1
}, {
"id": "algebra",
"studentId": 1
},]
// GET EVALUATION FOR EACH COURSE
GET /api/evaluation/history?filter=studentId eq 1
Response:
{
"id": 200,
"score": 50,
"totalScore": 100
}
编写一个接受教室 ID 的函数，您将根据该函数计算该教室中每个学生的平均值。该函数的最终输出应该是具有平均分数的学生列表：
JavaScript 代码:
[
{ "id": 1, "name": "John", "average": 70.5 },
{ "id": 3, "name": "Lois", "average": 67 },
]
使用普通的 callbacks ，promises ，observables，generator 或 async-wait 编写所需的函数。尝试使用至少 3 种不同的技术解决这个问题。
5.使用 JavaScript Proxy 实现简单的数据绑定
提示：ES Proxy 允许您拦截对任何对象属性或方法的调用。首先，每当更改底层绑定对象时，都应更新 DOM 。
6.解释 JavaScript 并发模型
您是否熟悉 Elixir，Clojure，Java 等其他编程语言中使用的任何其他并发模型？
提示：查找事件循环，任务队列，调用栈，堆等。
7.new 关键字在 JavaScript 中有什么作用？
提示：在 JavaScript 中，new 是用于实例化对象的运算符。 这里的目的是了解知识广度和记忆情况。
另外，请注意 [[Construct]] 和 [[Call]]。
8.JavaScript 中有哪些不同的函数调用模式？ 详细解释。
提示：有四种模式，函数调用，方法调用，.call() 和 .apply()。
9.解释任一即将发布新的 ECMAScript 提案。
提示：比如 2018 的 BigInt，partial 函数，pipeline 操作符 等。
10.JavaScript 中的迭代器（iterators）和迭代（iterables）是什么？ 你知道什么是内置迭代器吗？
11.为什么 JavaScript classes(类)被认为是坏的或反模式？
这是一个神话吗？它是否遭受了误传？是否有一些有用的用例？
12.如何在 JSON 中序列化以下对象？
如果我们将以下对象转换为 JSON 字符串，会发生什么？
JavaScript 代码:
const a = {
key1: Symbol(),
key2: 10
}
// What will happen?
console.log(JSON.stringify(a));
13.你熟悉 Typed Arrays 吗？ 如果熟悉，请解释他们与 JavaScript 中的传统数组相比的异同？
14. 默认参数是如何工作？
如果我们在调用 makeAPIRequest 函数时必须使用 timeout 的默认值，那么正确的语法是什么？
JavaScript 代码:
function makeAPIRequest(url, timeout = 2000, headers) {
// Some code to fetch data
}
15.解释 TCO – 尾调用优化（Tail Call Optimization）。 有没有支持尾调用优化的 JavaScript 引擎？
提示：截至 2018 年，没有。
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.使函数式编程与面向对象或命令式编程不同的关键因素是什么？
提示：Currying（柯里化），point-free 函数，partial 函数应用，高阶函数，纯函数，独立副作用，record 类型（联合，代数数据类型）等。
5.在 JavaScript 和前端的上下文中，函数式编程与响应式编程有什么关系？
提示：没有正确答案。但粗略地说，函数式编程是关于小型编码，编写纯函数和响应式编程是大型编码，即模块之间的数据流，连接以 FP 风格编写的组件。 FRP – 功能响应式编程（ Functional Reactive Programming）是另一个不同但相关的概念。
6.不可变数据结构（immutable data structures）解决了哪些问题？
不可变结构是否有任何性能影响？ JS 生态系统中哪些库提供了不可变的数据结构？这些库的优点和缺点是什么？
提示：线程安全（我们真的需要在浏览器 JavaScript 中担心吗？），无副作用的函数，更好的状态管理等。
7.大型应用程序是否应使用静态类型？
如何比较 TypeScript/Flow 与 Elm/ReasonML/PureScript 等 JS 转换语言？这些方法的优缺点是什么？
选择特定类型系统的主要标准应该是什么？
什么是类型推断（type inference）？
静态类型语言和强类型语言有什么区别？在这方面 JavaScript 的本质是什么？
有你知道的弱类型但静态类型的语言吗？有你知道的动态类型但强类型的语言吗？举例一二。
提示：Structural 与 Nominal 类型系统，类型稳健性，工具/生态系统支持，正确性超过方便。
8.JavaScript 中有哪些杰出的模块系统（module systems ）？如何评价 ES 模块系统。
列出在实现不同模块系统之间互操作所涉及的一些复杂性问题（主要对 ES 模块和 CommonJS 互操作感兴趣）
9.HTTP/2 将如何影响 JavaScript 应用程序打包？
列出 HTTP/2 与其上一个版本的基本区别。
10.Fetch API 相对于传统的 Ajax 有哪些改进？
使用 Fetch API 有那些缺点/难点吗？
哪些是Ajax 可以做的，而 fetch 不能做的？
11.如何评论 pull-based 和 push-based 的反应系统。
讨论概念，含义，用途等。
在这个讨论中加入惰性和及早求值。
然后在讨论中添加单数和复数值维度。
最后，讨论值解析的同步和异步性质。
为JavaScript中可用的每个组合提供示例。
提示：Observable 是惰性的，基于推送的复数值构造，同时具有 async/sync 调度程序。
12.讨论与 Promise 相关的问题。
提示：及早求值（eager evaluation），尴尬的取消机制，用 then() 方法伪装 map() 和 flatMap() 等。
前端基础和理论问题
1.HTML 中 Doctype 的用途是什么？
具体谈谈，以下每种情况下会发生什么：
Doctype 不存在。
使用了 HTML4 Doctype，但 HTML 页面使用了 HTML5 的标签，如
<audio>或<video>。它会导致任何错误吗？使用了无效的 Doctype。
2. DOM 和 BOM 的区别是什么？
提示：BOM，DOM，ECMAScript 和 JavaScript 都是不同的东西。
3.JavaScript 中的事件处理如何运行？
如下图所示，我们有三个 div 元素。每个 div 都有一个与之关联的点击处理程序。处理程序执行以下任务：
Outer div click 处理程序将
hello outer打印到控制台。Inner div click 处理程序将
hello inner打印到控制台。Innermost div click 处理程序将 hello innermost 打印到控制台。
编写一段代码来分配这些任务，以便在单击 innermost div 时始终打印以下序列？
hello inner → hello innermost → hello outer
提示：事件捕获和事件冒泡
4.使用单页应用将文件上传到服务器的有哪些方法？
提示：XMLHttpRequest2（streaming），fetch（non-streaming），File API
5.CSS 重排和重绘之间有什么区别？
哪些 CSS 属性会导致重排及重绘？
6. 什么是 CSS 选择器权重以及它如何工作？
说说计算 CSS 选择器权重的算法。
7.CSS 中的 pixel 与硬件/物理中的 pixel 有何不同？
提示：像素不是像素不是像素 – ppk。
8.什么是 sectioning 算法？
提示：它也被称为 HTML5 大纲算法。特别是在构建具有语义结构的网站时非常重要。
9.如果你用过 CSS Flex / CSS Grid（网格）布局，请说明你为什么要使用它？它为你解决了什么问题？
使用 CSS Grid，百分比％和 fr 单位有何不同？
使用 CSS flexbox，有时 flex-items/children 会不考虑 flex 容器设置的宽度/高度？为什么会这样？
可以使用 CSS Grid 创建 Masonry layout（瀑布流布局）吗？如果可以，怎么做？
解释 CSS Grid 和 CSS flexbox 术语？
浮动元素（
float: left | right;）如何在 CSS Grid 和 flexbox 中渲染？
提示：等高的列，垂直居中，复杂网格等。
10.什么时候应该使用 CSS animations 而不是 CSS transitions ？你做出这个决定标准是什么？
11.如果你正在 Review CSS 代码，那么你在代码中经常遇到的问题是什么？
示例：使用魔性数字，如 width: 67px; 或使用 em 代替 rem 单位，在通用代码之前编写 media queries（媒体查询），滥用 ID 和类等。
12.如何在 JavaScript 中检测触摸事件？
你是否不看好检测设备对触摸事件的支持？如果是，为什么？
比较触摸事件和点击事件。
当设备同时支持触摸和鼠标事件时，你认为这些事件的正确事件顺序是什么或应该是什么？
13.为 script 标签定义的 async 和 defer 属性有什么用？
现在我们有 HTTP/2 和 ES 模块，它们真的很有用吗？
列出的清单只是我们在面试中可能讨论的无限点的一瞥。Web Components，CORS，安全性，Cookies，CSS transform，Web Assembly，Service Workers，PWA，CSS架构等，还有许多我们没有考虑到的东西。我们也没有涉及框架或库的具体问题。
相关推荐：
2、前端面试江湖
以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。更多精彩内容大家可以关注相关教程栏目！！！
下一篇： 面试问到servlet怎么回答