前端面试2

前言：前端面试题总结2，主要是2022年底遇到的较多的面试题。

说说http状态码，说明状态码表示的信息

2开头-成功类

200 请求已成功，返回想要的东西
201 请求成功，服务器正在创建请求的资源
202 服务器收到请求了，但是未处理
203 服务器成功处理，但是返回的信息是另一个来源
204、205 服务器成功处理，但是没有返回内容
206 成功处理了部分get请求

3开头- 重定向类（要完成请求，需要进一步操作）

300 针对请求，服务器可执行多种操作
301 请求的网页已永久移动到新位置。
302 访问网页时，被暂时性重定向到另一个url上。

4开头-请求错误

400 请求参数有误，请求无法被服务器理解
401 请求需要请求者验证(无权限–token)
403 服务器拒绝该请求 (权限不够遭拒绝)
404 找不到请求网页

5开头：服务器错误

500 （服务器内部错误）服务器遇到错误，无法完成请求
502 （错误网关）服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用）服务器目前无法使用（由于超载或停机维护）
504 （网关超时）服务器作为网关或代理

说一下http1.0、http1.1、http2.0的区别

HTTP1.0：

浏览器与服务器只保持短暂的连接，浏览器的每次请求都需要与服务器建立一个TCP连接

HTTP1.1：

引入了持久连接，即TCP连接默认不关闭，可以被多个请求复用
在同一个TCP连接里面，客户端可以同时发送多个请求
虽然允许复用TCP连接，但是同一个TCP连接里面，所有的数据通信是按次序进行的，服务器只有处理完一个请求，才会接着处理下一个请求。如果前面的处理特别慢，后面就会有许多请求排队等着
引入了更多的缓存控制策略
添加了其他的请求方法：put、delete、options…

HTTP2.0：

采用二进制格式传输数据，而非 HTTP 1.x的文本格式，解析起来更高效
完全多路复用，而非有序并阻塞的、只需一个连接即可实现并行
使用报头压缩，降低开销
服务器推送，允许服务端推送资源给客户端，这种方式非常合适加载静态资源

浏览器输入url并按下回车后发生什么

先查缓存，判断是否命中强缓存，命中了直接读取其中的资源
DNS域名解析，解析到IP地址
建立起TCP连接，发送报文和接收报文，三次握手四次挥手
发起HTTP请求
服务器处理请求返回HTTP响应
浏览器拿到资源构建dom树和render数，然后进行页面布局和渲染
最后对JavaScript函数进行编译，整个流程完成
关闭TCP连接

常见请求头字段含义

Accept：指定客户端可以接受的内容类型。
Content-Type：指定请求体中的媒体类型。
User-Agent：指定浏览器或其他客户端的名称和版本号。
Authorization：指定请求的认证凭据。
Referer：指定页面发起请求的源URL地址。
Cookie：指定客户端保存的Cookie值。
If-Modified-Since：指定上次请求资源的时间戳。
Range：指定本次请求需要获取资源的字节范围。
Cache-Control：指定缓存策略。
Pragma：指定历史遗留的缓存控制策略。
Origin：指定发起请求的页面所在的域名。
Host：指定目标服务器的主机名和端口号。
Connection：指定客户端与服务器之间的连接类型。
Accept-Encoding：指定客户端能够接受的压缩算法。
Content-Length：指定请求体的长度。
Accept-Language：指定客户端可以接受的语言。
Upgrade-Insecure-Requests：指定是否将所有HTTP请求升级为HTTPS请求。

vue2实现双向绑定的原理

通过数据劫持结合发布订阅模式的方式来实现，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。

Js简单实现一下双向绑定

// 定义一个函数，用来把传入的数据变成响应式
function defReactive(data , keys , value){
    Object.defineProperty(data , keys ,{
        get(){
            console.log('调用了get方法')
            return value
        },
        set(newValue){
            if(newValue === value) return ;
            console.log('调用了set方法，执行更新操作')
            value = newValue;
        }
    })
}

const data = {
    message: '1',
    msg:'2'
}

Object.keys(data).forEach(element =>{
    // 把data中的每一项变成响应式数据
    let value = data[element]
    defReactive(data , element, value  )
})

console.log(data.msg);
data.message = 'nihao'
console.log('更新后的数据',data)

vue2可以对数组动态监听变化吗

调用数组的pop、push、shift、unshift、splice、sort、reverse等方法时是可以监听到数组的变化的
不能监听的情况

（1）直接通过下标赋值 arr[i] = value

（2）直接修改数组长度 arr.length = newLen

有什么方法可以实现监听数组变化

给data赋予新数组，就是将数组地址改变，或者$set

1
2
3

Vue.set(arr, index, newvalue)
vm.$set(arr, index, newvalue)
arr.splice(index, 1, newvalue)

vue父子组件挂载和卸载的生命周期如何执行

在正常开发，挂载周期的执行顺序为：

父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created => 子beforeMount => 子mounted => 父mounted

在数据更新阶段执行顺序为：

父beforeUpdate => 子beforeUpdate => 子updated => 父updated

在组件销毁阶段执行顺序为：

父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

由此可见，其实所有周期规律就是：只要子组件被引入触发，所处不管任何周期都是父组件先开始执行，然后等到子组件执行完，父组件收尾。

vue中v-for如何实现对数组，对象，数字的遍历

数组：v-for = “(item,index) in/of arr”
对象：v-for = “(value,key,index) in obj”
数字：v-for = “(item,index) in 数字”，index从1开始

JS数组常用遍历方法用法及其各项区别

for循环

for循环不到数组的私有属性
可以使用return|break|continue终止|结束循环
for属于编程式写法

forEach

1
2
3

arr.forEach((item)=>{
    console.log(item);
})

forEach循环不到数组的私有属性
return|break|continue不起作用
forEach属于声明式写法，不关心具体实现

for in

1
2
3

for(let key in arr){
    console.log(key)
}

可以遍历到数组私有属性的值
key的类型是string型
可以使用return|break|continue终止|结束循环
循环顺序不一定按照数组索引值来循环

for of

不可以遍历数组的私有属性的值
val的值就是arr项的值
可以使用return|break|continue终止|结束循环

filter,map

filter

[3,9,7,4].filter((item)=>{
    return item > 3; // 返回数组中大于3的数
})

// (3) [9, 7, 4]

map

var li = [1,2,3,4].map((item)=>{
       return `<li>${item}</li>`
   })
   <!--
       1、li的值为:['<li>1</li>','<li>2</li>','<li>3</li>']
   -->
   var liList = li.join('');//返回结果为：'<li>1</li><li>2</li><li>3</li>'

transform、translate、transition、animation区别

transform：描述了元素的静态样式，本身不会呈现动画效果，主要应用于元素的 2D 或者 3D转换，可以将元素旋转、缩放、移动、倾斜等
translate：是2D转换的一种方法，是transform的一个属性值，主要控制目标元素的移动（2D、3D）
transition：CSS过渡属性，为一个元素在不同状态切换的时候定义不同的过渡效果。
animation：强调流程与控制，对元素的一个或多个属性的变化进行控制，可以有多个关键帧（animation 和@ keyframes结合使用）