2026年前端工程师JavaScript高级技巧与面试题含答案

2026年前端工程师JavaScript高级技巧与面试题含答案一、选择题（每题2分，共10题）1.以下哪个选项是ES6中引入的新的数据结构？A.`Set`B.`Map`C.`Promise`D.`Symbol`E.`WeakMap`2.在JavaScript中，`setTimeout`的回调函数执行时机是？A.立即执行B.延迟执行（异步）C.同步执行D.延迟执行但优先级最高3.以下哪个选项是正确的Promise状态转换顺序？A.`pending->fulfilled->rejected`B.`pending->rejected->fulfilled`C.`fulfilled->pending->rejected`D.`rejected->pending->fulfilled`4.在React中，`useState`和`useReducer`的主要区别是什么？A.`useState`适用于简单状态管理，`useReducer`适用于复杂状态逻辑B.`useState`是同步的，`useReducer`是异步的C.`useState`只能管理单一状态，`useReducer`可以管理多个状态D.`useState`是函数式组件专用的，`useReducer`是类组件专用的5.以下哪个选项是正确的JavaScript原型链结构？A.`Object->Function->null`B.`Function->Object->null`C.`null->Object->Function`D.`Function->null->Object`二、填空题（每空1分，共10空）1.在JavaScript中，`let`和`var`的主要区别在于__________和__________。2.`Promise.all`方法用于处理多个Promise，当所有Promise都__________时才会返回结果。3.在React中，`shouldComponentUpdate`用于优化性能，其默认返回值是__________。4.`WeakMap`与`Map`的主要区别在于其键值对中的键必须是__________，且弱引用不会阻止垃圾回收。5.`闭包`是指函数可以访问其__________中的变量，即使外部作用域已经结束。6.在JavaScript中，`Symbol`类型的主要用途是__________。7.`Atotype.forEach`与`Atotype.map`的主要区别在于__________。8.在Vue中，`v-if`和`v-show`的主要区别在于__________。9.`事件委托`的原理是利用事件冒泡，将事件监听器绑定在__________上，以减少内存占用。10.`async/await`语法的主要作用是简化__________的代码。三、简答题（每题5分，共5题）1.解释JavaScript中的闭包（Closure）及其应用场景。2.比较`Atotype.map`和`Atotype.filter`的区别，并说明使用场景。3.解释React中的虚拟DOM（VirtualDOM）及其优缺点。4.说明`Promise`的三个状态（`pending`、`fulfilled`、`rejected`）及其转换过程。5.解释`事件委托`的原理及其优缺点。四、编程题（每题15分，共2题）1.编写一个函数，实现数组去重，不使用内置的`Set`或`Map`方法。javascriptfunctionunique(arr){//你的代码}//示例：console.log(unique([1,2,2,3,4,4,5]));//[1,2,3,4,5]2.编写一个异步函数，使用`async/await`从两个API获取数据，并合并结果。javascriptasyncfunctionfetchData(){const[data1,data2]=awaitPromise.all([fetch('/data1').then(res=>res.json()),fetch('/data2').then(res=>res.json())]);return{...data1,...data2};}//你的代码答案与解析一、选择题答案1.B-`Set`和`Map`是ES6引入的新数据结构，`Promise`是异步编程解决方案，`Symbol`是基本数据类型，`WeakMap`是特殊的`Map`。2.B-`setTimeout`是异步函数，回调函数会在指定的延迟后执行。3.A-`Promise`的状态转换顺序是`pending->fulfilled`或`pending->rejected`。4.A-`useState`适用于简单状态管理，`useReducer`适用于复杂状态逻辑（如多个子状态或复杂计算）。5.A-JavaScript的原型链结构是`Object->Function->null`，所有函数都是`Function`的实例，而所有对象都是`Object`的实例。二、填空题答案1.作用域提升、块级作用域-`let`和`var`的主要区别在于作用域提升（`var`会提升，`let`不会）和块级作用域（`let`支持块级作用域，`var`不支持）。2.成功（`fulfilled`）-`Promise.all`会在所有Promise成功时返回结果，如果其中任何一个Promise失败，则立即拒绝。3.`true`-`shouldComponentUpdate`的默认返回值是`true`，即默认会进行更新，可以通过返回`false`来优化性能。4.对象（非函数）-`WeakMap`的键必须是对象，且弱引用不会阻止垃圾回收，而`Map`的键可以是任何类型。5.外部作用域-闭包是指函数可以访问其外部作用域中的变量，即使外部作用域已经结束。6.唯一标识符（如对象属性名）-`Symbol`类型的主要用途是生成唯一标识符，避免属性名冲突。7.返回新数组、不修改原数组-`forEach`只是遍历数组，不返回新数组；`map`会根据回调函数返回新数组。8.条件渲染方式-`v-if`是条件渲染，元素不渲染时不占用DOM空间；`v-show`是显示/隐藏，元素始终在DOM中。9.父元素-事件委托将事件监听器绑定在父元素上，利用事件冒泡原理处理子元素事件。10.异步操作-`async/await`简化了异步操作的代码，使其更像同步代码。三、简答题答案1.闭包及其应用场景-解释：闭包是指函数可以访问其外部作用域中的变量，即使外部作用域已经结束。这是因为函数内部会保留对外部变量的引用。-应用场景：-模块化：通过闭包封装私有变量，防止全局污染。-计数器：实现全局计数器。-函数柯里化：将函数转换为接受多个参数的形式。2.`map`和`filter`的区别及使用场景-区别：-`map`返回新数组，对每个元素执行回调并返回结果。-`filter`返回新数组，过滤掉不符合条件的元素。-使用场景：-`map`：用于转换数组元素，如将字符串数组转为数字数组。-`filter`：用于筛选数组元素，如筛选出大于10的数字。3.虚拟DOM及其优缺点-解释：虚拟DOM是React的核心概念，是DOM的轻量级副本，通过计算差异（Diff）来最小化实际DOM操作。-优点：-减少实际DOM操作，提高性能。-跨平台（可在服务器端渲染）。-缺点：-增加内存消耗。-过度使用可能导致性能问题。4.`Promise`的状态转换-状态：-`pending`（等待态）：Promise未完成。-`fulfilled`（成功态）：Promise成功完成。-`rejected`（失败态）：Promise失败。-转换过程：-从`pending`变为`fulfilled`或`rejected`，一旦转换后不可逆。5.事件委托的原理及优缺点-原理：利用事件冒泡，将事件监听器绑定在父元素上，根据事件目标（`event.target`）判断是否处理子元素事件。-优点：-减少内存占用（无需为每个子元素绑定事件）。-动态添加元素时无需重新绑定事件。-缺点：-事件处理逻辑可能更复杂。-需要处理事件冒泡带来的性能问题（如大量事件）。四、编程题答案1.数组去重函数javascriptfunctionunique(arr){constresult=[];for(constitemofarr){if(!result.includes(item)){result.push(item);}}returnresult;}//示例：console.log(unique([1,2,2,3,4,4,5]));//[1,2,3,4,5]2.异步获取数据合并javascriptasyncfunctionfetchData(){const[data1,data2]