面试JavaScript职位必看！2024年面试题及答案助你脱颖而出

[id_[id_15[id_1286565530]6245611]832408543]

应聘 JavaScript 岗位？完全可以，现在，我将向大家介绍若干道 JavaScript 面试题，并附上答案，以便各位在 2024 年的技术面试中表现优异。

JavaScript 既是客户端编程的关键技术，也是众多服务器端解决方案的重要支撑，这一点需要明确。不论你是经验丰富的程序员，还是刚入行的新人，掌握这些知识都将大有裨益。

1、JavaScript的单线程特性及异步处理机制

JavaScript本质上仅采用单线程执行模式，这表明它仅具备一个执行栈以及一个内存分配区域，在任何时刻，都只能处理一组特定的操作指令。

同步和阻塞的本质

JavaScript的运行方式是顺序的，并且它会等待每个操作都完成。因此，代码会一条接一条地执行，前一个任务必须结束，后一个任务才能启动。当遇到需要大量时间或者比较复杂的工作时，这种做法会造成程序界面变得不灵敏，甚至完全停止响应。

JavaScript的异步能力

JavaScript虽然仅有一个执行主线，却支持非同步方式处理任务。部分操作能脱离主线程单独运行。这种机制常借助回调函数、承诺对象、异步等待语法及事件监听等手段达成。这些非同步功能让JavaScript可以处理数据采集、用户交互响应和系统资源交互等工作，且不会干扰主线程的运行。这对于构建响应性强和交互性强的Web应用程序非常重要。

回调函数

回调机制是异步操作里最核心的方式。这种函数通常在特定事务执行结束后才会被执行。举例来说：

// 异步操作：读取文件
读取example.txt文件内容，采用utf-8编码格式，然后执行回调函数处理结果，如果存在错误，则返回错误信息，否则输出文件数据
    if (err) {
        throw err;
    }
输出文件读取完毕后的数据内容
});

Promise

Promise是处理异步操作的一种更优雅的方式。

// 创建一个Promise
创建一个承诺，该承诺通过一个函数来初始化，这个函数接受两个参数，一个是用于解决该承诺的回调，另一个是用于拒绝该承诺的回调，在函数内部实现相应的逻辑，然后根据执行结果调用其中一个参数，以完成承诺的状态更新
    // 异步操作
    setTimeout(function() {
        resolve('操作成功完成');
    }, 1000);
});
// 使用Promise
承诺触发后，执行以下操作，获取指定内容，然后进行下一步处理，具体步骤如下，首先接收返回值，接着根据该值执行相应动作，最后完成整个流程。
显示器显示数值，稍候片刻，会显现出“任务已成功执行”。
});

async/await

这种新的异步处理方式运用了Promise的原理，更加方便易用。它能让执行非同步任务的代码，在形式上接近同步代码。

// 定义一个异步函数
async function fetchData() {
获取远程数据，需要调用接口，地址为https://api.example.com/data，然后等待响应结果，最后将结果赋值给变量response
获取响应内容后，将其解析为JSON格式，然后赋值给变量data。
    return data;
}
// 调用异步函数
获取数据后，再将其打印出来，整个过程分两步进行。

JavaScript具备单一执行线程和同步执行特性，不过其卓越的异步操作功能，使它成为开发当代网络软件的优选方案，借助对JavaScript异步运作原理的深入认识，并恰当运用其异步机制，能够开发出运行效率高且对用户极为便利的软件系统

2、现代浏览器中JavaScript引擎的运作机制

在研究网页与网络应用领域时，JavaScript执行器发挥着极为重要的功能。

输入网址后，一系列复杂操作随即展开，具体流程如下：JavaScript代码从被接收开始，到最终运行，会经历几个关键步骤。

分析阶段（Parser）：网页会先将JavaScript程序输入，并将其改造成一种叫做“抽象语法树（AST）”的格式，这相当于把一段话拆解成单词和句子成分。转换阶段（Interpreter）：获得抽象语法树后，转换器接着处理，把它变成机器可以明白的字节指令。这个过程跟转换语言有点相似，把一种表达方式换成另一种。性能分析（Profiler）：在程序运行时，性能分析工具会留意哪些部分被反复调用，以便找到改进的地方。优化编译（Optimizing Compiler）：借助“即时编译（JIT）”手段，根据分析结果调整代码，让程序运行得更加高效。优化逆转：一旦优化前提不成立，系统会取消该优化，重新回到未优化的情形，即便这样会带来一些效率降低，仍能保证程序的准确性。常用函数与即时缓存：系统会对那些经常被调用的函数进行特别处理，同时借助即时缓存手段来增强表现。内存管理方面，执行中的函数信息由栈来记录，内存分配则通过堆完成。另外，无用对象的清除以及内存资源的释放工作，由垃圾收集机制承担。

谷歌Chrome的V8引擎

谷歌Chrome浏览器所搭载的JavaScript引擎，其名称为V8，该引擎包含若干独特模块：

借助这些部件的相互配合，V8得以在浏览器里迅速且出色地运行JavaScript程序。

JavaScript解释器的运行是当前网络感受的关键所在。它使得我们访问的网页不再仅仅是固定的资料，而是富有互动性和活力丰富的动态环境。其中，从分析程序到增强编译器的各个步骤都不可或缺。它们协同工作，保障了代码不仅可以运行，还能以最恰当的路径执行，让使用者获得顺畅且高效的操作感受。任何阶段的学习者或经验丰富的程序员，认识这些环节都是精通前端领域的关键步骤。

3、JavaScript中的事件循环机制

事件循环是JavaScript运行时环境的关键部分。在阐述这个概念之前，必须明白JavaScript采用单线程模式，即同一时间只能处理一个任务。尽管如此，这并不妨碍它执行非同步操作，而事件循环正是为此目的而设计的。

一、事件循环的角色

事件调度机制的核心作用在于持续观察执行栈和任务队列，并且规划非同步操作的施行顺序。它致力于保障主线程代码运行的顺畅，同时还能应对那些耗时较长的操作。

二、事件循环的工作流程

事件循环的工作流程可以分为以下几个步骤：

调用栈是种数据结构，遵循后进先出原则，用来存放当前正在运行的函数。每当一个函数执行完毕，它就会从栈中移除。Web API：异步操作，例如延时函数、网络请求、承诺，会脱离主线程，进入Web API环境执行。这些操作在Web API中等待处理完毕。处理结束后，回调函数会被加入任务队列，等待后续执行。任务队列，它是一种先进先出，按次序排列的架构，主要功能是容纳那些已经预备好，等待被触发的函数，例如setTimeout和setInterval所绑定的处理单元。微任务队列，即Job Queue或Microtasks，具备与任务队列相同的特性，属于先进先出模式，但用途独特，专门负责处理诸如Promise的解决或拒绝后的回调、async/await产生的微小任务。事件循环，在调用栈变为空的状态下，会优先检视微任务队列。微任务队列里一旦有任务，就先去处理那些任务。只有微任务队列空了，事件循环才会去查看任务队列。任务队列里的任务一个一个来执行，不过每个宏任务执行完，事件循环都会去检查微任务队列，这样就能保证新的微任务能被及时处理。

三、执行顺序的重要性

JavaScript里，微任务总是先于宏任务运行。这就表示，Promise的回调会早于setTimeout的回调被调用。明白这个特性，对于写出高效且不出错的异步代码非常关键。

四、示例

想象下面的情况：

console.log('1');
setTimeout(function() {
    console.log('2');
}, 0);
承诺实现后，接着执行一个操作，
    console.log('3');
});
console.log('4');

输出的顺序会是：

1
4
3
2

这个现象源于一个事实，即即便`setTimeout`的延时参数设定为零，它的处理函数仍会被加入事件队列，而`Promise.then`的处理函数则会被放入微任务队列，微任务队列的运行总是在当前宏任务，包含所有同步代码执行完毕之后，紧随其后的下一个宏任务启动之前进行。

JavaScript异步编程的关键在于事件循环机制，它既保障了同步代码的正常运行，又负责异步任务的安排，因此JavaScript可以应对各种复杂状况，例如用户操作、文件载入、网络通讯等，同时确保不会让用户界面出现卡顿现象。

理解事件循环的运作机制，对于开发效率高的JavaScript程序非常重要。这可以防止一些常见难题，例如主线程被占用的情况，同时也能充分运用JavaScript的非同步功能，制作出反应快、用户感受佳的网页软件。

4、理解 var, let, 和 const 区别

1. var

var声明的变量具备函数级别的使用范围，若在函数之外进行声明，则会形成全局级别的使用范围。在全局级别应用var声明的变量，会被加到window对象之中。

2. let

3. const

附加在window对象上

在浏览器环境下，全局区域里通过var关键字定义的变量，会变成window实例的一个成员。这表明，当你设置var dog = 'bowser'，你实际上向window对象上增加了一个新的全局变量dog，你可以利用window.dog来获取它，并且会得到'bowser'这个结果。

相比之下，let和const所定义的变量并不会被置于window对象之中，这样做能够防止全局命名空间的混乱，同时还能让变量的管理界限更为清晰。

5、JavaScript中有哪些不同的数据类型？

JavaScript里的数据种类基本上可以分成两种：基本类型和对象类型。每一种类型都有它自己独特的性质和作用，明白它们对于写出优秀的程序非常重要。

原始数据类型

基础数据类型是直接存储数值的，它们无法被更改，属于不变量。JavaScript中包含以下几种基础数据类型：

数字：用来记录整数和带有小数的数。比如：42、3.14。文本：由文字构成，用单引号、双引号或模板文字包裹。比如：'hello'、"world"、`hello world`。逻辑值：仅有true和false两个状态，用于判断真假。值代表数据确实为空，未定义意味着变量已创建但尚未赋值，符号是ES6引入的一种新数据类型，每个符号值都是独一无二的且不可变，通常用于作为对象属性的标识符。

引用数据类型

引用数据类型能够容纳多个值或构造复杂的对象，它们实际存放的是数据的指针，而不是数据本体，在JavaScript语言里，常见的引用数据类型有

事物：由名称和对应内容构成的整体，内容具备多样性，能够涵盖其他事物或特定的行为方式。序列：按照特定顺序排列的数据单元，序列中的各个部分可以包含不同种类的信息。

特殊的原始数据类型

在一些探讨里，null和undefined常被格外看待，偶尔被当作特殊的原生数据类型来处理

Symbol的独特性

独一无二的，就算生成好几个具备同样说明的Symbol，它们所象征的含义也各不相同。

新增原始数据类型

数据类型的选择

挑选恰当的数据类型对运行效率和内存运用影响很大。基本类型一般消耗较少存储空间，并且它们的运算效率更高。对象类型则能构成更为复杂的数据构造，不过它们需要占用更多存储，并且操作起来或许会迟缓些。

数据类型转换

JavaScript属于一种类型灵活的语言，其中变量的数据性质并非一成不变。当进行计算时，变量的数据类型有可能发生自动变化，这种现象被称为类型推导。

6、什么是回调函数和回调地狱？

JavaScript里，回调函数是处理异步操作时经常用到的一种机制。这种函数通常被当作参数传递给其他函数，一般会在某个特定工作处理完毕之后，或者按照事先设定好的时间点来运行。

回调函数的例子

调用特定网址获取数据，然后执行回调函数
  // 模拟从服务器获取数据
  setTimeout(() => {
这些信息源自远方的计算机，里面包含了若干数据内容，具体信息如下
    callback(data);
  }, 1000);
}
function processData(data) {
输出处理信息，内容为数据，具体数据是数据。
}
获取数据('https://example.com/data'),然后处理数据

这个示例里，fetchData函数需要两个参数，一个是网址，另一个是回调函数。它会先模拟从服务器获取数据，这个动作通过setTimeout实现。获取完数据后，函数会执行回调函数，并把得到的数据作为参数传过去。

回调地狱（Callback Hell）

嵌套的回调函数在JavaScript异步编程中引发的问题，被称为回调地狱，也被称作“厄运金字塔”。

回调地狱的例子：

读取文件1.txt的内容，使用utf8编码格式，然后执行回调函数处理结果
  if (err) {
    console.error(err);
  } else {
读取文件2.txt的内容，采用utf8编码，然后执行回调函数，如果遇到错误，就传递错误信息，否则就传递读取到的数据
      if (err) {
        console.error(err);
      } else {
读取文件3.txt的内容，采用utf8编码，然后执行回调函数，如果出错则返回错误信息，否则返回读取到的数据
          if (err) {
            console.error(err);
          } else {
            // 继续更多的嵌套回调...
          }
        });
      }
    });
  }
});

在这个例子中，我们使用`

fs.readFile`函数按次序处理三个文件，每次处理文件的动作都是非同步的。因此，我们必须把回调函数层层叠叠地套在一起，从而形成了一个回调函数的堆叠形态。

避免回调地狱

为了防止函数嵌套过深的问题，当前JavaScript语言引入了诸如Promise以及async/await这类新的处理方式。接下来，展示一个运用Promise改写的先前提到的代码片段。

const readFile = (file) => {
返回一个新的承诺对象，该对象接受两个参数，一个是解决函数，一个是拒绝函数，在函数内部进行操作。
文件读取操作开始于fs模块，以utf8编码方式执行，后续处理通过回调函数完成，错误或数据传递将由此触发
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });
};
readFile('file1.txt')
  .then((data1) => {
输出完成，已成功读取文件1.txt
返回读取文件操作的结果，文件名为file2.txt，完成读取后输出内容，整个过程结束
  })
  .then((data2) => {
输出完成，已成功读取文件2.txt。
返回读取文件操作的结果，文件名为file3.txt，完成文件读取后输出内容，确保文件路径正确无误
  })
  .then((data3) => {
输出完成，已成功读取文件3.txt。
    // 继续使用基于Promise的代码...
  })
  .catch((err) => {
    console.error(err);
  });

此处通过连续使用.then()函数，实现了对异步文件读取流程的依次处理，同时借助.catch()函数来拦截并处理潜在的错误，整体代码布局更为条理分明，有助于提升可读性和后续的维护工作。

7、JavaScript中的Promise及其链式调用

Promise简介

JavaScript异步处理里，Promise是个核心要素，它指明了非同步处理的最后状态，或者是成功，或者是失败，并且包含了处理的结果数据。

Promise的状态

一个Promise对象有以下三种状态：

等待：代表Promise刚开始，异步任务还没执行完毕。成功：指异步任务顺利完成，Promise确定下来，并且能获得一个确定的值。失败：表示异步任务执行不成功，Promise被否定，没有任何结果。

Promise构造器

Promise的建立过程需要传入一个执行体，这个执行体内部有两个操作：一个用于达成，另一个用于拒绝，它们都是函数类型。

使用Promise

利用.then()方法能够取得Promise所返回的值，借助.catch()方法可以处理潜在的异常情况。

// 创建一个Promise
创建一个名为fetchData的承诺，它接受一个函数作为参数，该函数包含两个参数resolve和reject，当条件满足时调用resolve，否则调用reject。
  // 模拟从服务器获取数据
  setTimeout(() => {
    const data = 'Some data from the server';
    // 使用获取的数据解决Promise
    resolve(data);
    // 也可以用一个错误拒绝Promise
未能获取数据，返回错误信息
  }, 1000);
});
// 消费Promise
fetchData
  .then((data) => {
输出数据已获取，内容为：数据。
  })
  .catch((error) => {
输出错误信息，内容为获取数据失败，原因是出现异常，具体异常信息为error。
  });

Promise链式调用

在必须依次处理一连串异步操作的情况下，可以借助Promise实现串联操作。这需要把好几个then处理程序首尾相连，从而确保任务按照既定次序逐一完成。

一个新的承诺，当条件达成时，就调用一个函数，这个函数有两个参数，一个是用来处理成功的操作，另一个是用来处理失败的操作，当条件不满足时，就执行另一个操作
设置延迟一秒后，执行函数以返回值一，使用Promise解决。
})
  .then(function (result) {
    console.log(result); // 1
    return result * 2;
  })
  .then(function (result) {
    console.log(result); // 2
    return result * 3;
  })
  .then(function (result) {
    console.log(result); // 6
    return result * 4;
  });

这个方法里，各个`.then()`操作会一个接一个地运行，并且把它们的输出交给下一个`.then()`。假如某个`.then()`环节出了问题，或者给出了一个被否决的`Promise`，整个流程就会立刻停顿，接着去找最邻近的那个`.catch()`来处理。

采用Promise链式结构的优点在于可以构建出条理分明的非同步指令序列，与常规回调嵌套方式相比，这种方式能更清晰地展现不同非同步任务之间的承接逻辑，同时也让异常管理变得更加便捷。

8、如何理解Async/Await

Async/Await 的本质

异步等待是一种处理异步任务的新途径，它以承诺为基础，却给予更清晰且符合常规顺序编程的句式。借助异步等待，编写、理解以及检修异步代码的难度得以降低，使其类似于同步代码的流程。

使用 Async/Await

// 声明一个 async 函数
async function fetchData() {
  try {
    // 等待fetch请求完成，并获取响应
获取远程数据，需要向指定网址发起请求，该网址为https://example.com/data，然后等待响应结果，最后将结果赋值给变量response
    // 等待将响应解析为JSON，并获取数据
数据由响应对象解析为JSON格式后获取，并存储在变量中。
    // 返回获取到的数据
    return data;
  } catch (error) {
    // 如果有错误，抛出异常
    throw error;
  }
}
// 使用 async 函数
fetchData()
  .then((jsonData) => {
// 处理获取到的数据
console.log(jsonData);
})
.catch((error) => {
// 处理错误
出现了一个问题，请查看错误详情：error。
});