2024年前端JavaScript面试题

1.JavaScript中的数据类型?存储上的差别?

JavaScript 中的数据类型分为两类：基本数据类型和复杂数据类型。

基本数据类型：包括数字、字符串、布尔值、null 和 undefined。基本数据类型存储在栈上，占用固定的内存空间。

复杂数据类型：包括对象、数组和函数。复杂数据类型存储在堆上，占用动态的内存空间。

2.说说你了解的js数据结构?

JavaScript 中的数据结构主要包括以下几种：

• 数组：用于存储一组具有相同类型的元素。
• 对象：用于存储一组具有不同类型的元素。
• 链表：用于存储一组元素，每个元素都指向下一个元素。
• 树：用于存储一组元素，每个元素可以有多个子元素。
• 图：用于存储一组元素，每个元素可以有多个相邻元素。

3.DOM常见的操作有哪些?

DOM 常见的操作包括：

• 创建元素：使用 createElement() 方法创建元素。
• 添加元素：使用 appendChild() 方法添加元素。
• 删除元素：使用 removeChild() 方法删除元素。
• 修改元素：使用 setAttribute() 方法修改元素的属性。
• 获取元素：使用 querySelector() 方法获取元素。

4.说说你对BOM的理解,常见的BOM对象你了解哪些?

BOM 是 Browser Object Model 的缩写，是浏览器对象模型。BOM 对象是浏览器提供的用于与浏览器进行交互的对象。常见的 BOM 对象包括：

• window：代表浏览器窗口。
• document：代表 HTML 文档。
• navigator：代表浏览器信息。
• screen：代表屏幕信息。
• history：代表浏览器历史记录。

5.==和===区别，分别在什么情况使用

== 和 === 都是用于比较两个值是否相等的运算符。

== 是比较两个值的值是否相等，不考虑类型。

=== 是比较两个值的值和类型是否都相等。

6.typeof 与instanceof区别

typeof 是用于获取变量或表达式的类型的运算符。

typeof 返回变量或表达式的类型字符串。

instanceof 是用于判断一个变量是否是某个对象的实例的运算符。

7.JavaScriptl原型,原型链?有什么特点?

JavaScript 中的每个对象都继承自一个原型对象。原型对象是一个特殊的对象，它用于存储对象的属性和方法。

原型链是对象继承原型对象的链条。从一个对象到它的原型对象，再到它的原型对象的原型对象，以此类推，就构成了原型链。

原型链的特点是：

• 对象可以通过原型链访问到原型对象的属性和方法。
• 对象可以通过原型链修改原型对象的属性和方法。

8.说说你对作用域链的理解

作用域链是用于确定变量或函数的作用域的链条。从函数定义的上下文开始，再到函数的父上下文，以此类推，就构成了作用域链。

作用域链的特点是：

• 变量或函数的作用域是从作用域链中找到的第一个变量或函数定义的作用域。
• 变量或函数的作用域可以通过作用域链修改。

9.谈谈this对象的理解

this 是一个特殊的对象，它用于表示当前上下文中的对象。

this 对象的特点是：

• this 对象可以是函数的上下文对象，也可以是变量的上下文对象。
• this 对象可以通过作用域链修改。

10.说说new操作符具体干了什么?

new 操作符用于创建一个新的对象实例。

new 操作符会做以下几件事：

• 调用构造函数，创建一个新的对象实例。
• 将新创建的对象实例赋值给 this 对象。
• 将 this 对象作为参数传递给构造函数。

11.bind、 call、apply区别?如何实现一个bind?

bind、call、apply 都是用于调用函数的函数。

bind：将 this 对象绑定到指定对象，然后调用函数。

call：将指定的参数传递给函数，然后调用函数。

apply：将指定的参数和 this 对象作为参数传递给函数，然后调用函数。

bind 函数的实现如下：

function bind(func, context, args) {
  // 创建一个新的函数
  var bound = function() {
    // 将 `this` 对象绑定到指定对象
    var _this = context || window;
    // 将指定的参数传递给函数
    var _args = args || [];
    // 调用函数
    return func.apply(_this, _args);
  };

  // 返回新的函数
  return bound;
}

12.JavaScript中执行上下文和执行栈是什么?

执行上下文是用于存储函数执行时的信息的对象。

执行栈是用于存储函数调用关系的栈。

13.说说JavaScript中的事件模型

JavaScript 中的事件模型是用于处理用户与页面交互的模型。

事件模型包括以下几个部分：

• 事件：用户与页面交互时触发的事件。
• 事件对象：用于描述事件的信息的对象。
• 事件处理程序：用于处理事件的函数。

14.解释下什么是事件代理?应用场景?

事件代理是用于将一个事件委托给另一个对象的技术。

事件代理的应用场景包括：

• 简化事件处理逻辑。
• 提高代码的复用性。
• 解决事件冒泡问题。

15.说说你对闭包的理解?闭包使用场景

闭包是指在函数内部定义的函数，它可以访问到函数外部变量。

闭包的使用场景包括：

• 存储全局状态。
• 实现延迟执行。
• 实现装饰器。

16.谈谈JavaScript中的类型转换机制

JavaScript 中的类型转换机制包括以下几种：

隐式类型转换：在没有显式转换的情况下，JavaScript 会自动将一种类型的值转换为另一种类型。

显式类型转换：使用 typeof、instanceof、parseInt()、parseFloat() 等方法可以将一种类型的值转换为另一种类型。

17.深拷贝浅拷贝的区别?如何实现一个深拷贝?

深拷贝是指将一个对象的所有属性和值都复制到另一个对象中，包括对象的引用。

浅拷贝是指将一个对象的所有属性和值都复制到另一个对象中，但不会复制对象的引用。

深拷贝可以使用以下方法实现：

使用 Object.assign() 方法。

使用 JSON.stringify() 和 JSON.parse() 方法。

使用 for...in 循环和 Object.create() 方法。

18.Javascript中如何实现函数缓存?函数缓存有哪些应用场景?

JavaScript 中可以使用以下方法来实现函数缓存：

使用 Object.defineProperty() 方法

function myFunc() {
  // ...
}

const cache = new Map();

function cachedFunc(...args) {
  // 使用 `Object.defineProperty()` 方法来缓存函数的结果
  if (!cache.has(args)) {
    cache.set(args, myFunc(...args));
  }

  // 返回缓存的结果
  return cache.get(args);
}

使用 bind() 方法

function myFunc() {
  // ...
}

const cachedFunc = myFunc.bind(null);

function cachedFunc(...args) {
  // ...
}

使用 memoize() 函数

import memoize from 'memoize-one';

const myFunc = memoize(function() {
  // ...
});

function cachedFunc() {
  // ...
}

函数缓存的应用场景包括：

• 提高性能：对于需要频繁调用的函数，使用函数缓存可以提高性能。
• 减少内存占用：对于需要大量计算的函数，使用函数缓存可以减少内存占用。
• 提高可维护性：对于复杂的函数，使用函数缓存可以提高可维护性。

19.JavaScript宁字符串的常用方法有哪些?

JavaScript 中的字符串有以下常用方法：

concat()：将多个字符串连接起来。

slice()：返回字符串的一部分。

indexOf()：返回字符串中某个字符或子字符串的索引。

lastIndexOf()：返回字符串中某个字符或子字符串的最后一个索引。

toUpperCase()：将字符串转换为大写。

toLowerCase()：将字符串转换为小写。

trim()：去除字符串两端的空格。

replace()：将字符串中的某个字符或子字符串替换为另一个字符或子字符串。

split()：将字符串分割为多个字符串。

20.数组的常用方法有哪些?

JavaScript 中的数组有以下常用方法：

• push()：向数组末尾添加一个元素。
• pop()：从数组末尾删除一个元素。
• unshift()：向数组开头添加一个元素。
• shift()：从数组开头删除一个元素。
• indexOf()：返回数组中某个元素的索引。
• lastIndexOf()：返回数组中某个元素的最后一个索引。
• concat()：将多个数组连接起来。
• slice()：返回数组的一部分。
• sort()：对数组进行排序。
• reverse()：对数组进行反转。

21.说说你对事件循环的理解

JavaScript 的事件循环是浏览器用于处理用户输入和 DOM 事件的机制。

事件循环的工作原理如下：

1. 浏览器将所有待处理的事件放入事件队列中。
2. 浏览器在每一个浏览器帧中，从事件队列中取出一个事件，并将其交给事件处理程序。
3. 事件处理程序执行完毕后，事件循环继续从事件队列中取出一个事件，并将其交给事件处理程序。

22.Javascript本地存储的方式有哪些?区别及应用场景?

JavaScript 中可以使用以下几种方式来存储本地数据：

• SessionStorage：用于存储会话数据，在用户关闭浏览器后会被清除。
• localStorage：用于存储永久数据，不会在用户关闭浏览器后被清除。
• cookies：用于存储少量的数据，通常用于存储用户偏好设置。

SessionStorage 和 localStorage 的区别在于：

• SessionStorage 的数据在用户关闭浏览器后会被清除，而 localStorage 的数据不会被清除。
• SessionStorage 的数据的大小限制为 5MB，而 localStorage 的数据的大小限制为 50MB。

SessionStorage 的应用场景包括：

• 存储用户在会话期间的状态，例如购物车中的商品。
• 存储用户的偏好设置，例如语言设置。

localStorage 的应用场景包括：

• 存储用户的登录信息。
• 存储用户的个人设置。

cookies 的应用场景包括：

• 存储用户的偏好设置，例如语言设置。
• 存储用户的登录信息。

23.大文件上传如何做断点续传?

大文件上传可以通过断点续传来提高上传效率。断点续传的原理是将大文件分割成多个小块，然后每块文件单独上传。如果上传过程中出现中断，可以从上次中断的位置继续上传。

大文件上传的断点续传可以通过以下几种方式来实现：

服务器端实现：服务器端会记录每个小块文件的传输进度，如果上传过程中出现中断，服务器端可以从上次中断的位置继续上传。

客户端实现：客户端会记录每个小块文件的传输进度，如果上传过程中出现中断，客户端可以从上次中断的位置继续上传。

服务器端实现 的优点是实现简单，缺点是服务器端需要额外的存储空间来记录每个小块文件的传输进度。

客户端实现 的优点是不需要服务器端的配合，缺点是实现复杂，需要客户端和服务器端都支持断点续传。

24.ajax原理是什么?如何实现?

ajax 是异步 JavaScript 和 XML 的缩写，它是一种用于在浏览器和服务器之间进行异步通信的技术。

ajax 的原理是使用 XMLHttpRequest 对象来发送 HTTP 请求，并使用回调函数来处理服务器响应。

ajax 的实现可以分为以下几个步骤：

创建 XMLHttpRequest 对象。

设置 XMLHttpRequest 对象的请求方法、请求地址和请求参数。

发送 HTTP 请求。

处理服务器响应。

创建 XMLHttpRequest 对象

const xhr = new XMLHttpRequest();

设置 XMLHttpRequest 对象的请求方法、请求地址和请求参数

xhr.open('GET', '/api/users');

// 设置请求参数
xhr.setRequestHeader('Authorization', 'Bearer 1234567890');

发送 HTTP 请求

xhr.send();

处理服务器响应

xhr.onload = function() {
  // 处理服务器响应
};

示例

const xhr = new XMLHttpRequest();

xhr.open('GET', '/api/users');

xhr.onload = function() {
  if (xhr.status === 200) {
    // 处理服务器响应
    const users = JSON.parse(xhr.responseText);
  } else {
    // 处理错误
  }
};

xhr.send();

总结

ajax 是一种非常强大的技术，可以用于在浏览器和服务器之间进行异步通信，从而提高用户体验。