2024最新前端高频面试题及答案（轻松拿捏面试官）_前端笔试题2023

废话就不多说了直接上题

set和map的区别？

   set：

    （1）成员是不可以重复的

    （2）只有键值没有键名，类似数组

    （3）可以遍历，方法有add,delete,has

  map:

    （1）本质上是键值对的集合，类似集合

    （2）可以遍历，可以跟各种数据格式转换

for in，for of，forEach三者区别？ 

forEach用于遍历数组且不能使用return

for in常用于遍历对象或者json

for of数组对象都可以遍历，遍历对象需要通过object.keys() 

for in循环的是key，for of循环的是value

原生ajax的原理及请求五个步骤？

   流程： 创建xmlhttprequest对象，向服务端发送请求，返回数据数据由js加css处理，从而渲染       dom。

   五大步骤： 创建request对象，设置请求地址和方法，用send发送请求，监听状态变化，接受返回的数据并处理。

浏览器的强缓存与协商缓存 ？

     强缓存：不用服务器通讯直接使用本地缓存资源 

     协商缓存：将所有缓存发送给服务器让服务器判断是否更新，若已更新就会返回更新后的资源，没有更新的话返回304状态码告诉浏览器使用本地缓存就可以，整个过程至少是跟服务器通信一次的。

vue和uniapp的区别及优缺点 ？

      uniapp的写法是基于vue的写法，上手快并且支持app原生功能，uniapp不能使用router,自带路由跳转和请求方式，布局标签使用view text并且支持嵌套原生写法， 可以通过打包实现一套代码可以在多端运行，而vue是不支持的。

优缺点：

      vue语法简单上手容易许多的插件可以实现项目功能采用虚拟dom来管理页面大大提高性能恩特用户体验度较好，内容改变不会加载整个页面，架构较为清晰

    初次加载性能消耗较大，不支持浏览器的前进后退按钮 ，不利于seo优化（可以通过ssr渲染解决问题）所以页面都在一个页面中,对象初始化后新增属性不会更新到视图

CSRF攻击是什么？

     CSRF是指未经用户允许，偷偷使用用户名义发送恶意请求攻击。通常借助用户cookie来骗取服务端信任，特点是并不能获取cookie只能使用发生在第三方域名

cookie如何防范xss攻击？

    xss(跨域脚本攻击)是指攻击者在返回的HTML中嵌套js脚本，为了减轻这些攻击可以在请求头配置setcookie他有二个属性httponly这个属性告诉浏览器可以防止xss，他会禁止js脚本访问cookie

 

Priomse是什么？他有几种方法？解决了什么问题呢？

    priomse主要用来获取异步操作信息，解决了回调地狱问题，本身是有all、reject、resolve、race、使用New创建Priomse实例对象会立即执行，一旦新建执行不会被改变，如果不设置回调的话Priomse内部不会向外界抛出错误，当pening状态时我们不知道目前哪一个阶段。all方法当多个priomse同时执行时其中一个失败就会返回失败，race方法多个priomse组合同时执行时返回响应最快那个。原型上有then catch finally方法，priomse有三种状态pening、fulifed、rejected

http1和http2的主要区别？

     2.0支持二进制分帧，而不是1.0文本格式

     2.0支持服务端推送，可以提前发送资源，而不需要向客户端请求

     2.0在请求头进行压缩，减少请求数量优化了带宽使用率

js的有几种继承方式？

    原型链继承  构造函数继承  组合式继承  寄生组合继承

vue首屏优化是怎么做的？

    vuecli开启打包压缩、路由懒加载  分包 、打包时配置除掉console、 资源过大时候使用CDN加速，不在打包本地

异步操作放再created还是moutend?

    如果某些数据需要初始化渲染时候，比如下拉选择可选值在mouted较好好处是页面初始化快减少用户等待，在created一致性，因为ssr不支持mouted beformouted

splice 和 slice什么区别？

    slice切片的意思根据传入的起始和终止下表，获取该范围数组。

    splice可以根据传入参数个数不同实现删除插入操作，直接操作原数组。

webpack的理解？

      webpack是一个打包js代码的工具，在webpack里面一切文件都是模块，通过loader转换文  件，通过plugin注入钩子函数，loader主要是用来转换js json文件，内部有cssloader eslintloader、lessloader等执行顺序是从下而上从左到右，plugins用解析html文件，最后输出多个模块化组成文件提供浏览器解析，

原型是什么？？原型链是什么？

     使用new创建的对象叫做构造函数，在js里每一个函数都有prototype的属性这个属性是一个原型对象，原型对象上有constructor属性，指向构造函数，通过原型对象可以访问对象的属性和方法，每一个实例对象都proto属性指向的是自己构造函数原型prototype

   原型链是指如果想要查到对象某一个属性，自己和原型上都没有，那就向他原型proto上找，如果还是找不到知道顶层。

数组常用方法那些不会改变原数组那些会改变？

    会改变：pop  push sort  splice    不会改变：concat  some join indexof

js md5加密？

    密码等这些敏感私密的信息在传输明文时信息很不安全，所以会用到md5加班密，可以使用js-md5实现加密

HTML语义化标签的理解？

     header  footer  

     语义化标签是html的标签能够更好的适合搜索引擎检测，有利于爬虫获取信息，利于团队开发

BFC的理解及是什么呢？

      BFC是块级格式化上下文，浮动元素，绝对定位，块级元素会引起BFC

     解决办法：清除浮动，防止margin合并

New做了什么？

      创建临时null对象；绑定原型；执行构造函数；返回临时对象；

构造函数与普通函数有什么区别？

       1.构造函数也是一个普通函数，创建方式和普通函数一样，但构造函数习惯上首字母大写。

       构造函数和普通函数的区别在于：调用方式不一样，作用也不一样(构造函数用来新建实象）

        a.普通函数的调用方式：函数明()   构造函数调用方式：new  来调用

       b. 普通函数没有返回值所以为undefined ,构造函数会创建新对象，并将该对象作为返回值

vue实例的生命周期有哪些并且是出过程？

      beforeCreated这时候vue实例的元素el和数据对象data都还没有进行初始化，还是一个undefined状态

     created阶段vue实例的数据对象data已经有了，可以访问里面的数据和方法，el还没有，也没有挂载dom

     beforeMount这时候vue实例的元素el和数据对象都有了，只不过在挂载之前还是虚拟dom节点

     mounted此时vue实例已经挂载到真实dom上可以操作dom获取节点了

     beforeUpdate响应式数据更新时调用，发生在虚拟dom打补丁之前，适合在更新之前访问现有的dom,比如手动移除已经添加时间监听

     update虚拟dom重新渲染和打补丁之前调用，组成新的dom已经更新，避免在这个钩子函数中操作数据防止死循环

     beforeDestroy 这时候vue实例在销毁前调用，在这里还可以使用，通过this可以访问到实例，可以在这里对不用的定时器清除，解绑事件

     destroyed销毁后调用，调用后所有事件监听会被移除，所有的子实例都会被销毁

你了解vue路由的两种模式吗？

    1. hash模式

            特点：在url地址上有#号

             实现原理是原生haschange事件来实现监听hash值的变化

            window.onhaschange=function(){}

            刷新页面的时候：不会去发送请求，页面不会有任何问题，且不需要后端配合

    2. history模式

            特点：在url地址上没有#号，

            实现原理：利用的是history的api来pushState()来实现的

            刷新页面的时候会发送请求然后会导致页面出现找不到情况，需要后端配合解决

可以说一下防抖节流区别吗？

    防抖：触发高频率后n秒，只执行一次，并且是在触发操作结束后执行，如再次执行就重新计算

    实现思路：首次运行时吧定时器赋值给一个变量，第二次进入时，如果间隔没有超过定时器事件则会清楚定时器，当我们停止下来时，超过一定时间后触发回调

    场景：滚动条事件，搜索

    节流：是将多次执行变成每隔一段时间执行，也可以理解为只执行第一次

    实现思路：设置变量，限制true才能进去函数，进入后变为false，设置定时器在规定时间后进入执行触发，使用闭包存储变量。

    场景：表单提交，发送验证码

二者都是为了降低回调执行频率，及资源

uniapp的渲染机制？

  uniapp分为视图层和逻辑层，逻辑层负责数据存储和执行业务逻辑，视图层负责页面渲染

你都封装过那些组件？

    首页列表，loading，详情，轮播。

有做过动态路由吗？

   实现动态路由有二种方式：一种是存储在前端，另一种存储在后端数据库

   一般我们在登录的时候，根据用户登录的角色返回此角色可以访问的页面路由，前端将路由存储在vuex要持久存储才行createPersistedState（插件持久化存储），我们在路由前置守卫处添加拿到的路由，对页面进行渲染

小程序的分包操作怎么做的？

   因为小程序是有2M的限制这导致我们在开发种会有限制，如果使用分包就会翻10倍，分包是按需假装默认下载主包并且启动主包减少小程序首次下载时间，其次进入分包。在app.js里面全局配置分包subpackages与pages同级，注意点：tabBar必须在主包内，分包不能嵌套，主包不能使用分包资源。

说几个canvas常用api？

     getContext 、 moveTo、lineTo、closePath、stroke、arc

vue2、3有什么区别呢？

   vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.defineProperty()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。

  vue3采用ES6的Proxy反向代理对数据进行劫持，通过reactive()函数给每一个对象都包一层Proxy,通过Proxy监听属性的变化，从而实现对数据的监控，且重写了DOM

总结:2.0的双向绑定不能对全对象监听3.0对这方面做出了优化可以直接监听数组不用在去特意操作数组，通过Proxy可以直接拦截所有对象类型数据的操作通过Reacft.onkey映射，完美⽀持对数组的监听。

vue2如果new一个对象话所有的东西都会被绑定在实例上，这样无论用到还没有用到都会被运行一边，这样会很大的性能消耗，且用户体验度不佳。

vue3利用按需引入减少性能消耗提高用户体验。

vue2的生命周期是

 beforeCreated Created beforeMount  onMounted  beforeUpdate  update             beforeDestroy Destroy

vue3的生命周周期也有所改变

   onBeforeMount  onMounted  onBeforeUpdate onUpdated  onBeforeunMount  onunMount  

2.0在子页面可以直接拿到prop传来的值      3.0则需要setup来传递

Api方面2.0选用选项型api                        3.0则是合成型api

父亲组件传值$emit()

 vue3中有watchEffect监听函数，watchEffect函数不需要传入依赖项，watchEffet非常智能与wacth相比watchEfft的回调函数会被立即执行且必须是响应式依赖，watch需要添加immediate:true，

props中数据是单项的，子组件是不可以改变父亲组件传来的值的，在vue3中子组件如果想改变props的值时需要toRef转化为响应式数据

setup函数，ref函数，reactive函数？

    setup是vue3.0的一个配置项，值是一个函数,所有数、方法等代码都要写在里面且需要retrun，setup有二种返回值第一种如返回一个对象，则对象种的数据、和方法在模板中可以直接使用，第二种返回一个渲染函数，则可自定义渲染内容

vue开发重点注意部分

      2.0和3.0不要混用，如混用setup中访问不到2.0的数据和方法，

      如果有命名重复setup优先，

       setup不能是一个async(异步函数)，因为如果是异步函数返回值则是promise，而不是                   return的对象

以上有不对或者需要改善地方，欢迎指正,谢谢大家。