ES6 高频面试题及详细答案（实战接地气版）

ES6高频面试题及详细答案（实战接地气版）1、var/let/const的区别？分别有什么使用场景？核心区别（面试直接这么答）：1）变量提升：var有变量提升，声明前访问会输出undefined；let、const没有变量提升，声明前访问直接报错，存在暂时性死区。2）块级作用域：var只有全局、函数作用域，没有块级作用域；let、const支持块级作用域，大括号包裹的区域就是独立作用域。3）重复声明：var允许重复声明变量；let、const不允许在同一作用域重复声明。4）初始值与修改：var、let可以不赋初始值，后续可修改值；const必须初始化赋值，且不能修改基础类型值，引用类型可修改内部属性。使用场景：-var：项目中基本不用，老代码遗留场景偶尔会见到。-let：适合会被重新赋值的变量，比如循环计数器、状态变量。-const：优先使用，适合常量、引用类型数据（数组、对象），日常开发默认先用const，需要改值再换成let。2、什么是暂时性死区？ES6规定，在代码块内，从代码块开始到变量声明语句之前的区域，就是这个变量的暂时性死区。简单说：用let/const声明的变量，在声明之前不能访问、不能赋值，一用就报错。不像var，声明前访问只会输出undefined。存在暂时性死区的目的：规避var变量提升带来的诡异bug，强制变量先声明、后使用，代码更严谨。3、箭头函数和普通函数的区别？箭头函数有哪些局限性？核心区别：1）this指向不同（最重点）：普通函数的this由调用方式决定；箭头函数没有自己的this，继承外层作用域的this，且永远不会改变。2）arguments：箭头函数没有arguments对象，要用剩余参数...args替代。3）构造函数：箭头函数不能当构造函数，不能用new调用，没有原型属性prototype。4）this绑定：普通函数可以用call、apply、bind修改this；箭头函数无法修改this。5）返回值简写：箭头函数单行语句可省略return和大括号，普通函数不行。箭头函数局限性（面试常问）：-不适合定义对象方法（this会指向外层，而非对象本身）-不适合定义构造函数-不适合需要arguments的场景-不适合DOM事件回调（this不指向触发事件的DOM元素）4、ES6解构赋值是什么？有哪些常用场景和注意点？解构赋值就是快速从数组、对象中提取值，直接赋值给变量的语法糖，简化取值代码。常用场景：1）对象解构：后端接口数据取值、组件props取值、模块导入取值2）数组解构：交换变量、拆分数组数据、获取函数多个返回值3）设置函数参数默认值注意点：-解构不成功时，变量值为undefined-可以设置默认值，只有对应值为undefined时，默认值才会生效，null、0、空字符串都会覆盖默认值-对象解构是按属性名匹配，数组解构是按位置匹配5、扩展运算符...的用法，和剩余参数的区别？扩展运算符（展开）：把数组、对象、可迭代对象拆分成单个值。常用场景：-数组浅拷贝：[...arr]-数组合并：[...arr1,...arr2]-对象浅拷贝、对象合并-把伪数组转真数组：[...document.querySelectorAll('div')]剩余参数（收拢）：函数参数中...args，把多个参数收拢成一个数组。核心区别：-扩展：拆，把集合拆成单个项-剩余：收，把多个项收成集合-位置不同：剩余参数只能写在函数参数最后；扩展运算符位置灵活6、模板字符串``相比普通字符串的优势？1）支持换行：可以直接换行书写，不用拼接换行符，排版更清晰2）变量插值：通过${变量/表达式}直接嵌入变量、运算表达式，不用繁琐的+拼接3）支持表达式运算：内部可以直接做三元运算、函数调用、算术运算4）避免拼接错误：解决传统字符串拼接符号多、易漏写的问题7、Set和Map的作用、特点及常用场景？Set（集合）特点：元素唯一、不重复，无序，可存储任意类型值。常用场景：数组去重、判断元素是否存在、存储不重复的标签/权限列表常用API：add、delete、has、clear、sizeMap（键值对集合）特点：键可以是任意类型（对象、数组、基本类型都可以），键唯一，有序存储。对比普通对象：普通对象key只能是字符串/Symbol，Map键类型无限制，且能直接获取长度、遍历更友好。常用场景：复杂数据映射、缓存数据、键为引用类型的映射关系常用API：set、get、delete、has、size、clear8、Symbol是什么？有什么用途？Symbol是ES6新增的原始数据类型，表示独一无二、不可重复的值。特点：每次Symbol()生成的值都不相等，即便描述文本一样，值也不同；Symbol值不能参与隐式类型转换。实战用途：1）定义对象私有属性：防止属性被外部误修改、遍历遍历不到（普通for...in遍历会忽略）2）定义唯一常量：比如状态码、枚举值，避免常量值冲突3）自定义内置行为：比如重写Symbol.iterator、Symbol.toStringTag9、Promise是什么？解决了什么问题？三种状态分别是什么？Promise是ES6原生的异步解决方案，用来处理异步请求、定时器等异步操作。解决的核心问题：1）解决传统回调函数回调地狱问题，代码纵向嵌套变横向链式调用，可读性更高2）统一异步代码写法，方便异步错误统一捕获、异步流程统一管理三种状态（不可逆）：-pending：初始等待状态，未完成也未失败-fulfilled(resolved)：成功状态，一旦成功永久成功-rejected：失败状态，一旦失败永久失败状态一旦从pending改变为成功/失败，就无法再次变更。10、Promise常用静态方法及适用场景？-Promise.all：并行执行多个Promise，全部成功才成功，一个失败直接失败。适合无依赖的批量异步请求。-Promise.race：赛跑机制，谁先完成谁返回，不管成功失败。适合接口超时拦截。-Promise.allSettled：所有请求执行完毕，不管成功失败，统一返回结果。适合批量操作需要统计全部结果的场景。-Promise.resolve/Promise.reject：快速生成成功/失败的Promise实例。11、Iterator迭代器是什么？for...of和for...in的区别？Iterator是一种统一遍历接口，所有部署了Symbol.iterator接口的数据，都可以用for...of遍历。可遍历数据：数组、Set、Map、字符串、伪数组。对象默认没有迭代器，不能直接for...of。for...invsfor...of-for...in：遍历键名/索引，会遍历原型链属性，适合遍历对象，不适合遍历数组，性能差。-for...of：遍历值，只遍历自身有效数据，不遍历原型链，支持break、continue，适合遍历数组、集合。12、async/await和Promise的关系？优缺点？async/await是ES2017基于Promise的语法糖，本质还是Promise，只是把链式异步代码改成同步写法。优点：代码扁平、可读性极强、异步逻辑清晰、调试方便。缺点：默认串行执行，多个无依赖异步请求直接写会浪费时间，需要配合Promise.all实现并行。注意：await只能在async函数内使用；错误需要try/catch捕获，或者用Promise.catch捕获。13、ES6模块化import/export知识点（重点）1）默认导出：exportdefault，一个文件只能有一个默认导出，导入可自定义变量名。2）按需导出：exportconstxxx，可多个，导入必须和导出名一致，可解构导入。3）模块特点：ES6模块是静态模块，编译时确定依赖，不能动态引入（可通过import()动态导入解决）。4）严格模式：ESM模块默认开启严格模式，不用手动声明。5）导入只读：导入的变量是只读引用，不能重新赋值。14、class类的本质？ES6class和ES5构造函数的区别？class本质是构造函数的语法糖，底层依然是原型、构造函数模式，没有颠覆JS原型机制。区别：1）class内部默认严格模式，ES5构造函数默认非严格模式。2）class方法不可枚举，ES5原型方法可枚举。3）class必须用new调用，直接调用报错；ES5构造函数可直接调用。4）class支持静态方法、私有属性、继承extends，写法更简洁规范。15、数组新增常用方法有哪些？各自用途？ES6+高频数组方法（面试常问）：-map：遍历返回新数组，适合批量修改每一项数据，长度不变。-filter：过滤数组，返回符合条件的新数组。-find/findIndex：f