2024高频率前端面试题汇总

介绍 JS 有哪些内置对象？、

数据封装类对象：Object、Array、Boolean、Number、String
其他对象：Function、Arguments、Math、Date、RegExp、Error
ES6 新增对象：Symbol、Map、Set、Promises、Proxy、Reflect

JS 的基本数据类型和引用数据类型、

基本(原始)数据类型: number、string、boolean、undefined, null, symbol
引用数据类型: Object、Function、Array

什么是标识符？

在JS中，可以自定义命名的东西都属性标识符；
比如变量名，函数名，参数名都是标识符

==和 ===的区别

双等号判断时，只需要值相等
三等号判断时，需要值与类型都相等

函数声明与函数表达式的区别？

函数声明以function关键字开头，接着是必须的函数（变量）名和以逗号分隔的可选的参数列表，再接着就是以大括号封装的函数体。函数声明必须是一个单独的JavaScript语句。
在任何情况下都是其它JavaScript语句的一部分（比如赋值表达式等号的右侧、函数的参数）的函数被称为函数表达式。

javascript 复制代码

var myFunc = function(){};
myFunc(function(){
  return function(){};
});

数组方法pop() push() unshift() shift()

pop()尾部删除
push()尾部添加
unshift()头部添加
shift()头部删除

ajax请求的时候get 和post方式的区别

1）get请求

参数要跟在url后面

安全性不高

传输数据比较小，但速度快

一般用于获取，删除

（2）post请求

参数会放在请求体中，

安全性相对高些

传输数据大，但相对速度慢些

post一般用于修改或者添加

解释什么是Json:

json是一种轻量级的数据交换格式，一般用于数据传递
里边只允许出现双引号
JSON的语法表示三种类型值，字符串, 数组，对象

dom事件委托什么原理，有什么优缺点

事件委托原理: 事件冒泡机制（把子元素的事件行为委托给父级元素执行优点）

优点:

可以大量节省内存占用，减少事件注册
可以实现当新增子对象时，无需再对其进行事件绑定

缺点:

如果把所有事件都用事件代理，可能会出现事件误判

阻止事件冒泡的方法有以下几种

使用event.stopPropagation()方法，常用
使用return false语句，阻止事件默认行为
使用event.preventDefault()方法，阻止事件默认行为
在Vue中，可以在绑定事件的时候事件名后面加上个.stop就可以阻止事件冒泡了。

Javascript的事件流模型都有什么?

"事件冒泡"：事件逐级向上传播
"事件捕捉"：事件逐级向下传播，一直到最具体的
"DOM事件流"：三个阶段：事件捕捉，目标阶段，事件冒泡

split() join() 的区别

split()：将指定的字符串，以某个字符分割，返回一个数组
join(): 将数组中的元素，以某个字符连接，返回一个字符串

JavaScript中如何检测一个变量是一个 String 类型?

typeof 变量
变量.constructor === String
Object.prototype.toString.call(变量) // 推荐使用

javascript 的 typeof 返回哪些数据类型（至少六个）检测类型如下：

string、 number、 boolean 、undefined 、object 、function 、symbol（ES6之后新增的类型）

什么是JS变量提升与块级作用域

变量提升：就是会把变量定义提升到当前作用域的最上面
块级作用域：es5中没有块作用域的概念，只有全局作用域和函数作用域。ES6中新增了块级作用域。块作用域由 { } 包括，if 语句和 for 语句里面的{ }也属于块作用域。在外边不能调用块作用域里边定义的变量

null / undefined 的区别

null值：属于null类型,代表"空值"，代表一个空对象指针；使用typeof运算得到 "object"，所以你可以认为它是一个特殊的对象值。

undefined值：属于undefined类型，当一个声明的变量未初始化赋值时，得到的就是undefined。使用typeof运算得到"undefined"，

请说一下你常用的字符串方法

trim(): 去首尾空格
indexOf(str): 返回 str 在父串中第一次出现的位置，若没有则返回-1
substring(from,to)： 返回字符索引在 from 和 to（不含）之间的子串
valueOf()： 返回原始字符串值
toLowerCase()： 将字符串转换为小写
toUpperCase()： 将字符串转换为大写

原型和原型链

原型： portoType这个属性就是函数的原型
原型链： 1.所有对象都有原型，而原型本身就是对象，所以原型也有自己的原型对象，就形成原型链
如果对象本身没有属性，则就会去原型链上去找
Object原型对象的原型值为null

浅拷贝与深拷贝有何区别？如何实现？

我们在项目中总是需要将一个对象赋值到另一个对象上，但又不想改变原对象，这个时候就需要用到拷贝。

浅拷贝： 拷贝的是原对象的内存地址，将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用，多个指针，都指向同一个内存地址，会改变原对象或原数组
深拷贝： 在内存中把原对象复制一份，创建一个新的对象和数组，将原对象的各项属性的"值"（数组的所有元素）拷贝过来，是"值"而不是"引用"，多个指针，指向不同内存地址，不会改变原对象或原数组
浅拷贝的实现方式有：

（1）直接变量赋值

css 复制代码

let obj = {
    a: 1,
    b: {
        c: 2,
    }
}

Object.assign()；但目标对象只有一层的时候，是深拷贝；

扩展运算符(...)；目标对象只有一层的时候，是深拷贝；

深拷贝的实现方式有：

结合使用JSON.parse()和JSON.stringify()方法。

递归遍历

this指向的各种情况都有什么？

全局作用域中的函数：非严格模式下其内部this指向window

对象内部的函数：其内部this指向对象本身：

构造函数：其内部this指向生成的实例：

由apply、call、bind改造的函数：其this指向第一个参数：

箭头函数：箭头函数没有自己的this，看其外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window。(函数定义时的this，而不是调用时this)

什么是AJAX？如何实现？

ajax通过与服务器进行少量的数据交换，可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 ajax的实现主要包括四个步骤：

markdown 复制代码

    （1）创建核心对象XMLhttpRequest；

    （2）利用open方法打开与服务器的连接；

    （3）利用send方法发送请求；（"POST"请求时，还需额外设置请求头）

    （4）监听服务器响应，接收返回值。

eval是做什么的？

eval 的功能是把对应的字符串解析成 JS 代码并运行

应该避免使用 eval，不安全，非常耗性能（先解析成 js 语句，再执行）
由 JSON 字符串转换为 JSON 对象的时候可以用 eval('('+ str +')');

js延迟加载的方式有哪些？

动态创建 DOM 方式（用得最多）、defer 和 async标签属性

、documen.write 和 innerHTML 的区别

document.write 只能重绘整个页面
innerHTML 可以重绘页面的某一部分

说说你对闭包的理解,什么是闭包

函数嵌套函数
函数内部变量，访问函数外部变量

使用闭包主要是为了设计私有的方法和变量。

优点：是可以避免全局变量的污染，

缺点：参数和变量不会被垃圾回收机制回收,会永远留驻在内存中，是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。

如果销毁一个闭包，可以把被引用的变量设置为 null。即手动清除变量，这样下次 js 垃圾回收机制回收时，就会把设为 null 的变量给回收了。

为什么 JS 是单线程, 而不是多线程 [常考]

单线程是指 JavaScript 在执行的时候，有且只有一个主线程来处理所有的任务。

目的是为了实现与浏览器交互。

我们设想一下，如果 JavaScript 是多线程的，现在我们在浏览器中同时操作一个 DOM，一个线程要求浏览器在这个 DOM 中添加节点，而另一个线程却要求浏览器删掉这个 DOM 节点，那这个时候浏览器就会很郁闷，他不知道应该以哪个线程为准。所以为了避免此类现象的发生，降低复杂度，JavaScript 选择只用一个主线程来执行代码，以此来保证程序执行的一致性。

请解释一下什么是重排与重绘？

重排： 当改变dom结构的时候，就会从dom树开始从新渲染页面，这过程叫重排，比如添加或者删除可见的DOM元素、元素尺寸改变、元素内容改变、浏览器窗口尺寸改变等等
重绘： 当改变样式（不改变几何结构）的时候，它会从render树开始重新开始渲染页面，这过程叫重绘，比如改变颜色，透明等

重绘不会引起重排，但重排一定会引起重绘

怎么减少重排与重绘？

尽量避免操作DOM元素
避免多次修改dom结构或者css,集中处理，只引发一次重绘或者重排

请解释一下什么是防抖与节流

防抖（debounce）

总结：一个按钮，被多次点击，n 秒内函数只能执行一次

节流（throttle）

总结：一个按钮被多次点击，每次触发都要隔间n秒

事件绑定的三种方式

在标签上直接设置事件 onclik="a()"
dom.onclick = function(){}
addEventListener('click',function(){},true)

浏览器对象有哪些

navigator：含有正在使用的Navigator的名称、版本属性，
window：最高等级的对象，拥有整个窗口的属性;
document：包含基于文档内容的属性
location：含有基于当前的URL的属性。
history：包含客户机先前已经请求过的URL。

列举3种强制类型转换(显示类型转换) 和 2种隐式类型转换

强制类型转换

Number('1235')
parseInt('1235')
parseFloat('1235')

隐式类型转换

== === 前者只要值相等就相等，后者先进行转换，只有值和类型都相等，才相等

请说出三种减低页面加载时间的方法

压缩css、js文件
合并js、css文件，减少http请求(精灵图)
外部js、css文件放在最底下
减少dom操作，尽可能用变量替代不必要的dom操作

如何改变this指针的指向？

以使用apply、call、bind方法改变this指向(并不会改变函数的作用域)。

什么是jsonp

jsonp是一种解决跨域请求问题的技术
不足点：它只能是get请求

cookie session区别

Cookie数据存储在用户的浏览器上，而Session数据则存储在服务器上。

Cookie只能存储字符串类型的数据，一般在4KB左右。而Session大小服务器内存限制。

Cookie数据容易被用户修改，因此可能存在安全风险。而Session数据通常更安全，因为它存储在服务器上。

Cookie的生命周期取决于浏览器设置，当浏览器关闭时，Cookie也随之失效。而Session的生命周期由服务器端控制，可以通过设置超时时间来延长其有效期。

Cookie通常用于保存用户信息，如登录状态。而Session用于记录用户会话状态，如用户登录后的操作。

localStorage sessionStorage 区别

sessionStorage（临时存储），大小4kb

localStorage（长期存储）：除非用户手动清除，否则一直存在，即使关闭浏览器，大小5M

CSS 隐藏元素的几种方法（至少说出三种）

Opacity: 0 ----设置透明度来隐藏元素
isibility:hidden; --- 隐藏对应的元素并且挤占该元素原来的空间。
display:none; ----隐藏对应的元素但不挤占该元素原来的空间。
position:absolute; top:-9999px; ---让该元素脱离文档流移出视觉区域.

页面导入样式时，使用 link 和 @import有什么区别？

相同点 : link 和 @import 都是用于引入外部css样式文件

区别:

link: html标签与页面一起加载权重比@import大由于是html标签,不存在浏览器兼容性问题

@import: css语法需要等页面加载完成后才会加载引用的 CSS @import 只有在 ie5 以上才可以被识别权重比link小

rgba()和 opacity 的透明效果有什么不同？

相同点 : rgba()和 opacity 都能实现透明效果，

不同点 : opacity 作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）

display:none 与 visibility:hidden 的区别是什么？

前者隐藏不挤占该元素原来的空间，宽高内边距外边距一起影藏，后者会

怎么样删除一个对象的属性

delete 对象.属性名

json和jsonp的区别?

json是一种数据格式，一般用于数据交互;
jsonp是一种解决跨域请求技术，只能是get请求;

jsonp是否为ajax请求，为什么？

不是正真ajax请求，jsonp是通过动态script标签发的请求，并没有XMLHttpRequest对象

javascript的同源策略（什么是跨域问题）

实际上就是一个网站不能执行其他网站上的网址，是由浏览器同源策略造成的，是浏览器对js施加的安全限制，所谓同源，实际上是指域名，协议，端口都相同，也就是说当，域名或者协议，或者端口不同的时候，就是跨域

请描述一下var、const、let三者的区别

var可以变量提升，const、let不会

var没有块级作用域，const、let存在块级作用域

var可以重复定义变量，const、let不能重复定义，是常量

Promise构造函数是同步执行还是异步执行，那么 then 方法呢？

是异步编程的一种解决方案

创建Promise时，传入的回调函数的执行，是同步的
promise对象上 then函数中的回调执行，是异步的

什么是async/await：

async await 是用来解决异步的

使用关键字async来表示，在函数内部使用 await 来表示异步 async函数返回一个 Promise 对象，可以使用then方法添加回调函数当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句

vue 常用指令

v-model：用于表单元素绑定数据，将数据同步到更新到DOM上，是视图更新

v-on：绑定事件

v-bind：绑定属性

v-cloak：解决vue屏幕闪屏

v-once：只渲染元素和组件一次

computed 和 watch区别

computed是计算属性，有缓存，只有它依赖的属性值改变的时候，它才会进行计算

watch是监听属性，没缓存，只要监听的数据变化了，它就会触发相应的操作

computed不支持异步，watch支持异步操作

$refs属性是什么，有什么用

$refs属性是什么：是一个对象类型，而且是只读的

作用：　通过$refs获取的ref属性标识的元素对象

v-model中有哪些修饰符，分别作用是什么

.number - 输入字符串转为有效的数字
.trim - 输入首尾空格过滤

Vue 的双向数据绑定的原理

1.通过v-model可以实现双向绑定

2.采用数据劫持结合发布者-订阅者模式的方式

3.通过Object.defineProperty()来劫持各个的set（）设置，get（）获取

4.触发相应的监听回调来渲染视图

为什么避免 v-if 和 v-for 用在一起

v-for 比 v-if 优先级高，这意味着 v-if 将分别重复运行于每个 v-for 循环中，带来性能方面的浪费

解决办法，将v-if提取到v-for的最外面

vue.js 的两个核心是什么？

数据驱动和组件化思想

请问 v-if 和 v-show 有什么区别

v-show ：CSS 属性让其显示或者隐藏

v-if ：是直接销毁 DOM 达到让隐藏的效果(删除)

vue 中 key 值的作用

需要使用 key 来给每个节点做一个唯一标识，Diff 算法就可以正确的识别此节点，找到正确的位置区插入新的节点

所以一句话，key 的作用主要是为了高效的更新虚拟 DOM

Vue 中父组件如何监听子组件的生命周期？

父组件 <math xmlns="http://www.w3.org/1998/Math/MathML"> e m i t 触发，子组件 emit触发，子组件 </math>emit触发，子组件on接收

组件间通讯方式

（1）父组件向子组件传值（props将数据自上而下传递）

（2）子组件向父组件传递数据（$emit和v-on来向上传递信息）

（3）eventBus事件总线（ <math xmlns="http://www.w3.org/1998/Math/MathML"> e m i t / emit / </math>emit/on）

（4）vuex

（5）ref / $refs

v-cloak指令的作用

用于防止闪屏，防止页面出现{{ }}

VueRouter 是什么？你平常是怎么用的？

是什么：Vue-Router 是 Vue 官方的路由管理器
作用：为了页面跳转
原理：可以给每一个组件分配路由路径，
则就可以使用rotuer-link或者编程式导航来根据分配的路由路径，
实现组件之间的跳转；

什么是 Vue.nextTick()？

在下次 DOM 更新循环结束之后执行延迟回调。（在一个异步任务完成之后执行）

Vue 组件中 data 为什么必须是函数

防止多个组件实例对象之间共用一个data，产生数据污染；

将组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，拥有自己的作用域，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。

说说对盒子模型的理解

盒子模型分为两种，W3C盒子模型，IE怪异盒子模型

盒子模型是由content，border，margin，padding这四部分组成

准盒子模型=content(内容)+border(边框)+padding(内边距)

怪异盒子模型=content(内容)(已经包含了 padding 和 border)

Vue的路由实现：hash模式和 history模式原理

hash路由后会跟有一个#，当#后面发生变化的时候，浏览器并不会重新发起请求，而是会触发onhashchange事件，他的优点是，只需要前端配置路由表，不需要后端的参与配置；兼容性比较好，所有的浏览器都支持

因为他不会向后端发送任何请求，完全属于前端的一个路由缺点：有一个#，不美观

History是H5中新增是一个特性，允许开发者直接更改前端路由，就是更新浏览器url地址时不会重新发请求,这其中还新增了pushState()和replaceState方法

优点：符合命名规范美观缺点：兼容性不好，需要服务器支持重定向，不然一刷新就会报404的错误

vuex是什么？怎么使用？哪种功能场景使用它？

state：应用程序需要存储的共享状态

Action：修改state的方法，可以异步操作

Mutations：修改state的方法，必须是同步操作

Getters：封装state

Moduel：通过过npm或者yarn安装vuex，在main.js文件中，引入vuex并注册到vue组件实例中，之后在创建一个store文件夹，这里面包含多个状态值，以及$store来访问vuex中的状态

如何水平垂直居中一个盒子？

已知高度可以使用 line-height 等于高度实现垂直居中；使用 text-align:center实现水平居中

display:flex; align-items:center;justify-content:center;

绝对定位的话，给父元素设置定位属性 relative，子元素设置 absolute，然后设置子元素 top:0;left:0;right:0;bottom:0;margin:auto；

px、rem、em、vw的区别？

px是相对于显示器屏幕分辨率而言的，固定的一种单位。

em是相对于父元素的字体大小而言的，譬如父元素字体大小为16px，那么1em=16px，2em=32px。

rem是相对于根元素（html）字体大小而言的，浏览器默认的字体大小都是16px，那么1rem=16px，2rem=32px，可以根据设备的宽度，结合媒体查询（@media）来进行自适应的布局。

vw是窗口的实际宽度，1vw=1% 窗口的实际宽度。

对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可。

对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。

为什么给font-size设置为62.5%：方便换算！

CSS中的定位方式？

绝对定位，参照离自己的最近的，有定位属性的父元素定位。absolute
相对定位，参照自己本身的位置进行定位。 relative
固定定位，基于浏览器窗口定位。 fixed
默认定位，，由左到右，从上往下流式布局。

CSS常见的布局方式？

流式布局，盒子自上而下排列。
弹性布局，flex弹性盒。
grid网格布局。
自适应（响应式布局），使用rem单位。

标准盒模型和怪异盒模型：

W3C 标准盒模型：属性width,height只包含内容content，不包含border和padding。
IE （怪异）盒模型：属性width,height包含border和padding，指的是content+padding+border。

http请求的完全过程

浏览器根据域名解析IP地址

浏览器于web服务器建立一个TCP连接

浏览器给web服务器发送一个http请求（请求行、请求方法、get post url 协议版本）

服务器端响应HTTP请求，浏览器得到html代码 (状态行、响应头部、响应数据)

关闭TCP连接，浏览器对数据进行解析，对页面进行渲染呈现给用户

http协议和https协议

是一个超文本传输协议，基于请求与响应，无状态的，应用层的协议，互联网上应用最为广泛的一种网络协议

基于HTTP协议，通过SSL或TLS提供加密处理数据、验证对方身份以及数据完整性保护

更改this指向的三个方法

call()方法 apply()方法 bind()方法

三者区别

bind 会有一个返回值，返回值是个函数，因此要加上()才能调用；call，apply是没有返回值，当改变函数this指向的时候，不需要加()就会执行

call 传递参数的时候是一个一个传递的， apply是传递一个数组

ES6新特性

箭头函数
class类的继承
const、let变量定义
模板字符串
结构赋值
Promise对象
字面量简写（当属性值与属性名一样时）
拓展运算符
import和export，之前是commonJS的规范

vue有哪些内置组件

component: 用来动态地编程式地使用组件。
keep-alive: 用来缓存组件的状态，避免重新渲染。
transition: 用来包裹需要过渡效果的元素。
transition-group: 类似于 transition，但用于同级元素的过渡。

vue有哪些路由钩子

（1）全局守卫

①前置：router.beforeEach（(to,from,next)=>{ }）

②后置：router.afterEach（(to,from)=>{ }）

（2）路由独享守卫

router.beforeEnter:（to,from,next)=>{ }

（3）导航守卫

①router.beforeRouteEnter（to,from,next）{ }

②router.beforeRouteLeave（to,from,next）{ }