2023前端面试题汇总（最新）-持续更新中_前端面试题2023

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新Web前端全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip1024c （备注前端）

正文

应用场景：搜索框、输入框、手机邮箱验证等

思路：利用定时器，每次触发先清除定时器（）
底层代码实现：

const box = document.querySeleter(“.box”)
let i = 1
function mouseMove() {
box.innerHTML = i++
}
function debounce(fn, t) {
let timer
// return 返回一个匿名函数
return function() {
if(timer) clearTimeout(timer)
timer = setTimeOut(function() {
fn()
}, t)
}
}
box.addEventListener(‘mousemove’, debounce(mouseMove, 500))

节流（throttle）：单位时间内，频繁触发事件，只执行一次

应用场景比较多的是：鼠标经过、页面缩放、滚动条滚动scroll事件、下拉刷新等高频事件
思路：利用定时器，判断是否有定时器，如果有等定时器结束再开启新的定时器
代码实现：

const box = document.querySeleter(“.box”)
let i = 1
function mouseMove() {
box.innerHTML = i++
}
function throttle(fn, t) {
let timer
// return 返回一个匿名函数
return function() {
if(!timer) {
timer = setTimeOut(function() {
fn()
// 清空定时器 此处使用timer=null清除定时器是因为写在了定时器里面，setTimeout中是无法清除定时器的，因为定时器还在运作
timer = null
}, t)
}
}
}
box.addEventListener(‘mousemove’, throttle(mouseMove, 500))

2. js闭包

什么是闭包：闭包就是能够读取其他函数内部变量的函数

function fn0 () {
const aaa = 0
return function() {
return aaa
console.log(‘打印’, aaa)
}
}

闭包存在意义:

可以延长变量的生命周期4可以创建私有的环境

闭包好处：

可以读取其他函数的内部变量

将变量始终保存在内存中

可以封装对象的私有属性和方法

坏处：

消耗内存、使用不当会造成内存溢出问题

3. Vue相关总结

3.1 vue中的data为什么是一个函数？（面试常问）

Vue 中的 data 必须是个函数，因为当 data 是函数时，
组件实例化的时候这个函数将会被调用，返回一个对象，
计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，
他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变。

简单来说，就是为了保证组件的独立性和可复用性，如果 data 是个函数的话，
每复用一次组件就会返回新的 data，类似于给每个组件实例创 建一个私有的数据空间，
保护各自的数据互不影响

3.2 MVC 和 MVVM的区别

MVC：M（model数据）、V（view视图），C（controlle控制器）
缺点是前后端无法独立开发，必须等后端接口做好了才可以往下走；
前端没有自己的数据中心，太过依赖后台

MVVM：M（model数据）、V（view视图）、VM（viewModel控制数据的改变和控制视图）
html部分相当于View层，可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM元素，
当ViewModel对Model进行更新时，通过数据绑定更新到View。
Vue实例中的data相当于Model层，而ViewModel层的核心是Vue中的双向数据绑定，
即Model变化时VIew可以实时更新，View变化也能让Model发生变化

MVVM与MVC最大的区别就是：它实现了View和Model的自动同步，
也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，
而是改变属性后该属性对应View层显示会自动改变

3.3 v-model 原理

是采用数据劫持结合发布者-订阅者模式的方式，
通过Object.defineProperty()来劫持各个属性的setter，getter，
在数据变动时发布消息给订阅者，触发相应的监听回调从而达到数据和视图同步。

3.4 vue中的data为什么是一个函数？（面试常问ÿ