面试 JavaScript 框架八股文十问十答第五期

面试 JavaScript 框架八股文十问十答第五期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）常见的位运算符有哪些？其计算规则是什么？

• 位与（&）：对两个数的每一位进行与操作，只有两个数对应位都为1时结果才为1。
• 位或（|）：对两个数的每一位进行或操作，只要两个数对应位有一个为1时结果就为1。
• 位异或（^）：对两个数的每一位进行异或操作，只有两个数对应位不相同时结果才为1。
• 位非（~）：对一个数的每一位进行取反操作，0变为1，1变为0。
• 左移（<<）：将一个数的每一位向左移动指定的位数，右边空出的位用0填充。
• 右移（>>）：将一个数的每一位向右移动指定的位数，左边空出的位用原来的符号位填充。
• 无符号右移（>>>）：将一个数的每一位向右移动指定的位数，左边空出的位用0填充。

2）为什么函数的 arguments 参数是类数组而不是数组？如何遍历类数组?

函数的 arguments 参数是类数组而不是数组是因为它是一个包含函数调用时传递给函数的参数的对象。它类似于数组，但并不是一个真正的数组，没有数组的一些方法和属性。遍历类数组可以使用传统的 for 循环或者将其转换为一个真正的数组后再使用数组的方法进行遍历。以下是两种常见的遍历方法示例：

// 使用 for 循环遍历类数组
function toArray() {
  for (var i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}

// 将类数组转换为数组后使用数组的方法遍历
function toArray() {
  var arr = Array.from(arguments);
  arr.forEach(function(arg) {
    console.log(arg);
  });
}

3）什么是 DOM 和 BOM？

DOM（Document Object Model）是指文档对象模型，它是 HTML 和 XML 文档的编程接口，提供了对文档的结构化访问和操作。通过 DOM，可以使用 JavaScript 来操作文档中的元素、属性和样式，以及进行事件处理和动态更新。

BOM（Browser Object Model）是指浏览器对象模型，它是浏览器提供的一组 JavaScript API，用于操作浏览器窗口、历史记录、浏览器信息等。BOM 提供了许多对象，如 window、location、navigator、screen 等，用于与浏览器交互。BOM 并没有统一的标准，不同的浏览器可能提供不同的 BOM API。

4）对类数组对象的理解，如何转化为数组

类数组对象是指具有类似数组结构的对象，它们拥有类似数组的长度属性和通过索引访问元素的能力，但不具备数组的方法。常见的类数组对象包括函数的 arguments 对象和 DOM 元素集合（如通过 document.querySelectorAll() 返回的结果）。可以通过以下几种方法将类数组对象转化为数组：

• 使用 Array.from() 方法将类数组对象转化为真正的数组。
• 使用 Array.prototype.slice.call() 方法将类数组对象转化为真正的数组。
• 使用展开运算符（…）将类数组对象转化为真正的数组。

以下是示例代码：

function toArray() {
  var arr = Array.from(arguments);
  // 或者 var arr = Array.prototype.slice.call(arguments);
  // 或者 var arr = [...arguments];
  console.log(arr);
}

5）escape、encodeURI、encodeURIComponent 的区别

escape、encodeURI 和 encodeURIComponent 是用于编码 URL 的三个函数，它们之间的区别如下：

• escape：用于编码字符串，对除了字母、数字和指定的特殊字符以外的字符进行编码。它将字符串中的非 ASCII 字符转化为十六进制的转义序列，并且不会编码以下字符：@*/±
• encodeURI：用于编码整个 URL，对除了字母、数字和指定的特殊字符以外的字符进行编码。它将字符串中的非 ASCII 字符转化为 UTF-8 编码的转义序列，并且不会编码以下字符：!#$&'()*+,/:;=?@[]%
• encodeURIComponent：用于编码 URL 的参数部分，对除了字母、数字和指定的特殊字符以外的字符进行编码。它将字符串中的非 ASCII 字符转化为 UTF-8 编码的转义序列，并且会编码所有非字母数字字符。

6）对AJAX的理解，实现一个AJAX请求

AJAX（Asynchronous JavaScript and XML）是一种用于创建异步请求的技术。它允许网页通过 JavaScript 向服务器发送请求并获取数据，而无需刷新整个页面。AJAX 可以通过 XMLHttpRequest 对象来实现。

以下是一个使用原生 JavaScript 实现的简单的 AJAX 请求的示例：

function ajaxRequest(url, method, callback) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };
  xhr.send();
}

// 调用示例
ajaxRequest('https://api.example.com/data', 'GET', function(response) {
  console.log(response);
});

7）JavaScript为什么要进行变量提升，它导致了什么问题？

JavaScript 进行变量提升是为了在代码执行之前将变量和函数的声明提前到作用域的顶部。这意味着可以在声明之前使用这些变量和函数，从而避免了因为变量未定义而导致的错误。

然而，变量提升也可能导致一些问题。例如，如果在代码中重复声明同一个变量，后面的声明会覆盖前面的声明，这可能会导致意外的结果。此外，过度依赖变量提升可能会导致代码的可读性和维护性变差，因为变量和函数的实际位置可能不符合代码的顺序。

8）什么是尾调用，使用尾调用有什么好处？

尾调用是指函数内部的最后一个操作是调用另一个函数。使用尾调用有以下几个好处：

• 减少函数调用栈的大小：在尾调用中，每次递归调用不会创建新的函数调用帧，而是复用当前的函数调用帧，从而减少了内存的使用。
• 提高性能：由于尾调用不会增加函数调用栈的大小，因此可以减少内存的消耗和函数调用的时间。
• 优化尾递归：尾递归是一种特殊的尾调用，可以通过优化将递归转换为迭代，从而避免了递归调用栈溢出的问题。

9）ES6模块与CommonJS模块有什么异同？

ES6 模块与 CommonJS 模块都是 JavaScript 中用于模块化的规范，但存在一些异同：

异同点：

• 导出方式不同：ES6 模块使用 export 关键字导出模块，而 CommonJS 使用 module.exports 导出模块。
• 导入方式不同：ES6 模块使用 import 关键字导入模块，而 CommonJS 使用 require 导入模块。
• 执行时机不同：ES6 模块是在编译时执行，而 CommonJS 是在运行时执行。
• 导入的值不同：ES6 模块是值的引用，而 CommonJS 是值的拷贝。

不同点：

• 动态导入：ES6 模块支持动态导入，可以在代码运行时根据条件导入不同的模块，而 CommonJS 不支持动态导入。
• 模块循环引用处理：ES6 模块通过静态分析来处理循环引用，而 CommonJS 是在运行时处理循环引用。

10）常见的DOM操作有哪些

常见的 DOM 操作包括以下几种：

• 获取元素：使用 getElementById()、getElementsByClassName()、getElementsByTagName() 或 querySelector() 等方法获取元素。
• 操作元素的内容：使用 innerHTML、innerText 或 textContent 属性来修改元素的内容。
• 操作元素的属性：使用 getAttribute() 和 setAttribute() 方法来获取和设置元素的属性。
• 操作元素的样式：使用 style 对象来设置元素的样式，如 element.style.color = 'red'。
• 添加和删除元素：使用 appendChild()、insertBefore() 和 removeChild() 方法来添加和删除元素。
• 绑定事件：使用 addEventListener() 方法来为元素绑定事件处理函数。
• 修改元素的类名：使用 classList 对象的 add()、remove() 和 toggle() 方法来修改元素的类名。
• 遍历元素：使用 childNodes 或 children 属性来遍历元素的子节点，使用 parentNode 属性来遍历元素的父节点。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐