2021年最新面试题总结，结合今年身边的朋友，和自己的自身面试经历总结的面试题。
如果有对你有帮助的地方，请帮忙点个赞哦。
1. js深拷贝和浅拷贝点击跳转
2. 怪异盒模型和标准盒模型？
- 标准盒模型：box-sizing：context-box；总宽度（高）：内容+padding+border+margin；
- 怪异和模型：box-sizing：border-box；总宽度（高）：内容（内容包含border+padding）+margin；
3. 什么是DOM？
- 文档对象模型，是针对HTML和XML的一个应用程序接口，描述了一个具有层次化特点的节点树，允许开发人员增删改查页面的某些部分。
4.什么是虚拟DOM？
- 之前更改DOM：通过遍历查询dom树的方式找到需要修改的dom，然后修改样式行为或者结构，这种方式比较消耗性能。
- 虚拟dom：虚拟dom就是js对象，抽象表示dom结构，节点发生变化，就是进行js数据的比较，要比dom节点进行比较消耗小很对，并且可以更好的计算出最小变化，减少重拍重绘，实现渲染节流。
说到虚拟dom，而diff算法，也是虚拟dom的核心。
5.DOM和虚拟DOM的区别是什么?
- 虚拟DOM不会进行回流与重绘操作。
- 虚拟DOM进行频繁修改，然后一次性比较并修改真实DOM中需要改的部分，最后在真实DOM中进行排版与重绘。（减少很多DOM排版与重绘损耗）
- 真实DOM频繁排版与重绘的效率特别低。
- 虚拟DOM可以有效降低大面积的重排重绘，因为最终与真实的DOM比较差异，只渲染局部。
6. vue的生命周期？
- beforeCreate：vue进行初始化事件、生命周期，data和methods中的数据都还未初始化。
- created：Vue实例观察的数据对象data和methods已经配置好。
- beforeMount：模板已经在内存中编辑完成了，但还未渲染在页面。
- mounted：内存中的模板已经真实的挂载到页面中。
- beforeUpdata：data中的数据更新，而页面中显示的数据还是旧的。
- updated：页面中的数据和data中的数据保持同步。
- beforeDestroy：vue实例从运行阶段进入销毁阶段，实例上的data和methods，过滤器，指令等还可以用，未真正销毁。
- destroyed：组件完全销毁，组件里的data和methods，过滤器，指令等也都不可在用了。
7.react的生命周期?
- List item
8. 跨域的原因？
- 由于浏览器的同源策略造成，是对javaScript的一种安全限制，发送请求，不是不响应，而是返回结果被浏览器限制了。
- 同源策略：协议，域名，端口都要一致。
9. 跨域的解决方案？
- CORS解决跨域，配置请求头，服务器端允许。
- vue项目解决跨域，在项目config目录下面 有个index文件，在proxyTable这个对象里配置相关属性。
10. vue、react、angular三者的异同点？
11. vue2.0和vue3.0的区别？
- 重构响应式系统：使用proxy替换Object.defineProperty。
- 新增composition API，更好的逻辑复用和代码组织。
- 重构Virtual DOM
9. this的指向点击跳转
10. 讲一讲vuex？点击跳转
11. vue如何自定义指令？点击跳转
12. vue常用的指令有哪些？
- v-model、v-text、v-html、v-if、v-else、v-show、v-for、v-on、v-bind、v-once、v-pre
13. webpack如何构建vue项目？点击跳转
14. 讲一讲你对promise的理解？点击跳转
15. 讲一讲你对闭包的理解？点击跳转
16. 节流防抖？点击跳转
17. 讲一讲双向绑定的原理？
- vue数据双向绑定是通过Object.defineProperty()数据劫持结合发布者-订阅者模式的方式来实现。
- vue实例初始化数据时，会循环遍历data中的属性，使用Object.defineProperty()，重新定义所有属性，重写数据的get和set方法增加一个拦截的功能。
- 获取数据会调用重写后的get方法，进行依赖收集（当前组件的watcher，也称为订阅者）；
- 当数据发生变化，就会触发重写后的set方法通知相关依赖进行更新。
18.前端需要注意那些SEO优化？
- 语义化的html，符合w3c标准。
- 非装饰的图片必须使用alt。
- 优化和压缩代码，网站速度也是搜索引擎排序的重要指标。
- 不同页面的title要有所不同。
- Descripttion内容高度概括，不过分堆叠关键词。
- Keyswords列举出重要的关键词。
19.如何进行网站的性能优化？
- 减少http请求。
- 图片合并（多张精灵图共同使用一张）。
- js和css文件的合并和压缩代码。
- css放在页面最上面，js放在文件最下面（或者异步引入）；
- 避免页面重定向。
- 对一些常用的组件，方法进行封装。
- 如果有图片上传，对图片进行压缩。
- 减少重排重绘。
- 按需加载资源。
20.对浏览器内核的理解。
- 渲染引擎：获得页面的内容整理讯息，以及计算网页的显示方式，输出到显示器。
- Js引擎：解析和执行javaScript来实现网页的动态效果。
21.html5的离线缓存怎么使用？
22.行内元素、块级元素、空元素有哪些？
- 行内元素：a,i,span,img,input,select等。
- 块元素：div,ul,li,h1~h6,p,table,form等。
- 空元素：br,hr,img,img,input,link等
23.行元素和块元素的区别？
- 块:独占一行，默认宽度自动填满父元素。行:不会独占一行，宽度随内容变化。
- 块：可以设置宽高。行：不可以设置宽高。
- 块：可以设置margin，padding。行：水平方向的margin和padding生效，垂直方向的不生效。
24.css sprite是什么？有什么优缺点？
- 减少网页的http请求，提高性能
- 减少图片的字节，多张图片合成一张图片的字节小于多张图片的字节总和。
- 更换主题颜色方便，一张图更改，全更改。
- 图片合成稍微麻烦，需要每个单元在背景图的精确位置。
- 更改单个单元图片麻烦，不过可以选择往后继续添加单元图。
25.css3有哪些新特性？
- 新增了css3选择器，弹性布局，媒体查询，个性化字体，圆角，渐变，阴影，背景效果，边框效果，旋转，倾斜，位移，缩放，动画等。
26.PNG、GIF、JPG的区别，以及如何选择？
- PNG:png8颜色上限256，文件小，支持alpha透明度，无动画。适合图标，背景，按钮。
- GIF:8位像素，256色，无损压缩支持简单动画。适合简单动画的使用。
- JPG:256色，有损压缩，可控制压缩质量，不支持透明。是个照片。
27.position的值有哪些？其本质的区别在哪里？
- relative 相对定位：不脱离文档流，参照元素本身的位置进行偏移。
- absolute 绝对定位：脱离文档流，参照最近的已经定位的父级元素，进行位置偏移。
- fixed 固定定位：脱离文档流，参照浏览器窗口进行偏移。
28.异步加载js的方式有哪些？
- <script>的async属性的值设置为async。
- <script>的defer属性的值设置为defer。
- 动态创建<script>。
29.js延迟加载的方式有哪些？
- 使用setTimeout定时器延迟加载。
- 把js放在最后加载。
30.箭头函数需要注意的地方？
- 箭头函数没有argument，可以使用rest代替。
- 不能当做构造函数，所以不能使用new命令。
- 箭头函数没有自己的this，内部的this指向的是外层作用域的this。
31.写一个冒泡排序，以及如何优化？点击跳转
32.常见的web安全以及防护原理？点击跳转
33.那些操作会造成内存泄漏？
- 闭包
- 全局变量引起内存泄漏。
- 没有清理的DOM元素。
- 定时器和回调函数。
34.null和undefined的区别？
- 两者都是代表空，== 时相等， ===时不相等。
- Null是一个空指针对象。
- Undefined是当一个变量声明了未赋值，得到的就是undefined。
35.js怎么实现继承？点击跳转
36.JS实现一个数组的去重？
- 利用Set去重在用Array.form()函数转换为数组（Array.from(new Set(数组))）。set：集数据结构，类似数组，且成员都是唯一。
- 利用扩展运算符[…new Set(数组)]。
- 双层for循环。
- indexOf去重，创建一个新数组，for循环，使用indexOf判断新数组中是否存在该元素，如果不存在，push进新数组。
37.如何删除cookie？
- document.cookie =name=0; expires=+ 过期时间;
38.$route 和 $router的区别？
- router：相当于一个全局的路由器对象，李敏包含很多的属性和子对象。
- route：相当于正在跳转的路由组件对象，可以获取到name，path，params，query等。
39.vue中如何自定义过滤器？点击跳转
40.vue等单页面的优缺点？
- 优点：数据驱动，组件化，轻量级，简洁，高效，模块友好，页面切换快。
- 缺点：不支持低版本浏览器，不利于SEO优化，首屏加载慢。
41.es6中filter、map、findIndex、find的应用场景？
- filter：返回数组内所有满足条件的元素，如果都不满足返回空数组。
- map：循环一个数组，可以批量改变数组中的值。map方法不会改变原始值，返回一个新的数组。
- findIndex：查找数组中符合条件的第一个元素，返回该元素下标，如果没有符合条件的，则返回-1。
- find：查找数组中符合条件的第一个元素，返回该元素，如果没有符合条件的，则返回undefined。
42.移动端300毫秒是什么原因？
- 原因：在ios中点击一个链接时，因为用户可以进行缩放或者单击跳转到该链接的操作，当用户点击一次后用户浏览器不能立刻判断用户是想要单击跳转还是进行双击的操作。所以就有里这个300毫秒的延迟。
- 解决：1.可以通过禁止浏览器的缩放。2.或者检测到touchend事件后，通过DOM事件立即触发模拟一个click事件，并把真正的click事件阻塞掉。
43.js中的基本数据类型和引用数据类型，两者的区别是什么？
- 基本数据类型：number，staring，undefined，null boolean等。
- 引用数据类型：function，array，object，data，math。
- 区别：两种数据类型的区别是js在数据的储存方式上有所不同。深浅拷贝有讲到js数据的存储
44.什么是事件冒泡？
- 从当前触发的事件目录一级一级往上传递，依次触发，直到document。
45.什么是捕获事件？
- 从document开始触发，一级一级往下传递，依次触发，直到传递带真正事件目标为止。
46.什么是事件流？
- 当一个html元素产生一个事件时，该事件会在元素节点与根节点之前传播，这个传播的过程就是事件流。（也就是事件冒泡和事件捕获的过程。）
47.什么是事件委托？
- 就是把原本绑定在自身的事件绑定到父元素上，让父元素负责事件监听，原理就是事件冒泡。
- 事件冒泡的优点：1.减少事件的数量，提高性能。2.预测未来元素，新添加的元素依旧可以触发这个事件。3.避免内存的外泄（低版本的IE，删除元素，事件没有移除，会内存泄漏）
48.移动端1px的问题？
- 由于不同的手机有不同的像素密度导致的。
- 如果移动端屏幕的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动屏幕下会显示成2px。可以使用伪元素+transform解决。
49.移动端ios安全区域的问题？点击跳转
50.常用的数组方法（含es6）？
- map：循环数组，有返回值，不会改变原数组。
- reduce：循环数组，回调函数参数（初始值或者上一次函数返回值，当前元素值，当前索引，原数组）。简单用法：求和求乘积。复杂用法：数组去重，数据扁平化，元素出现次数计数。
- filter：循环数组，返回满足条件的每一项，组成一个新的数组。不会改变原始数组。
- forEach：循环数组，总是返回undefined，会改变原数组。
- some：检测数组至少有一个元素满足条件，遇到满足条件的返回true，后续代码不再执行，如没有一个元素满足条件，返回false。
- every：检测数组的每一项，全部满足条件返回true，否则返回false。
- find：查找数组中符合条件的第一个元素，如果没有符合条件的元素，返回undefined。
- findIndex：查找数组中符合条件的第一个元素，返回该元素下标，如果没有符合条件的元素返回-1。
- concat：连接两个或者多个数组。不会改变原数组。
- join：将数组中的每个元素都转为字符串，用自定义的连接符拼接。
- push：向数组后方添加一个或者多个元素，依次添加，会改变原数组，且返回改变后数组的长度。
- shift：把数组的第一个元素从其中删除，并返回第一个元素的值。数组为空时，shift方法不做任何操作，返回undefined
- unshift：向数组的开头添加一个或者更多元素，并返回新的长度。
- slice：截取数组，从开始下标未知到结束下标位置，如不指定结束位置则截取到结束部分。不会改变原数组，返回截取值。
- form：将伪数组转换为真正的数组。
51.什么是模板字符串？
增强版的字符串，用反引号（`）标识。他可以当做普通字符串使用，也可以定义多行字符串，或者在字符串中嵌入变量。
52.js判断是数组还是对象？
- instanceof：console.log(变量 instanceof 要检查的类型);
- constructor：console.log(变量.constructor === 要检查的类型) 缺点：不能判断null和undefined;
- Object.prototype.toString.call()：var res = Object.prototype.toString.call(变量); //[object Array] 数组第二个数就是数据类型。
53.js如何判断是个变量的数据类型？
- instanceof：不能判断基础数据类型，判断复杂数据类型，要先判断object。
- Object.prototype.toString.call()：同上52题。
- constructor：不能判断null和undefined。
- typeof：只能判断基础数据类型，并且不能判断null（返回object）。
54.forEach和map的区别？
- forEach：没有返回值，会修改原数组。
- map：有返回值，原数组不改变，得到一个新的数组并返回。
55.vue中的路由守卫？点击跳转
56.vue中的keep-alive和相关生命周期？点击跳转
57.vue中事件冒泡如何解决？
- vue阻止事件冒泡@click(事件名).stop。
- vue阻止默认行为@contextmenu(事件名).prevent。
58.vue中在页面循环一个简单的数组？加key和不加key那个性能更好。
- key的作用：在虚拟DOM的diff算法中，使用key来给每个节点做唯一的标识，使得虚拟dom更加高效。
- 简单数组的话：不加key性能更好。
59.js获取页面中的多个a标签，会获取多少？
60.当出现跨域的情况时，后端能操作浏览器的cookie吗？
在请求上加个 withCredentials: true 即可！
61.vue中的diff算法。点击跳转
62.nextTick的作用？
- 保证当前视图更新完毕
- 获取最新dom
63.nextTick的原理？
- nextTick 方法主要是使用了宏任务和微任务,定义了一个异步方法.多次调用 nextTick 会将方法存入 队列中，通过这个异步方法清空当前队列。
64.说一下请求状态码？
- 1xx：接受的。
- 2xx：请求正常处理完毕。
- 3xx：需要进行附加操作以完成请求。
- 4xx：客户端请求出错，服务器端无法继续处理。
- 5xx：服务器处理请求出错。
65.cookie和loaclStorage和sessionStorage的区别？
- cookie：有效期是可以设置的，关闭浏览器后失效，存储量较小4kb左右。
- sessionStorage：关闭浏览器后失效，存储容量在5mb。
- localStorage：在不进行手动删除的情况下会一直有效。
66.一个行内块元素，设置定位会偏移吗？
- 会
67.let const var的区别？
- var 存在变量提升，可重复声明
- let 不存在变量提升，在同一作用域不允许重复声明，存在暂时性死区，存在块级作用域。
- const 不存在变量提升，在同一作用域不允许重复声明，存在暂时性死区，存在块级作用域，只读不可修改。
68.get和post请求的区别？
- GET在浏览器回退时是无害的，而POST会再次提交请求。
- GET产生的URL地址可以被Bookmark，而POST不可以。
- GET请求会被浏览器主动cache，而POST不会，除非手动设置。
- GET请求只能进行url编码，而POST支持多种编码方式。
- GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
- GET请求在URL中传送的参数是有长度限制的，而POST么有。
- 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
- GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
- GET参数通过URL传递，POST放在Request body中。
- GET和POST的底层都是TCP/IP，也就是说GET/POST都是TCP链接。
- GET产生一个TCP数据包，POST产生两个TCP数据包。
69. 手写map方法！
Array.prototype.newMap = function (fn) {
// 首先判断传入的第一个参数是否为函数, 如果不是则抛出错误
if (Object.prototype.toString.call(fn) !== "[object Function]") {
throw ("The first argument must be a function")
}
// 定义一个空数组用作保存数据使用
let resultArray = [];
// currentArr指向this, this也就是调用该map方法的数组本身
let currentArr = this;
for (let i = 0; i < currentArr.length; i++) {
// 循环遍历, 调用传入的函数, 并将返回值保存在result中
resultArray.push(fn(currentArr[i], i, currentArr));
}
// 返回result
return resultArray
}
var arr = [1, 2, 3, 4, 5];
var a = arr.newMap((item, index, arr) => {
return item+=1;
});
console.log(a);//[2, 3, 4, 5, 6]
70.sum(2,3)和sum(2)(3)两个方法输出相同的值
function sum() {
var num = arguments[0];
if (arguments.length === 1) {
return function (sec) {
return num + sec;
}
} else {
var num = 0;
for (var i = 0; i < arguments.length; i++) {
num = num + arguments[i];
}
return num;
}
}
console.log(sum(2,3));// 5
console.log(sum(2)(3)); // 5
71.一个方法接收一个字符串，字符串的前一个字母出现的次数一定要多于后一个字母的数量，否则返回false!
function str(e){
var arr = [...new Set(e)];
for(let i=0;i<arr.length;i++){
let s1=e.slice(e.indexOf(arr[i]),e.lastIndexOf(arr[i])+1);
let s2=e.slice(e.indexOf(arr[i+1]),e.lastIndexOf(arr[i+1])+1);
if(s1.length!==s1.split(arr[i]).length-1 || s1.length<=s2.length){
return false;
}
}
return true;
}
var res = str('aaaaaaaaaaabbbbbbbbbffffffffrrrrrrrttttttdddeew');
console.log(res);//true
72.computed和watch的区别？
computed：是计算属性，依赖其它属性值，并且computed的值有缓存，只有它依赖的属性值发生改变，下一次获取computed的值时才会重新计算computed的值；
watch:更多的是观察的作用，支持异步，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作；
73.什么时候使用comouted和watch？
computed应用场景：需要进行数值计算，并且依赖于其它数据时，应该使用computed，利用computed的缓存特性，避免每次获取值时都需要重新计算；
watch应用场景：需要在数据变化时执行异步或开销较大的操作时，应该使用watch，使用watch选项允许执行异步操作，限制执行该操作频率，并在得到最终结果之前，设置中间状态，这些计算属性无法做到。
74.浏览的js兼容你知道的有哪些？点击跳转
75.浏览器的视图兼容有哪些？
76.微信和h5的区别？
77.说一下你对mvvm的理解？点击跳转
78.vue如何定义动态路由？点击跳转
79.js的进程和线程？点击跳转
80.手写call、apply、bind的使用。点击跳转
81.说一下变量的解构。
允许按照一定的模式（结构），从数组或对象中提取值，对变量进行赋值，这种被称为解构。
82.使用*利用正则隐藏手机中间4位。点击跳转
83.map、filter各自有什么作用？
map：生成一个新数组，遍历原数组的每一项，获取每一个元素，对数据进行操作，然后返回每一项放入到新数组中。
filter：生成一个新数组，便利原数组每一项，将复核条件的元素放入新数组。
3545
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
