2021年最新前端面试题目整理
最近面试的一些记录 题目和答案陆续整理中，没整理完的请见谅。
遇到过一些问题常规、结果乐观的面试，也有遇到全程自闭的。最终复盘，收集问题的时候，觉得很感激一针见血的面试官，虽然过程尴尬，但得到了鞭策和自己的知识盲区，这就是最大的收获。
本人2020年本科毕业，2020年6月至今(2021年6月)都在同一家公司工作，也就是工作经验一年，公司一家，公司前端框架是react+mobx+antd+typescript。
以下是整理出来的全部面试题目,后面有整理部分答案：
以下是整理的答案：（部分答案会引用网络上一些比较全面、清晰的答案，比我自己写的靠谱一些。如有不足欢迎指出✨🎈）
1. 你是怎样学习前端的
会根据学习路线去学习必要的技术，去看官方文档、网上视频教学，并结合实战项目去学习，也会结合红宝书之类的书籍去深入学习。
2. 盒子模型是什么
CSS的盒子模型是指，在网页中一个元素占有空间的大小由几个部分构成，包括元素本身的宽高content，内边距padding，边框border以及外边距margin。
目前盒模型分为两种：W3C标准盒模型 +IE盒模型
-
第一种：W3C标准盒模型
盒子实际内容（content）的width/height=我们设置的width/height;
盒子总宽度/高度=width/height+padding+border+margin。
-
第二种：IE盒模型（怪异盒模型）
我们设置的width=content宽度+内边距padding+边框border宽度（height同样）
盒子总宽度/高度= width/height + margin = 内容区宽度/高度 + padding + border + margin
3. 点击按钮改变文本框的值，用框架和用原生JS分别应该怎样实现？
这里主要考察对框架思想和原生的区别的理解 -
使用框架：讲文本框的值绑定为一个变量，在点击按钮时去修改对应的变量，即可修改文本框的值
-
使用原生js:通过id、类名等选择器都可以去找到该文本框的DOM元素，通过设置该元素的innerHTML属性或者innerText属性去设置文本框的值。
4. 有些模块可以兼容ES6 有些只能兼容ES5 这种情况怎么解决
type=‘module’，在script标签里面有type属性指定文件的类型 (type=‘text/script’)，这个属性还有一个值：module和nomodule。
-
module：表示当浏览器支持ES6的时候执行的JavaScript代码
-
nomodule：表示当浏览器不支持ES6的时候执行的JavaScript代码。
详细可参考： 这里 浏览器支持ES6的最优解决方案
5. 把功能抽成公共组件的意义是什么 -
降低各功能之间的耦合性，提高功能内部聚合性
-
降低代码维护难度，在功能需要修改时只需要修改公共组件，而不需要处处排查，都修改一次。
-
提升开发效率，一次编辑，多次使用。
-
一个组件只专注做一件事，且把这件事做好。
6. react的传值是怎么进行的 -
父传子：利用props
//在父组件中：
<Son data={"some data"}/>
//在子组件中：
this.props.data //"some data"
- 子传父：
因为react有一个特点是单向数据流，数据只能从祖父组件传到父组件再传到子组件等，所以在子组件中不能直接修改父组件的数据，此时函数传参的方式去修改父组件的值。
通过在父组件引入的子组件中传递一个函数并传参，子组件去触发这个函数更改参数完成数据更新
//在父组件中：
changeData=(newData)=>this.setState({data:newData})//父组件的修改数据的方法,新数据通过参数传进来
<Son changeData={(newData)=>this.changeData(newData)/>
//在子组件中：
this.props.changeData("the new data")
- 兄弟组件之间传值：
子组件传给父组件，由父组件再传给另外一个子组件
7. 频繁点击按钮会造成异常，有什么解决方法（节流和防抖的原理） - 函数的节流：（时间没到，触发无效，时间继续计算）如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再反复触发，直至过了这段时间才重新生效。
- 函数的防抖：（时间没到就被触发，重新计算时间）在规定的时间内只触发一次，如果多次触发，清除上次触发的事件，重新计算时间。
详细可参考：这里
8.同一个程序要兼容不同尺寸的屏幕，比如包括移动端，应该怎么处理
借助于媒体查询：
详细可参考：这里
9. 介绍一下mobx状态管理的原理，action是什么
Mobx/MobxReact 中有三个核心概念，observable、observer、action
- observable: 通过 observable(state) 定义组件的状态，包装后的状态是一个可观察数据（Observable Data）。
- observer: 通过 observer(ReactComponent) 定义组件。
- action: 通过 action 来修改状态。
详细可参考：这里
10. store里面存的数据变化了，组件是怎样知道他要去重新渲染数据的，他是怎么样通知到这个组件的
- 当前组件的State中的属性改变时且当前组件的shouldcomponentupdate返回true，那么当前组件会rerender
- 组件的props中的任一属性的值有变化(即使这个任一属性的值是对象，变化的仅仅是该对象中的某属性的值，此刻也算props发生了变化)且当前组件的shouldcomponentupdate return true时且当期组件所有父级以上组件的shouldcomponentupdate return true，当前组件才会re-render
- 当前组件的shouldcomponentupdate即使返回false，当前组件里子组件若满足1中的条件，这个子组件依然会重新渲染
- 你一般怎么样去跟后台的接口交互？所以他这个就是你前端的module都是后台给你打提供的对吧
这里我回答的是，后端会给restful接口，并注明参数以及参数的格式等，前端按需求传参和请求，拿到后端数据后去处理，然后渲染进页面，过程中如果有问题会再与后端沟通。但是感觉不是面试官想要的答案，可能我对问题的理解有误，所以面试官又问了 “所以他这个就是你前端的module都是后台给你打提供的对吧”。 - 怎么做异常处理
回答的try catch等，面试官不是很满意。详细可参考： 这里 - ajax的拦截器你知道吗
一般用于登录验证，当不在登录状态时，拦截用户对各个页面的访问，防止用户跳过登录页面访问其他页面。
var token = localStorage.getItem("token");
$.ajaxSetup({
dataType: "json",
cache: false,
headers: {
"token": token
},
xhrFields: {
withCredentials: true
},
complete: function(xhr) {
//token过期，则跳转到登录页面
if(xhr.responseJSON.code == 401){
parent.location.href = baseURL + 'login.html';
}
}
});
- Ajax axios同步还是异步
关于ajax和axios：
ajax：原生JS可以借助XMLHttpRequest对象封装异步请求，jquery已经帮我们做了封装，名字就叫ajax，所以平时说的ajax异步请求就指的是jquery的ajax。
axios：axios也是对XMLHttpRequest的封装，axios是通过 promise 实现对 ajax 技术的一种封装，就像 ajax 是 通过 jQuery 来封装一样。但它更符合ES规范，推荐使用axios，因为它体积小，使用ajax必须引入整个jquery.js，而axios只需要引入axios.js。
引自：这里
同步还是异步？
AJAX中根据async的值不同分为同步（async = false）和异步（async = true） 默认：true，异步
$.ajax({
type: "post",
url: "path",
cache:false,
async:false, //默认true 异步
dataType: ($.browser.msie) ? "text" : "xml",
success: function(xmlobj){
function1(){};
}
});
function2(){};
axios同步异步区别在于是否使用了“async ” 及“await ”关键词：
//同步
async getfiles() {
var result={};
var param = new URLSearchParams()
param.append('id', $("#type").val())
var url = "/backstage/fileupload/getFileName.action";
await axios.post(url, param).then(function (res) {
if (res.status == 200) {
result=res.data.data;
} else {
alert("获取失败！");
}
});
this.filenames=result
}
//异步
getfiles() {
var result={};
var param = new URLSearchParams()
param.append('id', $("#type").val())
var url = "/backstage/fileupload/getFileName.action";
axios.post(url, param).then(function (res) {
if (res.status == 200) {
result=res.data.data;
} else {
alert("获取失败！");
}
});
this.filenames=result
}
摘自： 这里
延伸：什么是同步，什么是异步？
同步请求即是当前发出请求后，浏览器什么都不能做，必须得等到请求完成返回数据之后，才会执行后续的代码。相当于排队。
异步请求就当发出请求的同时，浏览器可以继续做任何事，Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
摘自：这里
15. setstate之后做了哪些处理
React在setState之后，会经对state进行diff，判断是否有改变，然后去diff dom决定是否要更新UI。在短时间内频繁setState。React会将state的改变压入栈中，在合适的时机，批量更新state和视图，达到提高性能的效果。
详细可参考：这里
- 连续将一个变量的值setState1 setState2 setState3的结果 ？如果在外面各自加一个settimeout的结果又是怎样的？
连续两次setState会渲染1次，React 可以将多个setState() 调用合并成一个调用来提高性能。
例子可参考：这里
加setTimeout之后，因为setTimeout是同步的，带动state立即更新，可以执行多次。所以我们通常使用setTimeout来简单解决react中setState不及时生效的问题。 - Ts的泛型 大写的T是什么
泛型，简单来说就是类型变量。在ts中存在类型，类型如number、string、boolean等，泛型就是使用一个类型变量来表示一种类型，类型值通常是在使用的时候才会设置。泛型的使用场景非常多，可以在函数、类甚至interface中使用。
详细可参考：这里 - TS怎么继承 es6怎么继承 原生怎么继承 说一下原型链的继承
- TS继承
1：通过 extends 来继承父类
2：调用父类使用super，子类继承父类的属性和方法，并且子类可以改写父类的属性和方法
class Person {
name: string;
constructor(name: string) {
this.name = name;
}
run(): string {
return `${this.name}在运动`
}
}
//Me类来继承Person类
class Me extends Person {
constructor(name: string) {
super(name);//初始化父类的构造函数
}
}
let m = new Me("doudouzi");
console.log(m.run());//doudouzi在运动
- es6怎么继承
未完待续，下面的可以参考问题先自己寻找答案哦：
- Let const区别 和var的区别 一个class里面可不可以let两个同名变量
- 怎么理解闭包
- 数组对象有哪些原生的方法 map方法的作用
- 块级元素和内联元素 怎么给内联元素设置宽度
- flex这个属性怎么使盒子居中 flex:1和flex:2区别
- webpack这边保存 那边浏览器就可以更新是怎么做到的
- loader是什么作用 babel-loader作用
- 微信的网页版为什么能够及时的、实时地收到微信信息（而不用刷新页面）
- 浏览器的同源策略是什么 跨域的方案 介绍一下cors cors设置的是哪个属性 这个头是你请求发出去的，还是服务器设置的
- 浏览器自带的什么属性能检查前端的性能
- 画一个圆有几种方法 不用css怎么做
- Css3新特性有哪些 在项目中用到过哪些
- 原生的ajax怎么写
- 闭包是什么 有哪些使用场景 具体怎么写的叙述一下
- HTTP请求有哪几种方式 get post patch有啥区别（注意patch和post的区别）
- react的工作原理大概是什么 详细讲一下虚拟DOM
二 、围绕项目类：
- 从你的项目经验里面找一段比较好，参与度高的项目介绍一下
- 项目有哪些模块 你做过哪些模块，详细介绍一下项目中的XX功能
- 项目中遇到什么问题，是怎么解决的
1203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
