首页 >web前端 >js教程 >你应该知道的基本 JavaScript 面试问题

你应该知道的基本 JavaScript 面试问题

Mary-Kate Olsen原创: 2025-01-06 01:39:40177浏览

Essential JavaScript Interview Questions You Should Know

作为经历过多次 JavaScript 面试的人，我整理了一系列基本问题来测试我的技能和对核心概念的理解。在本系列的第一部分中，我将分享我个人遇到的 40 个问题，涵盖从基础知识到关键面试主题的所有内容。

这些问题不仅仅是理论上的；而且是现实的。他们要求您展示您的实践知识和解决问题的能力。无论您是准备担任前端还是全栈角色，这些问题都将帮助您提高技能。

Chalo Shuru karte hai！

1。 javaScipt是动态类型还是变量类型语言？

答案：JavaScript 是一种动态类型语言，这意味着变量类型可以在运行时更改，而不是在编译时设置。

2。如何向后端发送http请求？

答案：Fetch API、Axios、XMLHttpRequest

3。什么是执行上下文？

答案：在 JavaScript 中，执行上下文是代码运行的环境并决定哪些变量、对象和函数可供使用。每次函数运行时，都会为该函数创建一个新的执行上下文，并保存其自己的变量和作用域。

每个执行上下文都有两个主要阶段：

内存创建阶段：JavaScript 首先扫描代码并为变量和函数分配内存。
执行阶段：代码逐行运行。

4。什么是词汇环境？

答案：JavaScript 中的词法环境是一种数据结构，用于存储当前作用域中定义的变量和函数，以及对所有外部作用域的引用。它也称为词法范围。

5。 null 和 undefined 有什么区别？

答案：null：赋值值，表示变量没有指向任何对象，表明它没有具体值。

未定义：表示变量被声明但没有赋值，表明变量本身缺少值。

null 的类型是 object。
undefined 的类型是未定义的。

6。 JavaScript 如何处理内存？

答案：JavaScript 主要通过自动垃圾回收来管理内存，这意味着它在代码执行期间自动分配和释放内存。

7。解释一下事件循环？

答案：JavaScript 是一种单线程语言，这意味着它一次只能在单个调用堆栈中执行一个任务。然而，尽管具有单线程特性，JavaScript 仍然能够通过事件循环执行异步、非阻塞操作。

事件循环是 JavaScript 中处理异步操作的基本机制。当一个任务（例如 HTTP 请求或 DOM 事件）启动时，它会被移交给浏览器 API。

事件循环持续监控调用堆栈和任务
队列。如果调用堆栈为空，事件循环首先检查
任何待处理任务的微任务队列并执行它们。

一旦微任务队列为空，事件循环就会检查宏任务队列并将任务从那里移动到调用堆栈中执行。此过程确保高优先级任务（微任务）在低优先级任务（宏任务）之前执行。

8。提升和暂时死区？

答案：提升是一项 JavaScript 功能，允许您在声明变量和函数之前使用它们。这意味着您可以在代码中定义变量和函数之前对其进行定义。提升是由 JavaScript 引擎完成的，它将变量和函数的声明移动到其 “范围”.

的顶部

在 JavaScript 中，在执行任何代码之前，JavaScript 引擎会执行称为提升的内存准备阶段。在此阶段，引擎为变量和函数分配内存。

函数声明被完全提升，这意味着它们可以在其范围内的任何位置调用，甚至在它们的实际声明行之前。

用 var 声明的变量会被提升并用 undefined 初始化。这意味着您可以在声明之前访问 var 变量，但它们的值将是未定义的。

另一方面：用 let 和 const 声明的变量也会被提升，但保持未初始化状态。在代码中声明之前访问它们会导致引用错误。

暂时死区：

块的开始和let或const变量的实际声明之间的这段时间称为临时死区（TDZ）。 TDZ 从块的开头一直存在到声明和初始化变量的行。

临时死区是 JS 中与 let 和 const 声明相关的概念。具有 let 或 const 声明的变量被提升到其作用域的顶部，但它们在代码中并不立即可用。这意味着您可以在声明变量之前使用它，但在为其分配值之前，该变量的值将是未定义的。

9。作用域和作用域链？

答案：作用域控制代码不同部分中变量的可访问性。它决定了变量可以被访问的位置并且
不能的地方。

范围分为三种类型：

全局范围： 在全局范围内声明的变量可以是
从代码中的任何位置访问。
局部作用域：函数内声明的变量仅
在该函数中可以访问。
块作用域：在块内声明的变量（如在curly
内）大括号 {}) 只能在该块内访问。

范围链：

作用域链意味着引用链。 JavaScript 不会放弃；它有一个变量狩猎机制。它不断搜索变量。首先，它将检查本地范围以查看该变量是否可访问。如果没有，它将在外部范围中查找。它将继续下去，直到到达全局范围或全局执行上下文。这种在链中不断寻找变量的过程称为作用域链。执行上下文总是从内部作用域到外部作用域进行搜索，但不能从外部作用域到内部作用域。

10。原型继承？

答案：将父对象的原型链接到子对象以共享和利用父类的属性。这意味着属性和方法可以通过原型从一个对象转移到另一个对象。

例如，.join 和 .length 等方法是原型继承的一部分，因为这些属性来自 JavaScript 中的主 Object 类，并且在您的对象中可用。

在 JavaScript 中，一切都是对象，因此对象可以共享属性。这意味着数组可以使用对象的方法，字符串也可以这样做。

let faang = {
    name: "google",
    salary: function(){
        console.log("100K Salary")
    }
}

let engineer = {
    employeeId: 1278,
    role: function(){
        console.log("Frontend Developer")
    }
}

旧方法：

engineer.__proto__ = faang;

新方式：

let engineer = Object.create(faang, {
    role: function(){
        console.log("Backend Developer")
    }
})

Object.setPrototypeOf(engineer, faang);

// let res = Object.getPrototypeOf(faang);

11。解释一下 JavaScript 中的 Promise？

答案：Promise 是 JavaScript 中处理异步操作的一种方式。它们允许您编写可以异步执行的代码，而不会阻塞主线程。 Promise 是使用 Promise 构造函数创建的，并且可以使用 then 方法链接在一起。

JavaScript 中的 Promise 充当占位符，可以在将来解析或拒绝。

Promise 具有三种状态：待处理、已完成和已拒绝。当 Promise 处于挂起状态时，意味着异步操作仍在进行中。当 Promise 被履行时，就意味着异步操作已成功完成。当 Promise 被拒绝时，意味着异步操作失败。

处理承诺

Promise 提供了处理异步操作结果的方法：

.then()：用于处理已完成状态并获取已解决的
值。
.catch()：用于处理拒绝状态并捕获任何错误
执行期间发生的事情。
.finally()：当promise为
时，该方法执行回调已解决，这意味着无论承诺是否兑现，它都会运行
被拒绝了。

12。解释一下异步等待？

答：Async/await 是 JavaScript 中的一个语法特性，它允许您以更同步的方式编写异步代码。它使用 async 和await 关键字来定义异步函数

在 JavaScript 中，异步函数返回一个 Promise。 wait 关键字暂停异步函数的执行，直到等待的 Promise 解析。在等待之后，异步函数的其余部分进入微任务队列。这使得异步代码更具可读性和可管理性。

let faang = {
    name: "google",
    salary: function(){
        console.log("100K Salary")
    }
}

13。解释一下这个关键字？

答案：“this”关键字指的是当前正在执行该函数的对象。它的值取决于调用该函数的上下文。在全局上下文中（例如在浏览器中），this 指的是 window 对象

14。解释一下闭包和词法范围？

答案：闭包是可以从其外部作用域访问变量的函数，即使在外部函数完成执行之后也是如此。

这是 JavaScript 中闭包的示例：

let engineer = {
    employeeId: 1278,
    role: function(){
        console.log("Frontend Developer")
    }
}

在此示例中，outerFunction 函数定义了一个变量outerVariable 和一个可以访问outerVariable 的函数innerFunction。 innerFunction 返回outerFunction 函数，这允许稍后调用它。

一个与 DOM 相关的闭包示例是 addEventListener 方法。 addEventListener 方法允许您将事件侦听器附加到 DOM 中的元素。即使元素已从 DOM 中删除，事件侦听器函数也可以访问元素的属性和方法。

这是使用带有闭包的 addEventListener 方法的示例：

engineer.__proto__ = faang;

在此示例中，handleClick 函数是在 addEventListener 方法内定义的。即使按钮元素已从 DOM 中删除，handleClick 函数也可以访问按钮元素。

词汇范围：

在 JavaScript 中，词法作用域是根据变量声明确定变量作用域的概念。这意味着变量的范围由
中的代码块确定它是由它声明的，而不是由使用它的代码块声明的。

15。 javascript是单线程还是多线程？

答案：JavaScript 是一种单线程语言，这意味着它有一个调用堆栈和一个内存堆。它按顺序执行代码，完成一段代码后再继续执行下一段。这种结构允许 JavaScript 处理异步操作而不阻塞主线程。

异步行为让我们可以使用 setTimeout、AJAX 和 Promise 等功能。这些函数由浏览器管理，而不是 JavaScript 本身，这有助于在等待这些操作完成时保持主线程自由运行其他代码。

16。解释一下 JavaScript 引擎是如何工作的？

答案：JavaScript引擎是执行JavaScript代码的程序。它们存在于 Web 浏览器和托管 JavaScript 的其他环境中。最流行的 JavaScript 引擎是 Google 的 V8、SpiderMonkey 和 JavaScriptCore。这些引擎是用 C 语言编写的，用于执行 JavaScript 代码。

17。 var、let 和 const 之间的区别？

答案：

-var：用关键字“var”定义的变量的范围仅限于定义它的“函数”。如果在函数外部定义，则变量的作用域是全局的。 var 的默认值未定义。

let：用关键字“let”或“const”定义的变量的范围仅限于大括号定义的“块”，即{}。 let 的默认值未初始化。
const：用关键字“const”定义的变量的范围仅限于花括号定义的块。但是，如果使用关键字 const 定义变量，则无法重新分配该变量。 const 默认值未初始化。

18。 javascript中不同类型的数据类型？

答：JavaScript 中的数据类型主要有两种：原始数据类型和对象（引用）数据类型。

原始数据类型是 JavaScript 中的基本数据类型。它们包括数字、字符串、布尔值、null 和未定义。符号也是原始数据类型，代表唯一标识符。

对象数据类型是包含其他数据类型的数据类型。它们是使用对象文字或构造函数创建的。对象、数组和函数是对象数据类型的示例。

19。讨论回调？

答案：回调函数是作为参数传递给其他函数并在某个事件发生时被调用的函数。它们通常在 JavaScript 中用于处理异步操作，例如发出 HTTP 请求或从文件中读取。

20。讨论回调地狱？

答案：回调地狱是 JavaScript 中的一个问题，其中函数相互嵌套，使得代码难以阅读和理解。它可能导致回调被多次调用或根本不被调用，从而导致意外行为。

这是回调地狱的示例：

let faang = {
    name: "google",
    salary: function(){
        console.log("100K Salary")
    }
}

21。如何在 JavaScript 中创建对象？

答案：对象是 JavaScript 中的基本数据类型。它们可以使用对象文字或构造函数来创建。

对象字面量括在大括号 {} 中，用于创建具有键值对的对象。这是对象文字的示例：

let engineer = {
    employeeId: 1278,
    role: function(){
        console.log("Frontend Developer")
    }
}

构造函数用于创建具有自定义属性和方法的对象：

engineer.__proto__ = faang;

尽管还有其他方法来创建对象，例如使用 Object.create() 方法，但对象字面量和构造函数是在 JavaScript 中创建对象的最常见方法。

22。如何在 JavaScript 中克隆对象？

答案：

使用Object.assign()：

let engineer = Object.create(faang, {
    role: function(){
        console.log("Backend Developer")
    }
})

Object.setPrototypeOf(engineer, faang);

// let res = Object.getPrototypeOf(faang);

使用扩展运算符：

async function fetchData() {
  try {
    const response = await fetch('https://api.freeapi.app/v1/jokes/random');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

fetchData()
  .then(() => console.log('Data fetched'))
  .catch(error => console.error(error));

23。 javascript 中的休息和展开运算符是什么？

答案：休息和扩展运算符是 JavaScript 中的两个重要功能，它们允许您以更简洁和可读的方式处理数组和对象。

剩余运算符允许您将数组或对象作为参数并在函数调用中使用它。

扩展运算符允许您将数组或对象扩展为单个元素。

function outerFunction() {
  const outerVariable = 'I am an outer variable';

  function innerFunction() {
    console.log(outerVariable); // Output: I am an outer variable
  }

  return innerFunction;
}

const closure = outerFunction();
closure(); // Output: I am an outer variable

在此示例中，sum 函数使用剩余运算符将数字数组作为参数。
扩展运算符用于将数组扩展为单个元素，然后将其传递给reduce函数。

24。 JavaScript 中的高阶函数是什么？

答案：高阶函数是将其他函数作为参数或返回函数作为结果的函数。它们是 JavaScript 中的强大工具，可让您编写更灵活且可重用的代码。

const button = document.getElementById('myButton');

function handleClick() {
  console.log('Button clicked');
}

button.addEventListener('click', handleClick);

25。用 javascript 说出 ES6 的一些特性。

答案：以下是 ES6 的一些主要特性：

箭头函数：箭头函数为编写函数提供了更简洁的语法。它们是使用 => 定义的。运算符。
模板文字：模板文字允许您在字符串中嵌入表达式。它们用反引号 (`) 括起来，可用于创建多行字符串。
解构赋值：解构赋值允许您从数组或对象中提取值并将它们分配给变量。这是使用 = 运算符完成的。
扩展运算符：扩展运算符允许您将数组或对象扩展为单个元素。它用于将多个参数传递给函数。
类：类提供了一种用属性和方法定义对象的方法。它们是使用 class 关键字定义的。
模块：模块允许您将代码拆分为单独的文件并在它们之间导入/导出功能。它们是使用 import 和 export 关键字定义的。
Promises：Promises 提供了一种处理 JavaScript 中异步操作的方法。它们用于表示异步操作的最终完成或失败。
生成器：生成器允许您定义可以暂停和恢复的函数。它们是使用 function 关键字定义的。
映射和集合：映射和集合是允许您存储键值对的数据结构。它们是使用 Map 和 Set 构造函数定义的。

为什么这些问题很重要

这些问题反映了我在面试中遇到的核心概念。它们旨在测试您在现实场景中对 JavaScript 的理解。

准备 JavaScript 面试吗？重新审视这些问题并练习你的答案。如需更深入的学习体验，请查看我在 Quicknxt.com 上的课程，以获得实践知识并提高您的编码技能。让我们一起继续学习吧！

以上是你应该知道的基本 JavaScript 面试问题的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Operações simples com números e arrays em Javascript下一篇：Why Can't I Use Arrow Functions for Object Methods in ES6?

查看更多