2024年前端面试题ES6+计算机基础+前端工程化篇
我希望我的解释和答案是通俗易懂的。
ES6部分
let、const、var
- let 定义变量有局部作用域,没有变量提升,并且不能重复声明
- const 定义常量,值不能改变
- var 全局作用域,变量提升,可多次重复声明
数组新增方法
- arr.from(),将字符串转换成数组
- arr.of(),用于将参数列表转换成数组,const a = array.of(1,2,3),a是[1,2,3]
- arr.find(),查找
- arr.findindex(),查找第一个符合条件的下标
- arr.includes(),判断数组是否包含某个数据
- arr.fill(),将数组的每一项都变成统一的值
- arr.reduce(),累加
- arr.some(),判断所有元素是否符合条件
- map,foreach,filter,evrry,遍历
对象新增方法
- 属性简写
- 属性名表达式
- super关键字
- 扩展运算符
- obj.assign(),复制/拷贝
- obj.keys,obj.values,遍历
promise
- 异步编程的解决方案,有三种状态:pending进行中,fufiled成功,rejected失败
- 使用有三个方法:catch失败回调,then成功回调,finally完成回调
箭头函数
- 没有this
- 没有arguments对象
- 书写简便
模块化
模块化就是通过import和export来进行导入导出代码。使得代码更容易复用、重用、测试。比如vue的组件化也是模块化的一种
set和map
- set集合,是一个无重复元素的集合,元素可以是任何类型,但值具有唯一性,有四种方法:
- add(),新增
- delete(),删除
- has(),判断是否为集合成员,是就返回true,否则false
- clear(),清空集合
- map集合,是一种键值对集合,通过键来标识和访问值,键可以是任意类型。有四种方法:
- size属性,返回当前集合的成员总数
- set(),在map集合中添加键值对,
- get(),根据键获取值
- delete(),删除键值对
- has(),判断是否存在某个键值对
计算机基础部分
浏览器渲染原理(用户输入url到回车发生了什么)
- 解析URL
- DNS解析:浏览器会检查本地DNS缓存,如果没有找到相应的域名解析结果,则会向DNS服务器发送查询请求,获取该域名对应的IP地址。
- 建立TCP链接:三次握手和四次挥手
- 发起http/https请求
- 服务器处理请求
- 服务器发送响应
- 客户端接收并处理
- 渲染页面:解析html构建dom树,解析css生成cssdom树,两个树一起生成render渲染树,最后根据渲染树进行页面布局渲染
三次握手和四次挥手
- 三次握手就是在建立tcp链接的时候客户端向服务端发送包,第一次是确认服务端接受请求没有问题,第二次是确认双方的接受和发送没有问题,第三次是确认客户端接受没有问题
- 四次挥手是指在中断tcp链接的时候,客户端告诉服务端可以停止发送数据了,服务端告诉客户端准备停止了,在发送一次给客户端告诉客户端他要停止链接了,客户端告诉服务端可以停止了,最后链接终止
V8引擎垃圾回收机制
- 引用清除
- 当一个对象被创建的时候引用次数为1,对象被引用就+1,引用失效或者不在引用该对象则-1,当次数为0时,就进行清除
- 优缺点:简单实用性强,但是如果两个对象互相引用,容易导致内存长期被占有
- 标记清除
- 它分成两个阶段,标记阶段和清除阶段,标记阶段遍历所有对象,活跃都标记为活跃,而清除阶段则将所有的没有被标记的对象进行清除
- 优缺点:解决了引用清除两个对象互相引用的问题,但是因为清除阶段是一次性执行的,可能会产生内存碎片
前端工程化部分
前端工程化的目的
- 通过自动化工具,可以提高开发效率
- 降低维护成本,通过规范化的代码、文档化的开发流程降低维护成本
- 通过模块化的一系列操作降低耦合度,提高项目的可维护性和可扩展性
- 通过eslint等等工具,提高代码规范质量
前端工程化有哪些操作
- 使用eslint等规范代码工具
- 脚手架搭建项目
- git版本控制
- 模块化管理