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 等基于单向数据流架构。
单向数据绑定
单向数据绑定，带来单向数据流。。
指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。适用于整体项目，并于追溯。
优点：
1. 所有状态的改变可记录、可跟踪，源头易追溯;
2. 所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性;
3. 一旦数据变化，就去更新页面(data-页面)，但是没有(页面-data);
4. 如果用户在页面上做了变动，那么就手动收集起来(双向是自动)，合并到原有的数据中。
方神：双向绑定 = 单向绑定 + UI事件监听，可了解vuex
缺点：
1. HTML代码渲染完成，无法改变，有新数据，就须把旧HTML代码去掉，整合新数据和模板重新渲染;
2. 代码量上升，数据流转过程变长，出现很多类似的样板代码;
3. 同时由于对应用状态独立管理的严格要求(单一的全局store)，在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用)，会显得啰嗦及繁琐。
双向数据绑定
双向数据绑定，带来双向数据流。AngularJS2添加了单向数据绑定
数据模型（Module）和视图（View）之间的双向绑定。无论数据改变，或是用户操作，都能带来互相的变动，自动更新。适用于项目细节，如：UI控件中(通常是类表单操作)。
优点：
1. 用户在视图上的修改会自动同步到数据模型中去，数据模型中值的变化也会立刻同步到视图中去；
2. 无需进行和单向数据绑定的那些CRUD（Create，Retrieve，Update，Delete）操作；
3. 在表单交互较多的场景下，会简化大量业务无关的代码。
缺点：
1. 无法追踪局部状态的变化；
2. “暗箱操作”，增加了出错时 debug 的难度；
3. 由于组件数据变化来源入口变得可能不止一个，数据流转方向易紊乱，若再缺乏“管制”手段，血崩。
双向数据绑定，Angular使用脏检查“digest” - “dirty checking”
（在angular中，他没有办法判断你的数据是否做了更改， 所以它设置了一些条件，当你触发了这些条件之后，它就执行一个检测来遍历所有的数据，对比你更改了地方，然后执行变化。这个检查很不科学。而且效率不高，有很多多余的地方，所以官方称为脏检查）
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架构等，还有许多我们没有考虑到的东西。我们也没有涉及框架或库的具体问题。
原文地址：https://www.cnblogs.com/amujoe/p/11176277.html