前端面试题汇总（三）

1.new关键字

1.创建一个空的简单JavaScript对象（即{}）；
2. 为步骤1新创建的对象添加属性__proto__ 将该属性链接至构造函数的原型对象 ;
3. 将步骤1新创建的对象作为this的上下文
4. 如果该函数没有返回对象，则返回this
5. new关键字后面的构造函数不能是箭头函数。

2.defer和async区别

html文件都是按顺序执行的，script标签中没有加defer和async时，浏览器在解析文档时遇到script标签就会停止解析阻塞文档解析，先加载JS文件，加载完之后立即执行，执行完毕后才能继续解析文档。加上async属性，加载JS文档和渲染文档可以同时进行（异步），当JS加载完成，JS代码立即执行，会阻塞HTML渲染。 加上defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），当HTML渲染完成，才会执行JS代码。
由于== JavaScript 是可操纵 DOM 的==,如果在修改这些元素属性同时渲染界面（即 JavaScript 线程和 UI 线程同时运行）,那么渲染线程前后获得的元素数据就可能不一致了。因此为了防止渲染出现不可预期的结果,浏览器设置 GUI 渲染线程与 JavaScript 引擎为互斥的关系当浏览器在执行 JavaScript 程序的时候,GUI 渲染线程会被保存在一个队列中,直到 JS 程序执行完成,才会接着执行。如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉

3.promise是什么与使用方法

Promise是异步微任务，让代码的可读性更高，更容易维护，使用Promise可以更加简洁和可读地编写异步代码，避免了回调地狱和繁杂的嵌套。

Promise是ES6提供的一个构造函数，可以使用Promise构造函数new一个实例，Promise构造函数接收一个函数作为参数，这个函数有两个参数，分别是两个函数 resolve和reject，实例创建完成后，可以使用then方法分别指定成功或失败的回调函数，也可以使用catch捕获失败，then和catch最终返回的也是一个Promise，所以可以链式调用。
1.Promise对象具有三个状态：Pending（进行中）、Fulfilled（已成功）和Rejected（已失败）。当一个Promise对象从Pending状态转换为Fulfilled状态时，表示异步操作成功完成并返回了结果；当一个Promise对象从Pending状态转换为Rejected状态时，表示异步操作失败并返回了错误信息。
2.Promise 一旦状态改变，就不会再变，任何时候都可以得到这个结果。从Pending变为Resolved ，从Pending变为Rejected
3.resolve 方法的参数是then中回调函数的参数，reject 方法中的参数是catch中的参数
4. then 方法和 catch方法 只要不报错，返回的都是一个fullfilled状态的promise

4.JS实现异步的方法

1.回调函数
回调函数是异步操作最基本的方法，比如AJAX回调，回调函数的优点是简单、容易理解和实现，缺点是不利于代码的阅读和维护，各个部分之间高度耦合，使得程序结构混乱、流程难以追踪，而且每个任务只能指定一个回调函数。此外它不能使用 try catch 捕获错误，不能直接 return

2.promise
Promise包装了一个异步调用并生成一个Promise实例，当异步调用返回的时候根据调用的结果分别调用实例化时传入的resolve 和 reject方法，then接收到对应的数据，做出相应的处理。Promise不仅能够捕获错误，而且也很好地解决了回调地狱的问题，缺点是无法取消 Promise，错误需要通过回调函数捕获。

3.Generator
Generator 函数是 ES6 提供的一种异步编程解决方案，Generator 函数是一个状态机，封装了多个内部状态，可暂停函数, yield可暂停，next方法可启动，每次返回的是yield后的表达式结果。优点是异步语义清晰，缺点是手动迭代Generator 函数很麻烦，实现逻辑有点绕。

4.async/awt
async/awt是基于Promise实现的，async/awt使得异步代码看起来像同步代码，优点是使用方法清晰明了，缺点是awt 将异步代码改造成了同步代码，如果多个异步代码没有依赖性却使用了awt 会导致性能上的降低

5.cookie sessionStorage localStorage 区别

Cookie、SessionStorage、 LocalStorage 都是浏览器的本地存储。
它们的共同点：都是存储在浏览器本地的
它们的区别：cookie是由服务器端写入的，而SessionStorage、 LocalStorage都是由前端写入的，cookie的生命周期是由服务器端在写入的时候就设置好的，LocalStorage是写入就一直存在，除非手动清除，SessionStorage是页面关闭的时候就会自动清除。
cookie的存储空间比较小大概4KB，SessionStorage、 LocalStorage存储空间比较大，大概5M。Cookie、SessionStorage、 LocalStorage数据共享都遵循同源原则，SessionStorage还限制必须是同一个页面。在前端给后端发送请求的时候会自动携带Cookie中的数据，但是SessionStorage、 LocalStorage不会
Cookie一般用于存储登录验证信息SessionID或者token，LocalStorage常用于存储不易变动的数据，减轻服务器的压力，SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能。

6.如何实现可过期的localstorage数据

localStorage只能用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。所以要实现可过期的localStorage缓存的中重点就是：如何清理过期的缓存。 目前有两种方法，一种是惰性删除，另一种是定时删除。
1.惰性删除是指某个键值过期后，该键值不会被马上删除，而是等到下次被使用的时候，才会被检查到过期，此时才能得到删除。
实现方法：存储的数据类型是个对象，该对象有两个key，一个是要存储的value值，另一个是当前时间。获取数据的时候，拿到存储的时间和当前时间做对比，如果超过过期时间就清除
2.定时删除是指，每隔一段时间执行一次删除操作，并通过限制删除操作执行的次数和频率，来减少删除操作对CPU的长期占用。
实现方法：获取所有设置过期时间的key判断是否过期，过期就存储到数组中，遍历数组，每隔1S（固定时间）删除5个（固定个数），直到把数组中的key从localstorage中全部删除。

7.token 能放在cookie中吗

能。 token一般是用来判断用户是否登录的，它内部包含的信息有：uid(用户唯一的身份标识)、time(当前时间的时间戳)、sign（签名，token 的前几位以哈希算法压缩成的一定长度的十六进制字符串） token可以存放在Cookie中，token 是否过期，应该由后端来判断，不该前端来判断，所以token存储在cookie中只要不设置cookie的过期时间就ok了，如果 token 失效，就让后端在接口中返回固定的状态表示token 失效，需要重新登录，再重新登录的时候，重新设置 cookie 中的 token 就行。
1.客户端使用用户名跟密码请求登录
2.服务端收到请求，去验证用户名与密码
3.验证成功后，服务端签发一个 token ，并把它发送给客户端
4.客户端接收 token 以后会把它存储起来，比如放在 cookie 里或者 localStorage 里
5.客户端每次发送请求时都需要带着服务端签发的 token（把 token 放到 HTTP 的 Header 里）
6.服务端收到请求后，需要验证请求里带有的 token ，如验证成功则返回对应的数据

8.axios的拦截器原理及应用

axios的拦截器的应用场景：
请求拦截器用于在接口请求之前做的处理，比如为每个请求带上相应的参数（token，时间戳等）。
返回拦截器用于在接口返回之后做的处理，比如对返回的状态进行判断（token是否过期）。
拦截器原理：创建一个chn数组，数组中保存了拦截器相应方法以及dispatchRequest（dispatchRequest这个函数调用才会真正的开始下发请求），把请求拦截器的方法放到chn数组中dispatchRequest的前面，把响应拦截器的方法放到chn数组中dispatchRequest的后面，把请求拦截器和响应拦截器forEach将它们分unshift,push到chn数组中，为了保证它们的执行顺序，需要使用promise，以出队列的方式对chn数组中的方法挨个执行。

9.创建ajax过程

1.创建XHR对象

const xhr = new XMLHttpRequest();

2.设置请求参数：

xhr.open('GET', 'https://api.example.com/data', true);

3.发送请求:

xhr.send();

如果是get请求不需要参数，post请求需要参数

xhr.send(data);

4.监听请求成功后的状态变化：根据状态码进行相应的处理。

xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功
        console.log(xhr.responseText);
    } else {
        // 请求失败
        console.log('Error: ' + xhr.status);
    }
};

readyState值说明 0：初始化,XHR对象已经创建,还未执行open 1：载入,已经调用open方法,但是还没发送请求 2：载入完成,请求已经发送完成 3：交互,可以接收到部分数据 4：数据全部返回

10.各个状态码的含义

1. 1xx（信息响应）：表示请求已被接收，继续处理。
   100 Continue：继续，服务器已收到请求头，并等待请求体。
   101 Switching Protocols：切换协议，服务器已经理解了客户的请求，并将通过握手协议来建立一个新的协议。
   2.2xx（成功）：表示请求已成功被服务器接收、理解、并接受。
   200 OK：请求成功。
   201 Created：已创建。
   204 No Content：无内容，服务器成功处理了请求，但未返回任何内容。
2. 3xx（重定向）：表示需要进行进一步的操作以完成请求。
   301 Moved Permanently：永久重定向，请求的资源已永久移动到新位置。
   302 Found：临时重定向，请求的资源已临时移动到新位置。
   304 Not Modified：未修改，资源未被修改过。
3. 4xx（客户端错误）：表示请求包含语法错误或无法完成请求。
   400 Bad Request：请求无效。
   401 Unauthorized：未授权。
   403 Forbidden：禁止访问。
   404 Not Found：未找到资源。
4. 5xx（服务器错误）：表示服务器在处理请求时发生内部错误。
   500 Internal Server Error：服务器内部错误。
   502 Bad Gateway：网关错误。
   503 Service Unavailable：服务不可用。