前端面试题 口语化复述解答（从2025.3.8 开始频繁更新中）

背景

看了很多面试题及其答案。但是过于标准化，一般不能直接用于回复面试官，这里我将总结一系列面试题，用于自我复习也乐于分享给大家，欢迎大家提供建议，我必不断完善之。

Javascript

ES6

1. var let const 的区别：

它们均是变量声明的关键字，其中let const是ES6新增关键字。引入这两个关键字的原因在于var没有块级作用域所导致变量滥用的问题。

1. var自带变量提升，js编译的时候会将所有用var声明的变量语句提升到整个作用域首位，所以在原有声明前引用该变量不会报错。
2. 而let const在变量声明前引用则会报错，原因即此二者无法变量提升导致存在暂时性死区，即从当前作用域的首部开始到变量声明前的上下文无法引用该变量
3. var 滥用原因还有可以多次声明同一标识符，这是let const无法做到的。并且由于var 没有块级作用域，用var声明了一个标识符后 在其块级作用域后又重新声明一次则会导致原值被替换为新值。但是var是拥有函数作用域的，所以在函数中重新声明该标识符，在函数作用域外的值则不会被替换，但是如果没用var声明而只是赋值则会被替换。
4. let 和 var的值是可以修改的，const 声明的变量对应的地址中的值是不能修改，但是如果当期变量是对象的话，其声明变量的地址中的值是一个指针，指向堆中的值，此时我们可以修改堆中的值（即const变量修改对象的属性是生效的）
5. 根据最佳实践来说，尽量能用const就不用let，能用let就不用var

2. Promise 是什么？为什么要使用Promise？它的原理是什么？

Promise 名为期约，是 ES6新引入的一种JavaScript异步解决方案。它用于解决ES6之前连续多次异步操作时传统异步编程的多层回调嵌套的问题，俗称回调地狱。通过连续的then或catch的链式调用，降低了编码的难度同时又增加了代码的可读性。

// ES6以前的异步编程
doFirstThing(data,function (err1, data1) {if(err1) {...return}doSecondThing(data1, function (err2, data2){if(err2) {...return}doThrdThing(data2, function (err3, data3) {if(err3){...return}...})})
})// Promise异步编程
doFirstThing(data).then((data) => doSecondThing(data)).then((data) => doThirdThing(data)).catch((err) => {}).finally(() => {...})

1. 基本用法
   Promise是一个对象，它有三种状态。即 Pending (进行中）Fulfilled (已完成的, 即成功状态) Rejected (已拒绝的，即失败状态)， 当我们生成一个Promise的时候， 状态只能有一种改变，即从Pending-> Fulfilled或从Pending->Rejected。此三者是在其构造函数中进行处理，当我们 new 一个 Promise的时候，需要传入一个函数, 拥有 resolve和 reject方法，通过调用resolve(data) 表示成功处理数据状态，转到链式流程中的then方法中进行后续处理， 通过调用reject(err)表示处理期约失败的数据状态，最后还有一个finnally执行的回调，不管处理成功还是失败都会执行此回调。但其实then也能处理失败的回调，用于局部错误处理。通过then 使用第二个回调函数的参数即代表失败拒绝状态回调

new Promise((resolve, reject) => {...resolve(data)...reject(err)
}).then((data) => { ... }, (err) => { ... }).catch((err) => {})

但一般我们使用catch来全局处理err，这样语义化分工更易于理解，并且不需要每次then中使用第二个参数控制err更加方便处理。

2. 静态方法

另外 Promise作为构造函数包含以下6种静态方法

Promise.resolve
Promise.reject
Promise.all
Promise.allSettled
Promise.race
Promise.any

a. 其中Promise.resolve和Promise.reject返回的分别是成功和失败的Promise对象，等价于前文new Promise((resolve, reject) => {}) 分别调用resolve和reject函数

b. Promise.all([promise1, promise2, promise3]) 并行执行多个Promise, 当所有promise处理成功时即返回一个处理结果数组，依次为传入promise数组的处理结果。当某个Promise拒绝时，直接返回拒绝状态的err。

c. Promise.allSettled([promise1, promise2, promise3]) 格式与all类似，但它会等待所有promise返回结果，最后生成一个对象

//成功
{ status: 'fulfilled', value: results }//失败
{ status: 'rejected', reason: err }

d. Promise.race([promise1, promise2, promise3]) 为Promise竞速， 返回第一个完成的promise无论成功还是失败。

e. Promise.any([promise1, promise2, promise3]) 类似于Promise.race，但是它是返回的第一个已经成功的promise实例，如果全部失败则会报错