50 道高频 JavaScript 面试题，从基础到进阶 (附答案)

在前端面试中，JavaScript 一直是重中之重。它不仅是一门脚本语言，更是现代 Web 开发的核心技术。无论是页面交互、异步处理，还是框架与库的运行机制，几乎都离不开对 JavaScript 的深刻理解。

许多开发者在面试前，常常困惑于：“面试官会问哪些题？”、“哪些知识点最容易被忽略？”、“怎么才能答得有条理又有深度？”。

今天我为大家整理了 50 道高频 JavaScript 面试题，涵盖基础语法、ES6 特性、异步编程、性能优化、浏览器机制等核心知识点，并附上简明答案，希望能帮助你快速梳理思路，查漏补缺。

无论你是初入职场的新人，还是准备跳槽的前端工程师，都能在这里找到有价值的内容。

1. JavaScript 有哪些数据类型？

原始类型：string, number, boolean, null, undefined, symbol, bigint
引用类型：object, array, function, date, regexp

2. null 和 undefined 的区别？

• undefined 表示变量声明了但未赋值。
• null 表示“空对象”，是人为赋的空值。

3. == 和 === 的区别？

• == 会进行类型转换后再比较。
• === 严格比较，不做类型转换。

4. typeof null 的结果是什么？为什么？

结果是 object。这是 JavaScript 历史遗留的 bug。

5. isNaN 和 Number.isNaN 的区别？

• isNaN("abc") // true，因为会先转型。
• Number.isNaN("abc") // false，不会强制转型。

6. let、const 和 var 的区别？

• var 有变量提升、函数作用域。
• let 无提升、块级作用域。
• const 声明常量，不能修改引用指向。

7. 什么是暂时性死区（TDZ）？

使用 let/const 声明的变量，在初始化前不能访问，否则会报错。

8. 什么是事件冒泡和捕获？

• 捕获：从 window → document → body → … → target。
• 冒泡：从 target → … → body → document → window。
  默认事件执行冒泡阶段。

9. 什么是事件委托？

利用冒泡机制，把子元素的事件绑定到父元素上，提高性能。

10. 什么是闭包？

闭包是函数和其词法作用域的组合，常用于 数据隐藏、模块化、回调函数。

11. 什么是原型和原型链？

• 每个对象都有 __proto__，指向其构造函数的 prototype。
• 原型链是对象查找属性的机制，最终指向 Object.prototype。

12. new 操作符的原理？

• 创建一个空对象。
• 绑定原型。
• 执行构造函数。
• 返回对象。

13. call、apply 和 bind 的区别？

• call：立即执行，参数逐个传入。
• apply：立即执行，参数以数组传入。
• bind：返回新函数，不立即执行。

14. 什么是深拷贝与浅拷贝？

• 浅拷贝：只拷贝第一层（Object.assign、展开运算符）。
• 深拷贝：递归拷贝所有层级（structuredClone、JSON.parse(JSON.stringify(obj))）。

15. 什么是节流和防抖？

• 防抖（debounce）：事件触发后，延迟执行，避免多次触发。
• 节流（throttle）：限制事件在一定时间内只触发一次。

16. 什么是 Promise？

Promise是异步编程的一种解决方案，三种状态：pending → fulfilled / rejected。

17. async/await 的原理？

async/await 是 Promise 的语法糖，await 会阻塞异步代码的执行，直到 Promise 解决。

18. JavaScript 的事件循环机制？

• 宏任务：script、setTimeout、setInterval、I/O
• 微任务：Promise.then、MutationObserver、queueMicrotask
  执行顺序：宏任务 → 微任务 → 渲染 → 宏任务 …

19. 什么是柯里化（currying）？

把一个多参函数转换成一系列单参函数：

function add(a) {
  return (b) => a + b;
}
add(2)(3); // 5

20. 什么是函数式编程？

强调函数的纯粹性（无副作用）、组合、不可变性。

21. 箭头函数和普通函数的区别？

• 没有 this，从作用域继承。
• 不能作为构造函数。
• 没有 arguments。

22. 什么是解构赋值？

const [a, b] = [1, 2];  
const {x, y} = {x:10, y:20};

23. 什么是展开运算符？

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

24. Set 和 Map 的区别？

• Set：值唯一。
• Map：键值对，键可以是任意类型。
• 
  

25. WeakMap 和 Map 的区别？

• WeakMap 键必须是对象。
• 键是弱引用，垃圾回收不影响。

26. 什么是 Proxy？

Proxy 可以拦截对象的操作，比如 get、set，常用于数据绑定。

27. 什么是 Symbol？

唯一的标识符，避免属性名冲突。

28. 什么是 BigInt？

用于表示超过 Number.MAX_SAFE_INTEGER 的整数。

29. 什么是模块化（ES Modules）？

• export 导出，import 导入。
• 静态加载，编译时确定依赖。
• 
  

30. import 和 require 的区别？

• require 是 CommonJS，同步执行。
• import 是 ES6 模块，静态加载。

31. 如何实现数组去重？

[...new Set([1,1,2,3])]

32. 如何实现深拷贝？

JSON.parse(JSON.stringify(obj));

33. 如何判断对象是否为空？

Object.keys(obj).length === 0;

34.手写防抖函数？

function debounce(fn, delay){
  let timer;
  return (...args)=>{
    clearTimeout(timer);
    timer=setTimeout(()=>fn(...args),delay);
  }
}

35. 手写节流函数？

function throttle(fn, delay){
  let last=0;
  return (...args)=>{
    let now=Date.now();
    if(now-last>delay){
      fn(...args);
      last=now;
    }
  }
}

36. 如何实现一个深比较？

递归比较对象的每个属性。

37. 如何实现数组扁平化？

arr.flat(Infinity);

38. 如何实现数组乱序？

arr.sort(()=>Math.random()-0.5);

39. 如何实现 sleep？

const sleep = ms => new Promise(r=>setTimeout(r, ms));

40. 如何实现千分位格式化？

"1234567".replace(/\B(?=(\d{3})+(?!\d))/g, ",");

41. JS 为什么是单线程的？

因为浏览器只有一个 UI 线程，避免多线程同时修改 DOM 造成混乱。

42. 什么是垃圾回收机制？

JS 采用 标记清除（Mark-Sweep） 算法，无法被引用的对象会被回收。

43. 什么是内存泄漏？

不再使用的对象仍然被引用，无法回收，比如：全局变量、闭包、未清理的定时器。

44. 解释下 JSONP？

利用 <script> 标签无跨域限制，请求数据并执行回调函数。

45. 什么是 CORS？

跨域资源共享，服务端通过响应头
Access-Control-Allow-Origin 允许跨域请求。

46. 什么是同源策略？

协议、域名、端口都相同才算同源，否则限制跨域访问。

47. 解释下事件循环中的微任务和宏任务？

• 微任务：Promise.then
• 宏任务：setTimeout
• 执行顺序：一个宏任务 → 所有微任务 → 渲染。
• 
  

48. async/await 如何捕获异常？

用 try/catch 包裹 await。

49. JS 中的 this 绑定规则？

1. 默认绑定：全局 this → window。
2. 隐式绑定：谁调用指向谁。
3. 显式绑定：call/apply/bind。
4. new 绑定：指向实例对象。

50. 什么是事件循环中的渲染机制？

浏览器会在 宏任务 → 微任务 → requestAnimationFrame → 渲染 的流程中刷新页面。

写在最后

JavaScript 的知识体系庞大，面试中常考的不仅仅是语法本身，更是你对底层原理和应用场景的理解。