ES6 前端高频面试题及实战答案.docxVIP

ES6前端高频面试题及实战答案

一、基础语法类（考察核心特性掌握度）

1.let/const与var的区别？实际开发中你会如何选择？

答案：

核心区别体现在三个维度：

作用域：var是函数作用域/全局作用域，let/const是块级作用域（{}内有效）；

提升行为：var存在变量提升（声明提升至作用域顶部，值为undefined），let/const存在暂时性死区（TDZ），声明前访问报错；

重复声明：var允许重复声明，let/const不允许；

初始值：const声明时必须赋值，且不能修改引用（基本类型值不可改，引用类型可修改内部属性）。

实际选择：

优先用const（90%场景）：明确变量不会被重新赋值，提升代码可读性和稳定性（如引入模块、定义常量、声明对象/数组）；

需重新赋值时用let（如循环变量、条件赋值变量）；

完全不用var：避免作用域污染和提升导致的逻辑bug。

2.箭头函数与普通函数的核心差异？哪些场景不能用箭头函数？

答案：

核心差异：

this绑定：箭头函数没有自己的this，其this继承自外层作用域的this（静态绑定，声明时确定，无法通过call/apply/bind修改）；普通函数this动态绑定（调用时确定，指向调用者）；

构造函数：箭头函数不能作为构造函数（new调用报错），普通函数可以；

原型与arguments：箭头函数没有prototype属性，也没有arguments对象（需用rest参数替代）；

简写语法：单参数可省略括号，单语句返回可省略大括号和return。

禁止使用场景：

对象方法（如constobj={fn:()={}}，this会指向外层作用域，而非obj）；

类的实例方法（同理，this无法绑定到实例）；

事件回调（如DOM事件处理函数，this需指向元素本身，箭头函数会指向外层作用域）；

需要动态this的场景（如工厂函数、构造函数）。

二、进阶应用类（考察实际开发落地能力）

3.解构赋值的常用场景有哪些？如何处理默认值和嵌套解构？

答案：

常用场景：

变量赋值（数组/对象快速提取值，替代繁琐的索引/属性访问）；

函数参数（简化参数传递，支持默认值、选择性接收参数）；

交换变量（无需临时变量，如[a,b]=[b,a]）；

提取对象属性（如接口返回数据筛选，const{name,age}=res.data）；

导入模块（按需导入，如import{debounce}fromlodash）。

默认值与嵌套解构：

基础默认值：const{name=匿名}=user（user无name时用默认值）；

数组默认值：const[a,b=2]=[1]（b取默认值2）；

嵌套解构：const{user:{name,address:{city}}}=res（需确保外层属性存在，否则报错）；

可选链结合（避免嵌套属性不存在报错）：const{user?.name=匿名}=res（ES2020特性，兼容时可用）。

4.Promise的三种状态是什么？如何实现Promise.all和Promise.race？（手写核心逻辑）

答案：

Promise三种状态：pending（等待中）、fulfilled（成功）、rejected（失败）；状态一旦改变不可逆（pending→fulfilled或pending→rejected）。

手写核心逻辑：

Promise.all（全部成功则返回结果数组，任一失败则立即返回失败原因）：

functionmyAll(promises){

returnnewPromise((resolve,reject)={

if(!Array.isArray(promises))returnreject(newTypeError(参数必须是数组));

constresult=[];

letcount=0;//记录成功的Promise数量

if(promises.length===0)returnresolve(result);//空数组直接resolve

promises.forEach((p,index)={

//兼容非Promise类型的参数

Promise.resolve(p).then(res={

result[index]=res;