2023年前端面试题汇总(21年前端面试题)

2023年前端面试题汇总 一：JavaScript 1、闭包是什么？利弊？如何解决弊端？

推荐整理分享2023年前端面试题汇总(21年前端面试题)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:2023年前端面试题vue,前端年后面试真题,2023年前端面试题vue性能优化,2023年前端面试八股文,2023年前端面试八股文,2023年前端面试题vue,2023年前端面试题,2023年前端面试题,内容如对您有帮助，希望把文章链接给更多的朋友！

闭包是什么：JS中内层函数可以访问外层函数的变量，外层函数无法操作内存函数的变量的特性。我们把这个特性称作闭包。

闭包的好处：

隔离作用域，保护私有变量；有了闭包才有局部变量，要不然都是全局变量了。让我们可以使用回调，操作其他函数内部；变量长期驻扎在内存中，不会被内存回收机制回收，即延长变量的生命周期；

闭包的弊端：内层函数引用外层函数变量，内层函数占用内存。如果不释放内存，过多时，易引起内存泄露。

解决办法：无法自动销户，就及时手动回收，使用后将函数的引用赋null。

2、深度拷贝

1、深拷贝与浅拷贝的区别？

拷贝的层级不同，深拷贝是指每一层数据的改动都不会影响原对象和新对象，浅拷贝只有第一层的属性变动不互相影响，深层的数据变动还会互相影响。

浅拷贝：Object.assign深拷贝：JSON.stringify和JSON.parse

2、JSON的stringify和parse处理的缺点？

如果对象中有属性是function或者undefined，处理后会被过滤掉；如果属性值是对象，且由构造函数生成的实例对象，会丢弃对象的constructor；

3、$.extend()

使用jquey的extend方法不仅能实现深度拷贝，还能实现深度合并。具体用法

深度拷贝：$.extend({},targetObject) // targetObject是需要复制的对象

深度合并：$.extend(true,{},targetObject1,targetObject2) // 可以将两个对象深度合并后再返回出一个新对象

3、如何判断空对象？如何区分数据类型？

    判断空对象

1、用JSON的stringify和parse转成字符串后，跟'{}'对比；2、用ES6，判断Object.keys(targetObject)返回值数组的长度是否为0；3、用ES5，判断Object.getOwnPropertyNames(targetObject)返回的数组长度是否为0；

   区分数据类型

let a = [1,2]Object.prototype.toString.call(a) // '[object Array]' 4、如何改变this指向？区别？call/applylet a = { name: 'sunq', fn:function(action){ console.log(this.name + ' love ' + action); }}let b = {name:'sunLi'}// 正常的this指向a.fn('basketball'); // sunq love basketball// 改变this指向，并体现call与apply的区别a.fn.apply(b,['football']); // sunLi love footballa.fn.call(b,'football'); // sunLi love football// call 和 apply 区别: call 和 apply 都是可以改变this 指向的问题, call 方法中传递参数要求一// 个 一个传递参数。 但是apply 方法要求传递参数是一个数组形式。bind// 还是上面的示例，bind也可以实现call和apply的效果。// bind的不同之处在于bind会返回一个新的函数。如果需要传参，需要再调用该函数并传参a.fn.bind(b)('piano'); // sunLi love piano5、沙箱隔离怎么做？

使用iframe可以实现，变量隔离

6、浏览器存储，他们的区别？localStorage：永久保存，以键值对保存，存储空间5MsessionStorage：关闭页签/浏览器时清空cookie：随着请求发送，通过设置过期时间删除session：保存在服务端

localStorage/sessionStorage是window的属性，cookie是document的方法

7、常用的数组方法有哪些？改变原数组：push、pop、shift、unshift、sort、splice、reverse不改变原属组：concat、join、map、forEach、filter、slice

    slice和splice的区别？

slice切片的意思，根据传入的起始和终止下标，获取该范围数组。splice可根据传入参数个数不同实现删除、插入操作，直接操作原数组。第1个参数为起始下标，第2个为删除个数，第3个为要增加的数据。

数组如何滤重？

8、Dom事件流的顺序？什么是事件委托？

当页面上的一个元素被点击时，先从document向下一层层捕获到该元素。然后再向上冒泡，一层层触发。

事件委托是将事件写在父级元素上，e.target是事件捕获时那个最小的元素，即选中的元素。所以可以根据e.target操作选中的元素。这样不需要给每个子元素绑定事件，代码更加简约。

9、对原型链的认识？

js通过原型链模拟实现面向对象，比如通过实例化一个构造函数可以给每个对象挂载自己专属的属性，通过给类的prototype上赋方法是所有对象所共有的方法。每次实例化不再赋值原型链上的方法。

10、防抖/节流的区别？

区别：防抖只会在最后一次事件后执行触发函数，节流不管事件多么的频繁，都会保证在规定时间段内触发事件函数。

防抖:

原理是维护一个定时器，将很多个相同的操作合并成一个。规定在delay后触发函数，如果在此之前触发函数，则取消之前的计时重新计时，只有最后一次操作能被触发。例如：实时搜索的input，一直输入就不发送。

let input = document.querySelector("input");let time = null;//time用来控制事件的触发input.addEventListener('input',function(){ //防抖语句，把以前的定时删除，只执行最后一次 if(time !== null){ clearTimeout(time); } time = setTimeout(() => { console.log(this.value);//业务实现语句，这里的this指向的是input },500) })节流：

原理是判断是否达到一定的时间来触发事件。某个时间段内只能触发一次函数。例如：在指定的时间内多次触发无效

//节流 function throttle(fn, time) {//连续触发事件 规定的时间 let flag = false; return function () { //使用标识判断是否在规定的时间内重复触发了函数，没有就触发，有就不触发 if (!flag) {//不为假时 执行以下 fn();//触发事件 flag = true;//为真 setTimeout(() => {//超时调用（在规定的时间内只执行一次） flag = false; }, time); } } } mybtn.onclick = throttle(btn, 3000);//单击事件 节流(btn,3s时间)二：Html1、重绘和重排（回流/重构/重载）是什么？如何优化？样式的调整会引起重绘，比如字体颜色、背景色调整等Dom的变动会引起重排，比如定位改动、元素宽高调整

避免循环插入dom，比如table的行。可以js循环生成多个dom后，一次性插入。

2、html5有哪些新特性？本地存储，比如localStorage、sessionStorage语义化标签，如header、footer、nav等，使代码结构清晰，利于seocanvassvgweb worker，在主线程外再创建一个线程，可与主线程交互拖放功能三：CSS1、如何实现一个宽度不固定的上下左右居中的弹框？方法一：.pop{ width: 300px; height: 300px; position: fixed; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid red;} 方法二：.chartLengend { // 父元素 width: 60px; height: 40px; position: relative; .line { // 子元素 width: 100%; height: 3px; background-color: #DEA182; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 2px; }}2、伪类和伪元素区别？伪类本质上用于弥补常规css选择器的不足，因为如果没有我们可能需要多写一个class，所以叫伪类.class:last-child{}.class:first-child{}a:link {color:green;}a:visited {color:green;}a:hover {color:red;}a:active {color:yellow;}伪元素本质上是创建了一个有内容的虚拟元素，如::before   ::after。因为相当于多了一个元素/节点，所以叫为元素// :before用于在某个元素之前插入某些内容。// :after用于在某个元素之后插入某些内容。cssp:before{ content:"Read this: ";}html:<p>I live in Ducksburg</p>页面展示：Read this: I live in DucksburgF12看dom中：beforeRead this: I live in Ducksburg四：Vue1、单页面应用是什么？优缺点？如何弥补缺点

单页面对一个入口DOM通过路由去更改内容，整个应用只有一个html页面

SPA优点：用户体验好，没有页面切换就没有白屏情况；

SPA缺点：首屏加载慢，不利于SEO

SPA弥补：通过压缩、路由懒加载缓解首屏慢；通过SSR 服务器端渲染解决SEO问题；

2、组件及通信方式有哪些？

2.1、什么是组件？

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：