2025年每个前端开发人员都应该准备的 40 个 JavaScript 面试问题

无论你是在为下一个重要的前端职位做准备，还是只是想温习一下 JS 基础知识，这40 个 JavaScript 面试题都能帮助你脱颖而出，自信满满💪🏻。从基础知识到高级技巧，应有尽有。
快来深入了解吧！🔥

40 个 JavaScript 面试题及答案

1.❓什么是 JavaScript？

了解 JavaScript 的核心是什么，能帮你为其他一切打下坚实的基础，无论是 DOM 操作、异步编程，还是像 React 或 Vue 这样的框架。这通常是任何前端面试的首要问题之一。

答：
JavaScript 是一种高级、解释型、动态编程语言，主要用于在网站上创建交互式动态内容。它在浏览器（客户端）中运行，但也可以使用Node.js等环境在服务器上运行。JavaScript 支持面向对象、函数式和事件驱动的编程范式，使其成为前端和后端开发的强大工具。

`var`2. 🔁 、`let`、和之间有什么区别`const`？

选择正确的关键字来声明变量可以避免与作用域、提升和不变性相关的错误。面试官问这个问题是为了评估你对现代 ES6+ JavaScript 的理解程度。

回答：

var➡函数具有作用域，可提升，且可在同一作用域内重复声明。ES6 之前常用。
let➡块作用域，在同一作用域内不可重新声明，并且被提升但未初始化（TDZ - 暂时死区）。
const➡块作用域，不能重新分配（不可变绑定），但用声明的对象和数组const仍然可以变异。

使用let和const可以获得更干净、更可预测的代码。const除非值需要改变，否则通常是首选。

3.🏷️ JavaScript 中的数据类型有哪些？

了解数据在 JavaScript 中的表示和行为方式有助于防止与类型相关的错误并提高调试技能。

答：
JavaScript 有两大类数据类型：

原始类型（不可变，按值存储）：
string，，，，，，，number`booleannullundefinedsymbolbigint`
非原始类型（可变，通过引用存储）：
object，，array`function`

在进行赋值、比较和内存管理时，理解原始类型和非原始类型之间的区别至关重要。

`==`4. 🧮和有什么区别`===`？

这个问题测试您对 JavaScript 类型强制系统的掌握程度，如果误解，通常会导致细微的错误。

回答：

==➡ 在比较之前进行类型强制转换（松散相等）。例如：'5' == 5→true
===➡ 比较值和类型（严格相等）。例如：'5' === 5→false

始终使用===此选项可避免由于类型强制转换而导致的意外行为。它可确保比较结果更清晰、更可预测。

5. 📦 JavaScript 中的提升是什么？

提升是一个基本概念，它影响变量和函数在不同作用域中的访问方式。面试官会用它来测试你对执行上下文的理解。

答：
提升是 JavaScript 的默认行为，即在代码执行之前将变量和函数声明移动到其范围的顶部。

用声明的变量var将被提升并用初始化undefined。
let和const也被提升，但它们在临时死区（TDZ）中仍未初始化。
函数声明被完全提升，这意味着您可以在代码中实际定义之前调用它们。

6. 🔐 JavaScript 中的闭包是什么？

闭包是 JavaScript 中的一个核心概念，在回调、柯里化、数据隐私和函数式编程模式中被广泛使用。

回答：

当函数“记住”其外部词法范围中的变量（即使在外部函数执行完毕之后）时，就会创建闭包。

例子：

function outer() {
  let counter = 0;
  return function inner() {
    counter++;
    return counter;
  };
}
const count = outer();
count(); // 1
count(); // 2

Enter fullscreen mode Exit fullscreen mode

在这里，即使已经运行，inner仍然可以访问。counter`outer`

7.⏲️同步代码和异步代码有什么区别？

JavaScript 是单线程的。理解异步行为对于构建高性能的 Web 应用至关重要。

回答：

同步代码会阻止进一步执行，直到完成为止，它会逐行运行。
异步代码在后台运行（例如 HTTP 请求、计时器），允许程序继续执行其他任务。它使用回调、Promises 或async/await来处理执行流程。
- *

8.➡什么是箭头函数？

箭头函数简洁，并且在方面表现不同this。非常适合函数式编程。

答：
箭头函数提供了一种简写语法 ( () => {})，并且不绑定自身的this、arguments、super或new.target。这使得它们非常适合用作短函数和回调，但不适合用作方法或构造函数。

9.🗂️什么是词法范围？

理解词法范围有助于您推断变量可见性以及闭包的工作原理。

答： 词法作用域是指变量的作用域由其在源代码中的位置决定。内部函数可以访问在外部作用域中声明的变量。这也是闭包即使在其父函数返回后仍可以访问变量的原因。

10.🌀什么是事件循环？

它是 JS 异步行为的核心。了解这一点将有助于你避免竞争条件并提高性能。

答：
事件循环管理程序多个代码块随时间推移的执行。它在调用堆栈和回调/任务队列之间移动任务。通过在调用堆栈为空时运行任务来确保非阻塞行为。

11. 🧰 如何克隆一个对象？

复制对象很常见，但您需要知道何时复制浅层，何时复制深层，以避免引用错误。

回答：

浅拷贝：Object.assign({}, obj)或{...obj}
深度复制：（JSON.parse(JSON.stringify(obj))注意：丢失函数、日期和特殊类型）
高级：使用 Lodash 之类的库cloneDeep()来深度克隆复杂对象。
- *

`map()`12. 🧾 、`filter()`、和之间有什么区别`reduce()`？

这些是处理数组和数据转换的基本工具。

回答：

map()：转换每个项目并返回一个新数组。
filter()：根据条件过滤项目。
reduce()：将值累积为单个结果（例如，总和、对象合并）。
- *

13. 🕵🏻‍♂️ 如何检查一个值是否为数组？

数组和对象都是类型"object"，因此需要一种可靠的方法。

答案：
用于Array.isArray(value)精确检查。避免使用typeof，因为它返回"object"数组。

14. 💣 JavaScript 中的解构是什么？

解构使你的代码更清晰、更易读。

回答：

通过解构，您可以将数组中的值或对象的属性解包到不同的变量中。

const [a, b] = [1, 2];
const { name } = { name: "Alice" };

Enter fullscreen mode Exit fullscreen mode

这简化了嵌套结构和 API 的数据访问。

15. 🔗 什么是扩展运算符？

Spread 用于一切事物，克隆、合并、函数调用等。

回答：

扩展运算符 ( ...) 允许你扩展可迭代对象的元素（如数组或对象）：

const arr = [1, 2];
const newArr = [...arr, 3]; // [1, 2, 3]

Enter fullscreen mode Exit fullscreen mode

它对于 React 中的不变性模式和合并数据很有用。

16.🧵 JavaScript 中的承诺是什么？

与回调相比，承诺对于以更清晰、更易读的方式管理异步操作至关重要。

回答：

Promise 代表异步操作的结果，具有三种状态：pending、fulfilled和rejected。

与深度嵌套的回调（回调地狱）不同，Promise 使用.then()和.catch()进行链接：

fetch('api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

Enter fullscreen mode Exit fullscreen mode

17.💤 什么是 async/await？

async/await简化了承诺的工作，使异步代码看起来和行为更像同步代码。

答案： async函数返回一个承诺，并await暂停执行直到该承诺解决或拒绝。

这使得代码更清晰、更容易理解：

async function getData() {
  try {
    const res = await fetch('api/data');
    const data = await res.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

Enter fullscreen mode Exit fullscreen mode

18. 📡 有什么用`fetch()`？

fetch()是发出网络请求的现代标准。

答： fetch()是一个用于发出 HTTP 请求并返回 Promise 的浏览器 API。它可用于 GET、POST、PUT、DELETE 请求，并且可以与结合使用async/await。

19.🚨如何使用 async/await 处理错误？

异步代码更容易出错。优雅的错误处理至关重要。

回答：

在调用周围使用try...catch块await：

try {
  const res = await fetch(url);
  const data = await res.json();
} catch (err) {
  console.error("Failed to fetch:", err);
}

Enter fullscreen mode Exit fullscreen mode

这避免了未处理的承诺拒绝。

20. 🧪 什么是`Promise.all()`？

它是多个 API 调用等并行异步操作的关键技术。

答案： Promise.all()接受一个 Promise 数组，所有 Promise 都成功时解析，任何失败时拒绝。适用于并行加载：

await Promise.all([fetchA(), fetchB(), fetchC()]);

Enter fullscreen mode Exit fullscreen mode

21.🧱什么是 JavaScript 模块？

模块允许您跨文件组织和重用代码。

答：
JS 模块用于export共享和import使用代码。它们支持封装，并广泛应用于现代开发（ES6+、React、Node.js 等）。

`null`22. 🕳️和有什么区别`undefined`？

这些是错误和混乱的常见根源。

回答：

undefined：已声明但尚未赋值的变量。
null：明确指定“无值”。

有意使用null；避免留下价值undefined。

23. 📈 解释一下 debounce 和 throttle。

这些技术优化了性能，特别是在事件密集型 UI 中。

回答：

去抖动：等待 X 毫秒内未调用某个函数后再运行该函数（例如，搜索输入）。
节流：确保某个功能每 X 毫秒最多运行一次（例如，滚动事件）。
- *

24.🧷`this`关键词是什么？

误解this导致面向对象 JS 中出现很多 bug。

答： this指向拥有当前代码的对象。在方法中，它指向父对象。在常规函数中，this取决于调用上下文（或处于undefined严格模式）。箭头函数没有自己的this。

25.🌳什么是原型继承？

这是 JavaScript 实现 OOP 的方式，不是使用类（直到 ES6），而是使用原型。

答：
原型继承是指对象通过原型链从其他对象继承属性。它是一种灵活且动态的传统继承替代方案。

26.🧩什么是 DOM？

前端开发人员不断操作 DOM 来更新 UI。

答：
文档对象模型(DOM)是表示网页 HTML 元素的树状结构。JavaScript 可以动态访问和操作此结构。

27. 🕵️‍♂️ DOM 比较中`==`和有什么区别？`===`

如果类型不匹配，比较 DOM 元素可能会产生意外的结果。

答：
同样的规则适用：用于===严格相等。比较 DOM 节点时，node1 === node2检查两者是否指向同一个元素。

28. 📚 如何选择 DOM 中的元素？

选择元素是任何 DOM 操作的第一步。

回答：

document.getElementById('id')
document.querySelector('.class')
document.querySelectorAll('div')

这些方法可帮助您动态地定位和修改元素。

29.🖱️什么是事件委托？

它通过附加更少的事件监听器来提高性能。

答：
事件委托使用冒泡来捕获 DOM 树上层的事件。例如，将一个点击监听器附加到父级，而不是将多个监听器附加到每个子级。

30. 🧼 如何防止事件中的默认行为？

对于表单处理或自定义交互来说，防止默认行为通常是必要的。

答案：在事件处理程序内部
调用以停止默认浏览器行为（如表单提交或链接导航）。event.preventDefault()

31. 📜 什么是模板文字？

它们使字符串格式更加清晰、更加动态。

回答：

模板文字使用反引号并支持插值：

const name = "Bob";
console.log(`Hello, ${name}!`);

Enter fullscreen mode Exit fullscreen mode

它们还支持多行字符串。

32.📞什么是回调函数？

回调是异步 JS、事件处理和数组方法的基础。

答：回调函数
作为参数传递给另一个函数，并在稍后执行。它支持事件处理程序和异步逻辑等功能。

33.❌JavaScript 中的假值是什么？

条件逻辑通常取决于真/假检查。

答：
假值包括：false、0、''（空字符串）、null、undefined、NaN。其他所有值均为真值。这些会影响条件和短路逻辑。

`typeof`34. ⚖和之间的区别`instanceof`？

类型检查有助于调试和执行逻辑。

回答：

typeof：返回描述类型的字符串（'object'、、等）'function'。'string'
instanceof：检查对象是否从构造函数的原型继承。
- *

35.🔥 什么是立即调用函数表达式（IIFE）？

有助于避免污染全局范围和创建孤立的代码块。

回答：

IIFE在定义后立即运行：

(function() {
  console.log("Runs immediately!");
})();

Enter fullscreen mode Exit fullscreen mode

非常适合模块和闭包。

36.🗃️浅拷贝和深拷贝有什么区别？

错误地复制数据会导致引用错误。

回答：

浅拷贝：复制顶级属性，引用嵌套对象。
深层复制：递归复制所有内容。需要完全数据隔离时需要使用深层复制。
- *

37.🗑 JavaScript 中的垃圾收集是如何工作的？

了解内存管理有助于避免泄漏和性能问题。

答：
JS 使用自动垃圾收集。当某个对象不再被引用时，它将变得不可访问，并会被 GC 从内存中删除。