2024年前端面试题ES6+计算机基础+前端工程化篇

2024年前端面试题ES6+计算机基础+前端工程化篇

我希望我的解释和答案是通俗易懂的。

ES6部分

let、const、var

1. let 定义变量有局部作用域，没有变量提升，并且不能重复声明
2. const 定义常量，值不能改变
3. var 全局作用域，变量提升，可多次重复声明

数组新增方法

1. arr.from（），将字符串转换成数组
2. arr.of（），用于将参数列表转换成数组，const a = array.of(1,2,3)，a是[1,2,3]
3. arr.find（），查找
4. arr.findindex（），查找第一个符合条件的下标
5. arr.includes（），判断数组是否包含某个数据
6. arr.fill（），将数组的每一项都变成统一的值
7. arr.reduce（），累加
8. arr.some（），判断所有元素是否符合条件
9. map，foreach，filter，evrry，遍历

对象新增方法

1. 属性简写
2. 属性名表达式
3. super关键字
4. 扩展运算符
5. obj.assign（），复制/拷贝
6. obj.keys，obj.values，遍历

promise

1. 异步编程的解决方案，有三种状态：pending进行中，fufiled成功，rejected失败
2. 使用有三个方法：catch失败回调，then成功回调，finally完成回调

箭头函数

1. 没有this
2. 没有arguments对象
3. 书写简便

模块化

模块化就是通过import和export来进行导入导出代码。使得代码更容易复用、重用、测试。比如vue的组件化也是模块化的一种

set和map

1. set集合，是一个无重复元素的集合，元素可以是任何类型，但值具有唯一性，有四种方法：
   • add（），新增
   • delete（），删除
   • has（），判断是否为集合成员，是就返回true，否则false
   • clear（），清空集合
2. map集合，是一种键值对集合，通过键来标识和访问值，键可以是任意类型。有四种方法：
   • size属性，返回当前集合的成员总数
   • set（），在map集合中添加键值对，
   • get（），根据键获取值
   • delete（），删除键值对
   • has（），判断是否存在某个键值对

计算机基础部分

浏览器渲染原理（用户输入url到回车发生了什么）

1. 解析URL
2. DNS解析：浏览器会检查本地DNS缓存，如果没有找到相应的域名解析结果，则会向DNS服务器发送查询请求，获取该域名对应的IP地址。
3. 建立TCP链接：三次握手和四次挥手
4. 发起http/https请求
5. 服务器处理请求
6. 服务器发送响应
7. 客户端接收并处理
8. 渲染页面：解析html构建dom树，解析css生成cssdom树，两个树一起生成render渲染树，最后根据渲染树进行页面布局渲染

三次握手和四次挥手

1. 三次握手就是在建立tcp链接的时候客户端向服务端发送包，第一次是确认服务端接受请求没有问题，第二次是确认双方的接受和发送没有问题，第三次是确认客户端接受没有问题
2. 四次挥手是指在中断tcp链接的时候，客户端告诉服务端可以停止发送数据了，服务端告诉客户端准备停止了，在发送一次给客户端告诉客户端他要停止链接了，客户端告诉服务端可以停止了，最后链接终止

V8引擎垃圾回收机制

1. 引用清除
   • 当一个对象被创建的时候引用次数为1，对象被引用就+1，引用失效或者不在引用该对象则-1，当次数为0时，就进行清除
   • 优缺点：简单实用性强，但是如果两个对象互相引用，容易导致内存长期被占有
2. 标记清除
   • 它分成两个阶段，标记阶段和清除阶段，标记阶段遍历所有对象，活跃都标记为活跃，而清除阶段则将所有的没有被标记的对象进行清除
   • 优缺点：解决了引用清除两个对象互相引用的问题，但是因为清除阶段是一次性执行的，可能会产生内存碎片

前端工程化部分

前端工程化的目的

1. 通过自动化工具，可以提高开发效率
2. 降低维护成本，通过规范化的代码、文档化的开发流程降低维护成本
3. 通过模块化的一系列操作降低耦合度，提高项目的可维护性和可扩展性
4. 通过eslint等等工具，提高代码规范质量

前端工程化有哪些操作

1. 使用eslint等规范代码工具
2. 脚手架搭建项目
3. git版本控制
4. 模块化管理

最后，欢迎指正和提供问题补充文章~