ES6 前端高频面试题及详细答案（实战向）

ES6前端高频面试题及详细答案（实战向）本文整理前端面试中高频出现的ES6知识点，覆盖变量声明、解构、箭头函数、Promise、模块化、数组、对象、拓展运算符等核心考点，答案贴合实际开发场景，通俗易懂，适配初级、中级前端面试。一、基础变量与作用域1、var/let/const的区别？各自的使用场景？核心区别：作用域、变量提升、重复声明、初始值、可变性var函数级作用域，全局声明会挂载到window对象存在变量提升，声明前访问值为undefined允许重复声明，容易造成变量污染可重复赋值，无常量特性let块级作用域（{}包裹的区域），解决了var的作用域混乱问题存在暂时性死区，块级作用域内，变量声明前无法访问不允许重复声明可多次赋值，适合声明会变更的变量const块级作用域、暂时性死区、不可重复声明，规则和let一致声明时必须赋值，不允许空声明常量不可修改内存地址，基础类型值不可变，引用类型（对象/数组）内部属性可修改使用场景开发中优先使用const，确定变量需要修改时用let，完全不用var，避免全局变量污染和作用域bug。2、什么是暂时性死区？ES6规定，块级作用域内，使用let/const声明的变量，在声明语句执行之前，该变量处于不可访问的状态，这段区间就是暂时性死区。即使全局有同名变量，块内声明的let/const变量也会屏蔽全局变量，声明前访问会直接报错UncaughtReferenceError，而非undefined。作用：彻底杜绝变量提升带来的诡异bug，让代码逻辑更严谨。二、解构赋值与拓展语法3、数组解构和对象解构的用法、区别及常见场景？数组解构：按顺序解构依据数组下标顺序赋值，支持默认值、剩余参数。PlainText

//基础解构

const[a,b]=[1,2];

//默认值

const[x=10]=[];

//剩余参数

const[first,...rest]=[1,2,3,4];对象解构：按键名解构，无序不依赖顺序，只匹配属性名，支持重命名、默认值，开发使用频率更高。PlainText

//基础解构

const{name,age}={name:'张三',age:20};

//重命名+默认值

const{name:username,gender='男'}=obj;常见场景函数参数解构（接口参数、组件props接收）交换变量值（[a,b]=[b,a]）提取对象指定属性，简化代码4、拓展运算符（...）和剩余参数的区别？剩余参数...变量：收集数据，用在形参、变量赋值左侧作用：收集剩余的参数/数组项，必须放在最后，只能有一个。PlainText

functionfn(...args){console.log(args)}拓展运算符...数据：展开数据，用在赋值右侧、函数调用、数组/对象定义作用：将数组、对象、可迭代对象拆解为单个值。PlainText

//数组合并

constnewArr=[...arr1,...arr2];

//对象合并

constnewObj={...obj1,...obj2};核心区别：左边收集、右边展开；剩余参数是聚合，拓展运算符是拆分。三、箭头函数5、箭头函数和普通函数的区别？箭头函数的优缺点？核心区别this指向不同：箭头函数没有自己的this，继承外层作用域的this，且this绑定后不可改变；普通函数this由调用方式决定（全局调用、对象调用、call/apply/bind修改）。无arguments：箭头函数没有arguments对象，只能用剩余参数...args接收参数。不能作为构造函数：无法使用new关键字，没有prototype原型。无yield关键字：不能用作生成器函数。语法更简洁：单行代码可省略return和大括号。优点语法简洁、解决回调函数this指向丢失问题（定时器、数组遍历方法中常用）。缺点不适合作为对象方法、原型方法（this指向错误）；不适合需要修改this的场景；无法获取参数列表、无法new实例化。6、箭头函数能否修改this？call/apply/bind对箭头函数有效吗？无效。箭头函数本身没有独立的this，其this是在定义时继承外层作用域，而非调用时确定。使用call、apply、bind强行修改this，不会生效，this始终指向外层上下文。四、数组新特性7、ES6新增的数组方法有哪些？各自作用？Array.from()：将类数组对象、可迭代对象（字符串、Set、Map）转为真实数组，可接收第二个参数做遍历映射处理。Array.of()：创建数组，解决newArray()参数歧义问题，统一将传入参数作为数组项。find()：查找数组中第一个符合条件的元素，找不到返回undefined。findIndex()：查找第一个符合条件元素的下标，找不到返回-1。includes()：判断数组是否包含指定值，返回布尔值，可识别NaN（弥补indexOf缺陷）。flat()：数组扁平化，默认拉平一层，传入Infinity可无限扁平化。flatMap()：先遍历map，再扁平化一层，适合数组二次处理。8、for...in和for...of的区别？for...in遍历键名/下标，适合遍历对象会遍历原型链上的可枚举属性，有污染风险遍历数组时下标为字符串类型for...of（ES6新增）遍历值，支持所有可迭代对象（数组、字符串、Set、Map）不遍历原型属性，无污染问题支持break、continue、return，遍历性能更高不能遍历普通对象开发规范：遍历数组用for...of，遍历对象键值用for...in或Object.keys。五、对象与Symbol9、ES6对象的新特性有哪些？属性简写：变量名和属性名一致时，可省略赋值（{name}=>{name:name}）。方法简写：对象内函数可省略function和冒号。计算属性：允许用变量、表达式作为对象属性名constobj={[key]:123}。Object.assign()：浅拷贝对象、合并对象，后面对象属性覆盖前面。Object.keys/values/entries：分别获取对象键、值、键值对数组。10、Symbol的作用和使用场景？Symbol是ES6新增的原始数据类型，表示独一无二的值，每次创建的Symbol值都不相等。核心场景定义对象私有属性：防止属性被外部遍历、篡改，避免属性名冲突。解决对象属性名重复覆盖问题，适合多人协作、第三方库开发。定义内置常量、唯一标识（如枚举状态）。注意：Symbol属性不会被for...in、Object.keys遍历，可通过Object.getOwnPropertySymbols获取。六、Set、Map数据结构11、Set和Map的特点及使用场景？Set（无序、唯一、不重复）存储一组唯一值，自动去重，支持任意数据类型常用方法：add、delete、has、clear、size场景：数组去重、存储唯一列表、判断元素是否存在Map（键值对、键可任意类型）弥补对象缺陷：对象键只能是字符串/Symbol，Map键可以是数字、对象、数组等任意类型有序存储，可遍历，可获取长度size常用方法：set、get、delete、has、clear场景：复杂键值存储、数据缓存、有序键值对管理12、Set如何实现数组去重？能否去重引用类型？简单代码实现：[...newSet(arr)]或Array.from(newSet(arr))。只能对基础数据类型完美去重；引用类型（对象、数组）比较的是内存地址，内容相同地址不同，无法去重，需要手动遍历对比处理。七、Promise异步编程13、Promise的特点、三种状态、解决了什么问题？三种状态（不可逆）pending：初始等待状态fulfilled(resolved)：成功状态rejected：失败状态状态一旦从pending变为成功/失败，就永久固定，无法再修改。核心特点支持链式调用，解决回调地狱问题；异步操作结果统一管理。解决的问题解决传统回调函数嵌套过深、代码可读性差、难以维护、错误难以统一捕获的回调地狱问题。14、Promise常用静态方法及区别？Promise.all()：全部成功才成功，一个失败直接失败，适合并行请求、全部接口成功再执行后续逻辑。Promise.race()：竞速模式，第一个完成（成功/失败）的结果作为最终结果。Promise.allSettled()：等待所有请求完成，无论成功失败，返回所有结果状态，适合批量请求需要统计全部结果的场景。Promise.any()：一个成功就成功，全部失败才失败，适合多接口容错、备用请求场景。15、Promise.then/catch/finally的执行规则？then：接收成功结果，可链式返回新Promise，实现异步串行执行。catch：捕获前面所有链式调用中的错误，统一异常处理。finally：无论成功失败一定会执行，不接收结果，适合loading关闭、资源释放等通用收尾操作。八、模块化与迭代器16、ES6Module模块化的特点？和CommonJS的区别？ES6Module（import/export）特点编译时加载（静态加载），可做Tree-Shaking打包优化默认严格模式，变量不会挂载到全局导出是实时引用，原模块值修改，导入值同步更新支持异步加载，浏览器、Node环境均支持和CommonJS（require/module.exports）核心区别CommonJS是运行时动态加载，无法Tree-Shaking，打包体积更大CommonJS导出是值拷贝，原模块修改不影响导入值CommonJS仅服务端Node使用，ES6Module是前后端通用标准17、exportdefault和export区别？export命名导出：一个模块可多个，导入必须严格对应名称，可按需导入。exportdefault默认导出：一个模块只能有一个，导入可自定义名称，无需对应原名。九、async/await与Generator18、async/await的原理和使用注意事项？async/await是ES2017基于Promise的语法糖，简化异步代码，让异步代码写法同步化。核心规则async修饰的函数，返回值一定是Promise对象await只能在async函数内部使用，用于等待Promise执行完成await会阻塞后续代码执行，等待异步结果返回后再继续注意事项多个无依赖的异步请求，直接串行await会降低性能，建议用Promise.all并行执行await错误需要用try/catch捕获，否则会阻塞代码19、Generator函数的作用？和async/await的关系？Generator是ES6新增的生成器函数，通过yield关键字暂停函数执行，next()方法恢复执行，可实现异步分段执行、迭代器自定义。关系：async/await本质是Generator+自动执行器的语法糖，解决了Generator需要手动调用next()的繁琐问题，是目前主流的异步解决方案。十、高频综合面试题20、ES6的哪些特性实现了代码精简、性能优化？let/const：杜绝var变量污染，规范作用域，减少隐性bug箭头函数：简化回调写法，解决this指向痛点解构、拓展运算符：简化对象、数组操作代码ES6Module静态模块化：支持Tree-Shaking，打包瘦身，提升项目性能Set/Map：高效实现去重、键值存储，