2022年最新前端面试题（更新）

最近在面试，把遇到的面试题都整理了一下，给自己留个映像，同时也希望能帮助到正在面试的伙伴们。

一、js的数据类型有哪些

基本数据类型（值类型）：Number、String、Boolean、Undefined、Null、bigInt、Symbol。
引用数据类型：Object。里面包含function、 Data、Array。

二、介绍一下promise

对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending（进行中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved和从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

三、开发中promise有哪些实际应用

主要用于异步计算
可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
可以在对象之间传递和操作promise，帮助我们处理队列。
就是a函数的请求参数依赖于b函数的请求返回结果，
我们可以通过返回一个新的promise，来解决这个问题，这样就能够确保getId()执行完拿到我们需要的依赖参数，这样就能保证getData()请求成功。
除了这种通过.then()的形式去类似链式的请求，我们还可以async await来简化链式处理。

四、移动端布局有哪些？

1、流式布局、flex弹性布局、vw、less+rem+媒体查询布局、混合布局----（单独制作移动端页面）主流
2、媒体查询、bootstrap----（响应式式页面兼容移动端）其次

五、vue是如何通讯的（组件传值）？

六、vue双向绑定知道吗，说一下原理

vue2 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
Vue3.0 是通过Proxy实现的数据双向绑定，Proxy是ES6中新增的一个特性，实现的过程是在目标对象之前设置了一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

七、说一下生命周期，在项目中用到过哪些？具体怎么实现。

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

1、beforeCreate（创建前） 在数据观测和初始化事件还未开始
2、created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来3、beforeMount（载入前）在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。4、mounted（载入后）在el被新创建的vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
5、beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
6、updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
7、beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。
8、destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

八、什么是DNS解析？一次页面请求有哪些过程？

当应用过程需要将一个主机域名映射为IP地址时，就调用域名解析函数，

解析函数将待转换的域名放在DNS请求中，以UDP报文方式发给本地域名服务器。

简单来讲，你访问一个域名，DNS服务器会解析成ip地址，把结果返回给你。
HTTP请求：
1.建立TCP连接：三次握手

2.客户端发送请求行

3.客户端发送请求头，并以空白行结束，如果有请求数据则继续发送请求体

4.服务端响应应答行

5.服务端响应应答头，并以空白行结束

6.服务端响应应答数据

7.断开TCP连接：四次挥手

八、json数据类型有几种

JSON主要支持6种数据类型：

●　字符串(String)

●　Number

●　Boolean

●　null/empty

●　对象(Object)

●　数组(Array)

九、 说一下es6你了解哪些方面

1、 let const 的概念以及与var的区别
2、模板字符串（就是反引号引起来的字符串）
3、展开运算符…
4、对象字面量简写
5、箭头函数
6、函数传递参数的时候的默认值
7、解构赋值
8、Promise（Promise构造函数：Promise(excutor){}
Promise.prototype.then方法
Promise.prototype.catch方法）
9、set（集合）本质上是一个对象。它类似于数组，但成员的值都是唯一的，集合实现了iterator接口，所以可以使用「扩展运算符」和for…of进行遍历
10、Map它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。Map也实现了iterator接口，所以可以使用「扩展运算符」和for…of进行遍历。

十、知道弹性盒子吗?说一下优点。

Flex弹性盒子布局：优点在于其容易上手，根据flex规则很容易达到某个布局效果。
缺点是：浏览器兼容性比较差，只能兼容到ie9及以上。

十一、主轴能不能设置成交叉轴，如何实现垂直水平居中。

可以，1.flex-direction：设置主轴方向
row：默认，水平方向，从左(main start)向右(main end)
row-reverse：水平方向，从右向左
column：垂直方向，从上向下
column-reverse：垂直方向，从下向上
垂直水平居中：

       .box {
                                background-color: #98FB98;
                                width: 300px;
                                height: 300px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                               }

                       .con {
                                background-color: aqua;
                                flex-shrink: 0;     

                               }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

十二、vue常用指令

1.v-text：将数据作为字符串插入

​ 2.v-html：将数据作为HTML插入 – xss

​ 3.v-once：数据只编译一次

​ 4.v-pre：不编译内容

​ 5.v-bind：将数据作为属性或属性值绑定

​ 6.v-model：将数据绑定到表单控件或template

​ 7.v-if：条件渲染 – 条件为真就渲染

​ 8.v-else-if：同上

​ 9.v-else：以上条件都不满足时渲染

​ 10.v-show：条件渲染 – 条件为假就设置display:none

​ 11.v-for：列表渲染

​ 12.v-cloak：直到编译结束才显示 – 隐藏{{}}

​ 13.v-on：绑定事件监听器

​ 14.v-slot：插槽

十三、computed和watch的区别与运用场景

computed和watch都是vue框架中的用于监听数据变化的属性。
computed计算属性
1、使用方法和data中的数据一样，但是类似一个执行方法
2、在调用时候不加（）
3、必须有return返回
4、如果函数所依赖的属性没有发生变化，从缓存中读取
watch监听
1、watch的函数名称必须和data中的数据名一致
2、watch中的函数有两个参数，前者是newVal，后者是oldVal
3、watch中的函数是不需要调用的
4、watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，要深度监听需要配合deep：true属性使用
5、immediate:true 页面首次加载的时候做一次监听
区别
1、功能：computed是计算属性；watch是监听一个值的变化执行对应的回调
2、是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调
3、是否调用return：computed必须有；watch可以没有
4、使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框
5、是否支持异步：computed函数不能有异步；watch可以

十四、组件中data为什么是一个函数？

根实例对象data可以是对象也可以是函数（根实例是单例），不会产生数据污染情况
组件实例对象data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。采用函数的形式，initData时会将其作为工厂函数都会返回全新data对象

十五、谈谈对keep - alive的理解

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
.activated 在 keep-alive 组件激活时调用 使用 keep-alive
会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created
钩子函数中获取数据的任务 deactivated 注意： 只有组件被 keep-alive
包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude
排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。

十六、在什么阶段才能访问DOM，如何在created中访问DOM。

mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。
在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。

十七、在哪个生命周期内调用异步请求？

异步请求在哪个阶段都可以调用，因为会先执行完生命周期的钩子函数之后，才会执行异步函数，但如果考虑用户体验方面的话，在created中调用异步请求最佳，用户就越早感知页面的已加载，毕竟越早获取数据，在mounted实例挂载的时候就越及时（created、beformount、mounted）。

十八、vuex属性？

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter：允许组件从 store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
Module：可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
————————————————
版权声明：本文为CSDN博主「猫老板的豆」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/x550392236/article/details/80668263

笔试：现有一个二维数组numbers，先获取大于2的元素，然后对获取的元素乘以2，再求和，请写出代码。
（var numbers =[[1,2,3],[2,3,4];）

var numbers =[[1,2,3],[2,3,4];
let a=0;
let arr = numbers.flat().map((item,i,arr)=>{
if(item<2){
item*=2;
a=a+item;
}
})
console.log(a);
1
2
3
4
5
6
7
8
9