2022前端面试小结

前言

金三银四，因为各种原因我离职了，然后开始找工作的路程，下面简单讲述一下多家公司被问到的一些面试题。一些面试题具有很多的重复性，简单的整理了一下。具体答案需要自己去学习去理解，希望能给大家带来一些帮助。

接下来上主题

这里是我记录的一些面试题，基本上整理了一下。要是对xdm有帮助的话，可以点个赞收藏一下。

1、css上下左右居中得几种方法

1. 绝对定位居中：position:absolute; top:0;left:0;right:0;bottom:0; margin:auto;
2. flex布局：display: flex; flex-direction: row;justify-content: center; align-items: center;
3. relative：position: relative;left: 50%;top: 50%;transform: translate(-50%,-50%);

2、盒模型跟怪异盒模型

1. 标准盒模型采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长；
2. 怪异盒模型也称为IE盒模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。

3、HTML5新标签

1. canvs新元素 使用js在标签中绘制图形 不会随页面缩放变形

2. 新媒体元素

   1. Audio 音频标签
   2. Video 视频标签

3. 语意化标签

   1. Header 头部标签
   2. Footer 尾部标签
   3. Mark 带有记号的标签

4、从输入URL到页面展示的详细过程

1. 输入网址
2. DNS解析
3. 建立tcp连接
4. 客户端发送HTPP请求
5. 服务器处理请求
6. 服务器响应请求
7. 浏览器展示HTML

5、rem、em、vh、px各自代表的含义

1. px：绝对单位，页面按精确像素展示
2. em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算，整个页面内1em不是一个固定的值
3. rem：相对单位，可理解为root em, 相对根节点html的字体大小来计算
4. vh、vw：主要用于页面视口大小布局，在页面布局上更加方便简单

6、什么是响应式设计

响应式网站设计（Responsive Web design）是一种网络页面设计布局，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整

实现响应式布局的方式有如下：

1. 媒体查询（我们可以设置不同类型的媒体条件，并根据对应的条件，给相应符合条件的媒体调用相对应的样式表）
2. 百分比
3. vw/vh
4. rem
5. flex布局

7、css选择器以及优先级

1. id选择器（#box），选择id为box的元素
2. 类选择器（.one），选择类名为one的所有元素
3. 标签选择器（div），选择标签为div的所有元素
4. 后代选择器（#box div），选择id为box元素内部所有的div元素
5. 子选择器（.one>one_1），选择父元素为.one的所有.one_1的元素
6. 相邻同胞选择器（.one+.two），选择紧接在.one之后的所有.two元素
7. 群组选择器（div,p），选择div、p的所有元素

• 内联 > ID选择器 > 类选择器 > 标签选择器

8、ES6新增了哪些方法

1. includes（）用于判断数组是否包含给定的值 返回一个布尔值

2. find（）用于找出第一个符合条件的数组成员

3. findindex（）返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1

4. set数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值

5. let声明变量、const声明常量

6. 解构赋值 …

7. join() 方法接收一个参数，即字符串分隔符，返回包含所有项的字符串

8. Promise

   1. Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理且更强大。它最早由社区提出并实现，ES6将其写进了语言标准，统一了用法，并原生提供了Promise对象。

   2. 对象的状态不受外界影响 （3种状态）

      1. Pending状态（进行中）
      2. Fulfilled状态（已成功）
      3. Rejected状态（已失败）

创建promise

var promise = new Promise(function(resolve, reject){ 

if (/* 异步操作成功 */) {

  resolve(value); 

 } else {

  reject(error); 

 } 

 })

9、Var、 let 、const 区别?

• 变量提升

var声明的变量存在变量提升，即变量可以在声明之前调用，值为undefined

let和const不存在变量提升，即它们所声明的变量一定要在声明后使用，否则报错

• 暂时性死区

var不存在暂时性死区

let和const存在暂时性死区,只有等到声明变量的那一行代码出现,才可以获取和使用该变量

• 块级作用域

var不存在块级作用域

let和const存在块级作用域

• 重复声明

var允许重复声明变量

let和const在同一作用域不允许重复声明变量

• 修改声明的变量

var和let可以

const声明

10、数组常用方法

1. push() 接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度
2. unshift() 开头添加
3. concat() 首先会创建一个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组
4. pop() 删除数组的最后一项，同时减少数组的length 值，返回被删除的项
5. shift() 删除数组的第一项，同时减少数组的length 值，返回被删除的项
6. splice() 传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组
7. slice() 创建一个包含原有数组中一个或多个元素的新数组，不会影响原始数组
8. indexOf() 返回要查找的元素在数组中的位置，如果没找到则返回 -1
9. includes() 返回要查找的元素在数组中的位置，找到返回true，否则false
10. find() 返回第一个匹配的元素
11. reverse() 将数组元素方向反转
12. join() 方法接收一个参数，即字符串分隔符，返回包含所有项的字符串
13. map() 对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组

11、数组去重

//使用indexOf

function unique(array){

   let list =[];

   for(let i=0;i

12、bind、call、apply 区别

1. 1.call和apply会调用函数，且会改变函数内部的this指向
2. 2.call和apply传递的参数不一样，call传递参数aru1，aru2.形式 而apply必须是数组形式[arg]
3. 3.bind 不会调用函数，可以改变函数内部指向

• 应用场景：

1. 1.call经常做继承
2. 2.apply经常和数组有关系，比如借助于数学对象实现数组的max、min
3. 3.bind不调用函数，但改变this指向，比如改变定时器内部的this指向
4. apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即 A 对象应用 B 对象的方法。 call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2); 即 A 对象调用 B 对象的方法。 bind 除了返回是函数以外，它的参数和 call 一样。

13、本地存储的方式有哪些

• cookie

• sessionStorage

• localStorage

1. 存储大小：cookie数据大小不能超过4k，sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
2. 有效时间：localStorage存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage数据在当前浏览器窗口关闭后自动删除；cookie设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
3. 数据与服务器之间的交互方式，cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端； sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

14、JS基本数据类型

JS一共有六种数据类型其中有五种简单数据类型

包括：String、Number、Boolean、undefined、Null

15、防抖跟节流

• 防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

• 节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效

16、原型，原型链

JavaScript 常被描述为一种基于原型的语言——每个对象拥有一个原型对象

当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾

原型对象也可能拥有原型，并从中继承方法和属性，一层一层、以此类推。这种关系常被称为原型链 (prototype chain)，它解释了为何一个对象会拥有定义在其他对象中的属性和方法

17、说说你对作用域链的理解

1. 作用域就是变量与函数的可访问范围
2. 一般情况下，变量取值到创建这个变量的函数的作用域中取值。 但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链

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

1. get请求不安全，post安全 ；
2. get请求数据有大小限制，post无限制 ；
3. get请求参数会在url中显示，容易被他人窃取，post在请求体中，不会被窃取；
4. post需要设置请求头。

vue部分

19、vue的生命周期

1. beforeCreat() 创建前 在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在此生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
2. created（）被创建 data 和 methods都已经被初始化好了，可以调用了
3. • foreMount() 挂载前 在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
4. mounted（）已挂载 Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
5. beforeupdate（）更新前 页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
6. updated（）更新 页面显示的数据和data中的数据已经保持同步了，都是最新的
7. beforeDestroy() 销毁前 Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
8. destroyed（）被销毁 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了
9. Keep-alive 页面缓存

20、mvvm框架

mvvm即Model-View-ViewModel，mvvm的设计原理是基于mvc的

MVVM是Model-View-ViewModel的缩写，Model代表数据模型负责业务逻辑和数据封装，View代表UI组件负责界面和显示，ViewModel监听模型数据的改变和控制视图行为，处理用户交互，简单来说就是通过双向数据绑定把View层和Model层连接起来。在MVVM架构下，View和Model没有直接联系，而是通过ViewModel进行交互，我们只关注业务逻辑，不需要手动操作DOM，不需要关注View和Model的同步工作

21、路由拦截beforeEach

const router = new VueRouter({})

router.beforeEach((to, from, next) = {

if(to==='/login'){next('router.js中定义的path')}

})

22、vue-router的两种模式

1. hash

原理是onhashchage事件，可以在window对象上监听这个事件

window.onhashchange = function(event){

console.log(event.oldURL, event.newURL)

let hash = location.hash.slice(1)

}

2. history

利用了HTML5 History Interface 中新增的pushState()和replaceState()方法。

需要后台配置支持。如果刷新时，服务器没有响应响应的资源，会刷出404

23、vue.cli项目中src目录每个文件夹和文件的用法

1. assets文件夹是放静态资源；
2. components是放组件；
3. router是定义路由相关的配置;view视图；
4. app.vue是一个应用主组件；
5. main.js是入口文件

24、vue组件传值

1. 组件传值

   1. 父传子,子传父

      1. 父传递子如何传递:
      2. (1)在父组件的子组件标签上绑定一个属性，挂载要传输的变量
      3. (2)在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性 名”] props:{属性名:数据类型}
      4. 子传递父如何传递
      5. (1)在父组件的子组件标签上自定义一个事件，然后调用需要的方法
      6. (2)在子组件的方法中通过 this.$emit(“事件”)来触发在父组件中定义的事件，数据是以参数的形式进行传递的

2. 路由传参

   1. Params router.js后面定义子参数 传值：this.$router.push({ name:‘Child’, params:{ id:123 }})
   2. Query 不需要在 router.js中定义参数 传值：this.$router.push({ name:‘Child’, query:{ id:123 }})

3. 本地存储

4. VUEX

state 所有的数据都存储在state中 state是一个对象

25、Vue中key

key的作用主要是为了高效的更新虚拟DOM（使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素）

26、v-show和v-if的区别

1. v-show原理是修改元素的css属性display:none来决定是显示还是隐藏
2. v-if则是通过操作DOM来进行切换显示

27、双向数据绑定

使⽤Object.defineProperty进⾏数据劫持，把data对象，computed等⾥的所有属性进⾏数据劫持。

28、VUE修饰符

1. .stop 阻止点击事件冒泡
2. .prevent 阻止默认事件
3. .once 只执行一次
4. .self 只在元素本身触发

29、HTTP状态码

1. 100-199 用于指定客户端应相应的某些动作。

2. 200-299 用于表示请求成功。

3. 300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。

4. 400-499 用于指出客户端的错误。

5. 500-599 用于支持服务器错误

   1. 200 (OK/正常)
   2. 307 (临时重定向)
   3. 404 (未找到)
   4. 403 (禁止/访问权限出现问题)

30、vue中的data为什么是函数

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

前端优化

1、降低请求量：合并资源，减少HTTP请求数，minify/gzip压缩

2、加快请求速度：预解析DNS，减少域名数，并行加载

3、缓存：HTTP协议缓存请求，离线缓存manifest，离线数据缓存localStorage

4、渲染：JS/CSS优化，加载顺序，服务端渲染

5、router中使用按需引入

6、页面图片使用懒加载

后话

希望对于大家的面试有所帮助，如果你还有想补充或者说明的欢迎留言评论。