JavaScript面试题精选

作者头像东城·2026-01-31 23:45:00·
引言
JavaScript是现代Web开发的支柱。无论您是在准备面试还是复习知识，这里有10个经常被问到的JavaScript问题，配有简洁准确的答案。
1. var、let 和 const 有什么区别？
var 具有函数作用域，允许重新声明
let 和 const 具有块级作用域
let 是可变的；const 是不可变的（不能重新赋值）
  1. // var 示例
  2. var x = 1;
  3. var x = 2; // 允许重新声明

  5. // let 示例
  6. let y = 1;
  7. // let y = 2; // 错误：不能重新声明

  9. // const 示例
  10. const z = 1;
  11. // z = 2; // 错误：不能重新赋值
javascript
2. JavaScript中的闭包是什么？
闭包是一个函数，它记住了其外部词法作用域中的变量，即使外部函数已经执行完毕。
  1. function outer() {
  2. let count = 0;
  3. return function inner() {
  4. return ++count;
  5. };
  6. }

  8. const counter = outer();
  9. console.log(counter()); // 1
  10. console.log(counter()); // 2
  11. console.log(counter()); // 3
javascript
3. == 和 === 有什么区别？
== 检查相等性并进行类型转换
=== 检查相等性但不进行类型转换（严格相等）
  1. "5" == 5 // true（类型转换后相等）
  2. "5" === 5 // false（类型不同）
  3. null == undefined // true
  4. null === undefined // false
javascript
4. 什么是事件委托？
事件委托是一种技术，将单个事件监听器添加到父元素，以处理来自其子元素的事件，使用 event.target。
对性能和动态内容很有用。
  1. // 传统方式：为每个按钮添加事件监听器
  2. document.querySelectorAll('.btn').forEach(btn => {
  3. btn.addEventListener('click', handleClick);
  4. });

  6. // 事件委托：在父元素上添加一个监听器
  7. document.querySelector('.container').addEventListener('click', (e) => {
  8. if (e.target.classList.contains('btn')) {
  9. handleClick(e);
  10. }
  11. });
javascript
5. JavaScript中的Promise是什么？
Promise是一个表示异步操作最终完成或失败的对象。
  1. let promise = new Promise((resolve, reject) => {
  2. // 异步任务
  3. setTimeout(() => {
  4. const success = Math.random() > 0.5;
  5. if (success) {
  6. resolve('操作成功！');
  7. } else {
  8. reject('操作失败！');
  9. }
  10. }, 1000);
  11. });

  13. promise
  14. .then(result => console.log(result))
  15. .catch(error => console.error(error));
javascript
6. JavaScript中的提升（Hoisting）是什么？
提升意味着变量和函数声明在执行代码之前被移动到其作用域的顶部。
var 被提升（但未初始化）
let 和 const 被提升但保持在暂时性死区
  1. // 函数提升
  2. hoistedFunction(); // "函数被提升了"

  4. function hoistedFunction() {
  5. console.log("函数被提升了");
  6. }

  8. // 变量提升
  9. console.log(x); // undefined（不是错误）
  10. var x = 5;

  12. // let 和 const 的暂时性死区
  13. // console.log(y); // 错误：Cannot access 'y' before initialization
  14. let y = 10;
javascript
7. null 和 undefined 有什么区别？
undefined：声明了变量但未赋值
null：有意表示没有值
  1. let a; // undefined
  2. let b = null; // null

  4. console.log(typeof a); // "undefined"
  5. console.log(typeof b); // "object"
javascript
8. 解释JavaScript中的 this 关键字
this 指向执行当前函数的对象：
在方法中：对象本身
单独使用：window（非严格模式）
在箭头函数中：继承自父作用域
  1. // 在对象方法中
  2. const obj = {
  3. name: '张三',
  4. greet() {
  5. console.log(`你好，我是${this.name}`);
  6. }
  7. };
  8. obj.greet(); // "你好，我是张三"

  10. // 在箭头函数中
  11. const obj2 = {
  12. name: '李四',
  13. greet: () => {
  14. console.log(`你好，我是${this.name}`);
  15. }
  16. };
  17. obj2.greet(); // "你好，我是undefined"

  19. // 在构造函数中
  20. function Person(name) {
  21. this.name = name;
  22. }
  23. const person = new Person('王五');
  24. console.log(person.name); // "王五"
javascript
9. JavaScript中的事件循环是什么？
事件循环通过管理调用栈和任务队列来处理异步回调，实现非阻塞行为。
  1. console.log('1'); // 同步任务

  3. setTimeout(() => {
  4. console.log('2'); // 异步任务
  5. }, 0);

  7. Promise.resolve().then(() => {
  8. console.log('3'); // 微任务
  9. });

  11. console.log('4'); // 同步任务

  13. // 输出顺序：1, 4, 3, 2
javascript
10. map() 和 forEach() 有什么区别？
map() 返回一个新数组
forEach() 为每个项目执行函数但返回 undefined
  1. const numbers = [1, 2, 3];

  3. // map() 返回新数组
  4. const doubled = numbers.map(x => x * 2);
  5. console.log(doubled); // [2, 4, 6]

  7. // forEach() 不返回任何值
  8. const result = numbers.forEach(x => x * 2);
  9. console.log(result); // undefined

  11. // forEach() 用于副作用
  12. numbers.forEach(x => console.log(x * 2)); // 2, 4, 6
javascript
总结
掌握这些核心JavaScript概念可以显著提升您在技术面试中的信心。建议练习编写这些示例的代码，以加深理解。
面试准备建议
理解概念：不仅要记住答案，更要理解背后的原理
动手实践：在控制台中运行这些代码示例
举一反三：思考这些概念在实际项目中的应用
持续学习：JavaScript生态系统不断发展，保持学习