导航菜单
首页 >  前端考试  > 2023前端面试题汇总(最新)

2023前端面试题汇总(最新)

目录1. 防抖和节流2. js闭包3. Vue相关总结3.1 vue中的data为什么是一个函数?(面试常问)3.2 MVC 和 MVVM的区别3.3 v-model 原理3.4 vue中的data为什么是一个函数?(面试常问)3.5 v-if 和 v-show的区别3.6 v-for中为什么要有key3.7 打包后 dist 目录过大,解决办法?3.8 computed 和 watch 的区别3.9 vue组件之间的数据传递3.9.1 父 传 子3.9.2 子 传 父3.9.3 全局事件总线:可以实现任意组件间的数据传递4.0 vue原型 和 原型链 4.1 深拷贝 与 浅拷贝4.2 $nextTick的作用4.3 Vue生命周期4. ES6面试题4.1 var let const 区别4.2 解构赋值4.3 如何利用es6快速的去重?4.4 Promise 面试题 以下代码的执行结果是?4.5 跨域的解决方法4.5.1. webpack 里的proxy4.5.2. jsonp (需要后端支持 )4.5.3. webpack plugin (插件)4.5.4. cors (后端解决) 4.6 git命令(实际工作中常用)4.6.1 基本4.6.2 分支明细4.6.3 分支命令4.6.4 暂时保存更改的代码4.6.5 代码回退 4.7 get与post请求有什么区别4.8 cookie、localStorage、sessionStorage的区别4.9 async 和 await 的区别5.0 setTimeout 时间为0, 以及误差的原因5.1 求数组的最大值?5.2 求数组的最小值?5.3 数组去重5.3.1 利用filter 、indexof5.3.2 sort 、splice 实现去重5.3.3 最短的方法,使用new Set([...])5.3.4 indexOf 、push 实现5.3.5 对象属性名唯一性实现 数组去重 5.4. 数组求和5.5 生成从0 到 指定数字的数组 5.6 js的数据类型5.7 js的变量提升5.8 this指向5.9 map和forEach的区别6.0 箭头函数和普通函数的区别?6.1 es6新增6.2 数组方法汇总6.3 项目性能优化方案6.4 forEach 和 map的区别6.5 forEach 和 for 循环的区别6.6 Vue2 和 Vue3 的区别6.7 call、apply、bind使用和区别

1. 防抖和节流

防抖(debounce):单位时间内,频繁触发事件,只执行最后一次。 比如点击按钮,2秒后调用函数,结果在1.5秒的时候又点了,则会重新计算2秒后在调用函数。

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

思路:利用定时器,每次触发先清除定时器() 底层代码实现:

const box = document.querySeleter(".box")let i = 1function 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 = 1function 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 = 0return function() {return aaaconsole.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通过通过模板语法来

相关推荐: