返回

100 道 JavaScript 面试题助你查漏补缺

前端

JavaScript 面试题大全

1. JavaScript 中的变量提升

JavaScript 中,变量会在代码执行之前提升到其作用域的顶部。这意味着即使在声明变量之前使用了它,它也不会报错。这可能会导致意料之外的行为,因此了解变量提升非常重要。

2. 严格模式(strict mode)

严格模式是一种 JavaScript 模式,可以消除一些 JavaScript 中的松散行为,从而提高代码的可靠性和安全性。它禁止使用未声明的变量、禁止对只读属性进行赋值,并禁止使用某些保留字作为变量名。

3. JavaScript 中有哪些常用的数据结构?

JavaScript 中有几种常用的数据结构,包括数组、对象、集合和映射。数组是按顺序存储元素的有序列表,而对象是具有名称-值对的无序集合。集合是一种无序且唯一元素的集合,而映射是一种键-值对集合。

4. 数组和对象的本质

数组是 JavaScript 中的内置类型,用于存储有序集合的元素。对象是 JavaScript 中的另一个内置类型,用于存储无序集合的名称-值对。数组和对象都是通过引用传递的,这意味着对它们所做的更改将影响原始对象。

5. 如何在 JavaScript 中比较两个对象是否相等?

比较两个 JavaScript 对象是否相等的最佳方法是使用 Object.is() 方法。此方法使用严格相等性,这意味着它只返回 true,当两个对象引用相同的对象或两个原始值相等时。

6. JavaScript 中的函数声明和函数表达式有什么区别?

函数声明将函数声明提升到其作用域的顶部,即使在声明之前使用函数,也不会报错。函数表达式将函数作为一个表达式定义,它不能在声明之前使用。

7. 箭头函数(arrow function)是什么?

箭头函数是 JavaScript 中的一种简化函数语法。它们没有自己的 this ,并且隐式返回函数体中的表达式。箭头函数通常用于回调和简短的代码块。

8. 如何使用事件监听器(event listener)?

事件监听器用于监听 HTML 元素上的事件,如点击、悬停或按键。要使用事件监听器,您可以使用 addEventListener() 方法,它接受一个事件类型和一个处理程序函数作为参数。

document.getElementById("button").addEventListener("click", function() {
  // 处理点击事件
});

9. 什么是事件冒泡(event bubbling)和事件捕获(event capturing)?

事件冒泡: 事件冒泡是 DOM 事件处理的默认行为。当事件发生在元素上时,它将逐级冒泡到其父元素,直到到达文档根元素。

事件捕获: 事件捕获是事件处理的另一种方式。事件捕获从文档根元素开始向下传播到目标元素。

10. DOM 是什么?它有什么作用?

DOM(文档对象模型) 是表示和操作 HTML 和 XML 文档的 API。它允许您创建、修改和遍历文档树,以及处理事件和样式。

11. BOM 是什么?它有什么作用?

BOM(浏览器对象模型) 是表示和操作浏览器窗口和浏览历史记录的 API。它允许您访问浏览器的导航、定位和会话信息,以及处理窗口事件和弹出窗口。

12. JavaScript 中的垃圾回收(garbage collection)机制是如何工作的?

JavaScript 中的垃圾回收机制会自动释放不再被任何变量引用的对象。它通过跟踪对象的引用计数来工作,并定期清理没有引用的对象。

13. JavaScript 中的原型链(prototype chain)是什么?

每个 JavaScript 对象都有一个原型,它是一个指向另一个对象的指针。当访问一个对象的不存在属性或方法时,它将在原型中查找该属性或方法。这个过程被称为原型链查找

14. 如何使用原型链来实现继承?

JavaScript 中的对象可以通过设置其原型的 prototype 属性来继承另一个对象的属性和方法。这使您可以创建对象层次结构,其中子对象继承父对象的特性。

15. JavaScript 中的闭包(closure)是什么?

闭包是一个函数,它可以访问其创建时的作用域,即使该函数已执行完毕。这允许函数访问和修改它创建时的局部变量。

16. 闭包有什么用?

闭包可以用于多种目的,例如:

  • 数据私有化
  • 事件处理程序
  • 模拟类

17. 如何使用闭包来实现数据私有化?

您可以使用闭包来将变量隐藏在函数作用域内,从而实现数据私有化。这有助于防止意外修改和数据泄露。

18. 如何使用闭包来模拟类(class)?

JavaScript 中没有原生的类,但您可以使用闭包来模拟类行为。通过创建一个返回对象构造函数的函数,您可以创建具有私有和公共属性和方法的对象。

19. JavaScript 中的模块(module)是什么?

模块是 JavaScript 中将代码组织成独立单元的一种方式。它们允许您将相关函数、对象和变量分组在一起,并防止命名冲突。

20. 模块有什么用?

模块有以下用途:

  • 代码组织
  • 代码复用
  • 命名空间管理

21. 如何使用模块来组织代码?

您可以使用模块化工具(如 CommonJS 或 ES Modules)来将代码组织成模块。这些工具允许您导出和导入模块,从而创建模块化的代码结构。

22. JavaScript 中的异步编程(asynchronous programming)是什么?

异步编程涉及执行不会立即返回结果的代码。它允许您的代码继续执行,同时等待异步操作(如 HTTP 请求)完成。

23. 异步编程有什么用?

异步编程用于提高应用程序的响应能力。它允许您避免阻塞主线程,从而使您的应用程序即使在执行耗时操作时也能保持流畅。

24. 如何使用异步编程来提高代码的性能?

您可以使用以下技术提高代码的性能:

  • 事件循环
  • 回调函数
  • Promise
  • async/await

25. JavaScript 中的 Promise 是什么?

Promise 是一种用于处理异步操作的 JavaScript 对象。它表示异步操作的最终完成或失败,并允许您使用 then() 方法附加回调来处理结果。

26. Promise 有什么用?

Promise 用于:

  • 处理异步操作
  • 链式调用
  • 错误处理

27. 如何使用 Promise 来处理异步操作?

您可以使用 fetch() 方法或第三方库(如 Axios)来发送异步 HTTP 请求,并使用 then() 方法处理结果。

28. JavaScript 中的 fetch API 是什么?

fetch API 是一个 JavaScript API,用于发送和接收 HTTP 请求。它返回一个 Promise 对象,该对象表示请求的最终完成或失败。

29. fetch API 有什么用?

fetch API 用于:

  • 发送 HTTP 请求
  • 获取和解析 JSON 数据
  • 处理 HTTP 错误

30. 如何使用 fetch API 来发送 HTTP 请求?

您可以使用 fetch() 方法发送 HTTP 请求。该方法接受一个请求 URL 作为参数,并返回一个 Promise 对象。

fetch("https://example.com/api/data")
  .then(response => response.json())
  .then(data => console.log(data));

31. JavaScript 中的 AJAX 是什么?

AJAX (异步 JavaScript 和 XML)是一种技术,用于在不重新加载整个页面的情况下,异步地向服务器发送和接收数据。

32. AJAX 有什么用?

AJAX 用于:

  • 更新网页上的部分内容
  • 发送和接收数据
  • 创建交互式网页

33. 如何使用 AJAX 来实现异步通信?

您可以使用 XMLHttpRequest 对象或第三方库(如 jQuery)来实现 AJAX 通信。这些工具允许您发送和接收 HTTP 请求,并在不重新加载页面的情况下更新网页上的内容。

34. JavaScript 中的 JSON 是什么?

JSON (JavaScript 对象表示法)是一种轻量级的数据交换格式,用于在 JavaScript 和服务器之间传输数据。它基于 JavaScript 对象语法,很容易解析和生成。

35. JSON 有什么用?

JSON 用于:

  • 数据传输
  • 数据存储
  • 数据交换

36. 如何使用 JSON 来处理数据?

您可以使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象,并使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串。

37. JavaScript 中的正则表达式(regular expression)是什么?

正则表达式 是一种用于匹配、搜索和替换文本的模式。它是一个强大的工具,可以用于各种字符串处理任务。

38. 正则表达式有什么用?

正则表达式用于:

  • 验证输入
  • 搜索文本
  • 替换文本
  • 提取数据

39. 如何使用正则表达式来处理字符串?

您可以使用 RegExp 对象或 String.match()String.search()String.replace() 方法来使用正则表达式。这些方法允许您创建正则表达式模式并将其应用于字符串。

**