前端面试题集合

AK_AT

已于 2024-08-20 10:08:04 修改

阅读量18

点赞数

文章标签：前端 javascript 开发语言

于 2024-08-20 10:07:21 首次发布

原文链接：https://juejin.cn/post/7335337310547017768?utm_source=gold_browser_extension#heading-9

版权

前言：一场前端面试无非包含前端基础（js/css/html5/es6）、算法（排序、动态规划）、项目（vue / node）、计算机基础（计网/数据库/数据结构/操作系统）、工程化（webpack/vite）等。js基础要准备好promise系列、JS语法系列、ES6系列，

1.var a = []; a.push()、a.pop() 请说明在js中的意义？

使用的是字面量初始化创建了一个空数组，这是最简洁、直观且推荐的写法。这种方法直接在内存中创建并初始化数组对象，执行效率高。

var a = new Array(); 使用了Array构造函数来创建一个空数组。尽管功能上等同于前者，但性能上有差异。

2.var a = new A()，a 和 A 的关系，A 和 Function 的关系？

a 是 A 的一个实例对象，a 的__proto__ 指向 A 的 prototype，A 的__proto__ 指向 Function 的 prototype。

3. promise有几种状态，可以重复改变吗？

Promise对象有三种状态

Pending（未决）初始状态

Fulfilled（已履行/成功）：操作成功完成时的状态

Rejected（已拒绝/失败）：操作因错误或异常未能完成时的状态

Promise状态变化的特性是：

Promise状态的转变是不可逆且只能发生一次。也就是说，一个Promise不能从Fulfilled状态变回Pending状态，也不能从Rejected状态变为Pending或者Fulfilled状态。一旦Promise从Pending状态变为Fulfilled（resolved）或Rejected（rejected），它就永远不会再改变。

因此，Promise的状态不能重复改变。

Promise.resolve()与Promise.reject() 用于创建已确定状态的Promise对象，方便快速返回成功的或失败的结果

4.Promise还提供了哪些静态方法，平时怎么用的？

Promise.all(iterable)

参数是promise对象数组。只有当所有Promise都变为fulfilled时，返回的Promise才会变为fulfilled，并且结果是一个包含所有Promise结果的数组；只要有一个Promise变为rejected，则整体Promise也会立即变为rejected，返回第一个rejected Promise的理由。

Promise.race(iterable)

在传入的 Promise 数组中任何一个 Promise 解决（resolve）或拒绝（reject）时，会立即以那个率先改变状态的 Promise 的结果为准来解决或拒绝。

这里强调下细节，其它的promise实例仍然会继续运行，只不过其状态和结果不会归于最终的结果。

Promise.race 关注的是速度最快的 Promise 的结果，而 Promise.all 关注的是所有 Promise 是否都成功完成。

Promise.allSettled(iterable)

和Promise.all()相似，它等待所有Promise都达到settled状态（即无论是fulfilled还是rejected）。一旦所有Promise都决断了，返回的Promise会变成fulfilled，并且结果是一个数组，包含了每个输入Promise的结果描述对象，这些对象具有status（'fulfilled'或'rejected'）和对应的value或reason属性。

Promise.all() 更关注所有 Promise 是否都成功完成，它适用于需要所有任务成功完成才能继续下一步场景。而 Promise.allSettled() 则允许你观察一组异步操作的所有结果，无论成功与否，这对于获取并处理所有任务的最终状态非常有用。

5. == 值相等， ===严格相等，即值和类型都相等

类型转化，虽然obj3和obj4 值不一样，但面试官要听的是我们对于JS类型转换的理解。

在转换不同的数据类型时，相等和不相等操作符遵循下列基本规则：

如果由一个操作数是布尔值，则在比较相等性之前先将其转换为数值---false转换为0，而true转换为1；
如果一个操作数是字符串，另一个操作数是数值，在比较相等性之前先将字符串转换为数值；
如果一个操作数是对象，另一个操作数不是，则调用对象的valueOf（）方法，用得到的基本类型值按照前面的规则进行比较；
这两个操作符在进行比较时则要遵循下列规则。

null和undefined是相等的。
要比较相等性之前，不能将null和undefined转换成其他任何值。
如果有一个操作数是NaN，则相等操作符返回false，而不相等操作符则返回true。重要提示：即使两个操作数都是NaN，相等操作符也返回false；因为按照规则，NaN不等于NaN。
如果两个操作数都是对象，则比较他们是不是同一个对象。如果两个操作数都是指向同一个对象，则相等放回true，否则返回false。

6. 聊聊你对语义化的理解

html5 新增了语义化标签 header、nav、section、aside、footer、aside、article
一边讲标签，一边把脑子里的这张图（掘金详情页）讲给面试官。这样说比干巴巴讲单词，好太多。
div + css 能解决布局问题，但是可读性不好，代码不好维护
SEO 搜索引擎优化
更好地支持各种终端，例如无障碍阅读和有声小说等

7. 如何用AI工具提升开发效率

之前申请了Github的Copilot，学生党免费嘛。对代码提速和源码学习都有挺大帮助的。也试过下通义千问的vscode 插件，挺好的。
使用各种chat bot(Chatgpt等)，从前端到后端、AI学习、数据库等，提问式学习及解决问题，拥抱AI Native。
刻意练习一些prompt 的技巧，生成前端页面、SQL等比如在做后台管理系统的时候， tailwind的一些页面，基本都是chat 完成。
学习transfromer、openai 等AIGC类技能，将一部分的编程任务交给Agent来完成，发挥大模型的能力。最近在学习LangChain, 对AI很感兴趣。

8.讲一讲HTTP请求三次握手

为什么是三次握手，不是两次或者四次?

三次握手是确定客户端和服务端接收和发送能力都正常(HTTP)的最优次数

第一次：客户端发送能力正常
第二次：服务端接收能力正常，服务端发送能力正常(接收和发送可以合并)
第三次：客户端接收能力正常

9.说一说跨域

首先，跨域问题源于浏览器的同源策略，该策略限制了从一个源加载的网页脚本如何与另一个源交互。

jsonp （JSON with Padding）

WebSocket API

POSTMessage API

CORS（Cross-Origin Resource Sharing）服务器端设置允许跨域请求头（如Access-Control-Allow-Origin），浏览器在发起跨域请求时会检查响应头是否允许本次请求。

10.vite 为什么比webpack快？

工程化、历史及现状

在开发前端项目的时候，工程化工具是标配。比如项目的初始化，让我们快速开始业务开发；模块化的支持，方便组织和复用代码；各种资源的处理和加载，如css、图片、字体等，并将其压缩或优化后放入最后的代码包;各种loader和plugin，按需定制编译流程（stylus/ts/jsx）、压缩(MiniCssExtractPlugin)；热更新等

Webpack和Vite等构建工具旨在解决前端开发中的复杂性和规模问题，通过自动化处理、模块化管理、性能优化等手段极大地提高了开发效率和应用性能，现代前端开发实践中不可或缺的部分，即前端工程化。

webpack在项目调试之前，要把所有文件的依赖关系收集完，打包后才能运行，这是它慢的主要原因；针对webpack的bundle思路，社区推出了bundless思路框架：Vite。

差别：只要在script标签上添加type="module"标记， main.js 就可以直接使用import 语法(动态导入)去引入js 文件，所以可以不用webpack(node)打包功能，直接使用浏览器的module功能就可以组织我们的代码。

Vite 能够做到这么快的原因，还有一部分是因为使用了 esbuild 去解析 JavaScript 文件。esbuild 是一个用 Go 语言实现的 JavaScript 打包器，支持 JavaScript 和 TypeScript 语法，现在前端工程化领域的工具也越来越多地使用 Go 和 Rust 等更高效的语言书写，这也是性能优化的一个方向。