JavaScript 面试题

上一页
下一页

这些 JavaScript 面试题专门设计用于让您熟悉面试中可能遇到的问题类型。这些问题是通过分析不同公司面试中最近提出的 JavaScript 问题而精心挑选的。

JavaScript 面试题集

在这里，我们将精心挑选的问题分为以下三个不同的集合。

初级 JavaScript 面试题

无论您的经验水平如何，这些问题都可能在面试开始时被问到。这些问题基于 JavaScript 的基础知识。您可以通读这些问题来测试您的基础知识。

1. 什么是 JavaScript？

答：JavaScript 是一种单线程编程语言，我们可以用它进行客户端或服务器端开发。它是一种动态类型编程语言，这意味着我们在编写 JavaScript 代码时无需关心变量的数据类型。此外，它还包含控制语句、运算符和对象，例如 Array、Math、Data 等。

2. JavaScript 的优缺点是什么？

答：每种语言都有其 优点和缺点，JavaScript 也不例外。

JavaScript 的优点
  • 减少服务器交互：您可以在将页面发送到服务器之前验证用户输入。这节省了服务器流量，这意味着服务器负载更小。
  • 向访客提供即时反馈：他们不必等待页面重新加载才能查看是否忘记输入某些内容。
  • 增加交互性：您可以创建当用户将鼠标悬停在其上或通过键盘激活它们时会做出反应的界面。
  • 更丰富的界面：您可以使用 JavaScript 包含拖放组件和滑块等项目，为您的网站访客提供丰富的界面。
JavaScript 的缺点

我们不能将 JavaScript 视为一门完整的编程语言。它缺少以下重要功能。

  • 客户端 JavaScript 不允许读取或写入文件。出于安全原因，这是被禁止的。
  • JavaScript 不能用于网络应用程序，因为没有此类支持。
  • JavaScript 没有多线程或多处理器功能。

3. JavaScript 是一种区分大小写的语言吗？

答：是的！JavaScript 是一种区分大小写的语言。这意味着语言关键字、变量、函数名称以及任何其他标识符必须始终使用一致的大小写字母。

4. JavaScript 中的变量命名约定是什么？

答：在 JavaScript 中命名变量时，请记住以下规则。

  • 您不应该使用任何 JavaScript 保留关键字作为变量名。您可以查看所有保留关键字。
  • JavaScript 变量名不能以数字 (0-9) 开头。它们必须以字母或下划线字符开头。例如，123test 是一个无效的变量名，但 _123test 是一个有效的变量名。
  • JavaScript 变量名区分大小写。例如，Name 和 name 是两个不同的变量。

5. typeof 运算符如何工作？

答：typeof 是一个一元运算符，放置在其单个操作数之前，该操作数可以是任何类型。其值为一个字符串，指示操作数的数据类型。

如果 typeof 运算符的操作数是数字、字符串或布尔值，则其结果为“number”、“string”或“boolean”，并根据评估结果返回 true 或 false。

6. 如何在 JavaScript 中创建数组？

答：您可以使用数组字面量定义数组，如下所示

var x = [];
var y = [1, 2, 3, 4, 5];

7. 如何读取 JavaScript 中数组的元素？

答：数组有一个 length 属性，可用于迭代。我们可以按如下方式读取数组的元素。

var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

要了解更多关于 JavaScript 数组 的信息，请查看附加链接。

8. 如何在 JavaScript 中创建对象？

答：JavaScript 很好地支持对象概念。您可以使用对象字面量创建对象，如下所示。

var emp = {
   name: "Zara",
   age: 10
};

9. 如何读取 JavaScript 中对象的属性？

答：您可以使用点表示法编写和读取对象的属性，如下所示。

// Getting object properties
emp.name            // ==> Zara
emp.age             // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

要了解更多关于 JavaScript 对象 的信息，请查看附加链接。

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

答：JavaScript 数据类型可以分为原始类型和非原始类型。

中级 JavaScript 面试题

1. JavaScript 中变量的有效作用域是什么？

答：变量的作用域 是定义它的程序区域。JavaScript 变量 只有两种作用域。

  • 全局变量：全局变量具有全局作用域，这意味着它在您的 JavaScript 代码中的任何地方都可见。
  • 局部变量：局部变量仅在其定义的函数内可见。函数参数始终是该函数的局部变量。

2. 如果名称相同，全局变量和局部变量中哪种类型的变量优先于其他变量？

答：局部变量优先于具有相同名称的全局变量。

3. 什么是 JavaScript 中的命名函数？如何定义命名函数？

答：命名函数在定义时具有名称。可以使用 function 关键字定义命名函数，如下所示。

function named(){
   // do some stuff here
}

4. JavaScript 支持多少种类型的函数？

答：JavaScript 中的函数可以是命名函数或匿名函数。

要了解更多关于JavaScript 函数的信息，请查看附加链接。

5. 如何定义匿名函数？

答：匿名函数的定义方式与普通函数类似，但它没有名称。

// Named function
function namedFunction() {
    return "I have a name";
}

// Anonymous function
const anonymousFunction = function() {
    return "I don't have a name";
};

6. 您可以将匿名函数分配给变量吗？

答：是的！匿名函数可以分配给变量。

7. JavaScript 中“this”运算符的用途是什么？

答：JavaScript“this”关键字包含对对象的引用。它表示函数或当前代码的上下文。它用于访问当前对象的属性和方法。

8. JavaScript 中的 Date 对象是什么？

答：Date 对象是 JavaScript 语言中内置的数据类型。使用 new Date() 创建 Date 对象。

创建 Date 对象后，许多方法允许您对其进行操作。大多数方法只需允许您使用本地时间或 UTC（通用时间或格林威治标准时间）获取和设置对象的年份、月份、日期、小时、分钟、秒和毫秒字段。

9. JavaScript 中的 Number 对象是什么？

答：JavaScript Number 对象表示数值数据，可以是整数或浮点数。通常，您无需担心 Number 对象，因为浏览器会自动将数字字面量转换为 Number 类的实例。

语法：创建 Number 对象

var val = new Number(number);

如果参数无法转换为数字，则返回 NaN（非数字）。

10. 哪个内置方法反转数组元素的顺序？

答：JavaScript reverse() 方法反转数组元素的顺序 - 第一个变为最后一个，最后一个变为第一个。

11. 如何使用 JavaScript 重定向 URL？

答：在客户端使用 JavaScript 重定向。可以使用以下方法将网站访问者重定向到新页面。

// Simulate a mouse click:
window.location.href = "https://tutorialspoint.com/";

// Simulate an HTTP redirect:
window.location.replace("https://tutorialspoint.com/");

12. 如何使用 JavaScript 打印网页？

答：JavaScript 帮助您使用 window 对象的 print 函数实现此功能。当执行 JavaScript print 函数 window.print() 时，将打印当前网页。

<html>
   <head>
      <title>Print Page</title>
      <script>
         function printpage() {
            window.print();
         }
      </script>
   </head>
   <body>
      <h2>This is a sample page to print</h2>
      <button onclick="printpage()">Print Page</button>
   </body>
</html>

13. null 值的 typeof 返回什么？

答：它返回“object”。

14. 如何在 JavaScript 中动态创建新元素？

答：我们将有一个按钮元素，点击它时，我们将生成一个新的“p”元素并将其附加到 DOM。

<body>
       <h3>How to dynamically create new elements in JavaScript?</h3>
       <div id="container">
       <!-- Newly created elements will be appended here -->
    </div>
    <button onclick="createNewElement()">Create Element</button>

    <script>
       function createNewElement() {
       // Create a new paragraph element
       var newParagraph = document.createElement('p');

       // Set the text content of the paragraph
       newParagraph.textContent = 'This is a dynamically created paragraph.';

       // Append the paragraph to the container div
       var container = document.getElementById('container');
       container.appendChild(newParagraph);
       }
    </script>
</body>

15. 什么是函数提升？

答：JavaScript 中的函数提升是一种默认行为，其中函数声明在代码执行之前被移动到其局部作用域的顶部。

高级 JavaScript 面试题

1. 什么是回调？

答：回调是作为参数或选项传递给某些方法的普通 JavaScript 函数。一些回调只是事件，用于在触发特定状态时为用户提供做出反应的机会。

2. 什么是闭包？

答：闭包是在从某个内部作用域访问当前作用域之外定义的变量时创建的。

<body>
   <p id = "demo"> </p>
   <script>
      const output = document.getElementById("demo");
      function outer() {
         output.innerHTML += "The outer function is executed! <br>";
         function inner() {
            output.innerHTML += "The inner function is executed! <br>";
         }
         inner();
      }
      outer();
   </script>
</body>

3. JavaScript 中的 arguments 对象是什么？

答：JavaScript 变量 arguments 表示传递给函数的参数。

4. 如何获取传递给函数的参数类型？

答：使用 typeof 运算符，我们可以获取传递给函数的参数类型。

function func(x){
   console.log(typeof x, arguments.length);
}
func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

5. 如何获取传递给函数的参数总数？

答：使用 arguments.length 属性，我们可以获取传递给函数的参数总数。

function func(x){
   console.log(typeof x, arguments.length);
}
func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

6. 如何在函数内部获取调用函数的引用？

答：arguments 对象有一个 callee 属性，它引用您所在的函数。

function func() {
   return arguments.callee; 
}
func();

7. 您可以将匿名函数作为参数传递给另一个函数吗？

答：是的！匿名函数可以作为参数传递给另一个函数。

8. 如何在 JavaScript 中处理异常？

答：最新版本的 JavaScript 添加了异常处理功能。JavaScript 实现 try...catch...finally 结构以及 throw 运算符来处理异常。

您可以捕获程序员生成的异常和运行时异常，但您无法捕获 JavaScript 语法错误。

9. JavaScript 中的 onError 事件处理程序的用途是什么？

答：onError 事件处理程序是第一个促进 JavaScript 错误处理的功能。每当页面上发生异常时，都会在 window 对象上触发 error 事件。

onError 事件处理程序提供三条信息来识别错误的确切性质。请查看JavaScript - 错误和异常处理。

  • 错误消息：浏览器为给定错误显示的相同消息。
  • URL：发生错误的文件。
  • 行号：导致错误的给定 URL 中的行号。

10. 您可以使用 JavaScript 访问 Cookie 吗？

答：JavaScript 还可以使用 Document 对象的 cookie 属性操作 Cookie。JavaScript 可以读取、创建、修改和删除应用于当前网页的 Cookie 或 Cookie。

11. 如何使用 JavaScript 创建 Cookie？

答：创建 Cookie 的最简单方法是将字符串值分配给 document.cookie 对象。

document.cookie = "key1 = value1; key2 = value2; expires = date";

12. 如何使用 JavaScript 读取 Cookie？

答：读取 Cookie 与写入 Cookie 一样简单，因为 document.cookie 对象的值就是 Cookie。因此，您可以随时使用此字符串来访问 Cookie。

document.cookie 字符串将保留以分号分隔的名称=值对列表，其中名称是 Cookie 的名称，值是其字符串值。

您可以使用字符串的split() 函数将字符串分解成键和值。

13. 如何使用 JavaScript 删除 Cookie？

有时您可能希望删除 Cookie，以便后续尝试读取 Cookie 返回空值。为此，您只需将过期日期设置为过去的时间即可。

要了解有关Cookie的所有信息，请点击附加链接。

14. 输出顺序是什么，为什么？

console.log('1');

setTimeout(() => {
    console.log('2');
    Promise.resolve().then(() => {
        console.log('3');
    });
}, 0);

Promise.resolve().then(() => {
    console.log('4');
    setTimeout(() => {
        console.log('5');
    }, 0);
});

console.log('6');

输出：首先，同步代码执行打印 1 和 6，然后第一个 Promise 微任务排队并打印 4。在 4 之后，一个新的 setTimeout 排队，原始 setTimeout 执行并打印 2。第一个 setTimeout 中的 Promise 打印 3，最后，最后一个 setTimeout 执行并打印 5

1, 6, 4, 2, 3, 5

15. 修复提供的错误代码以打印 0,1,2,3,4

for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
    }, i * 1000);
}

答：要修复提供的代码以打印 0,1,2,3,4。我们需要将 var 更改为 let，因为 var 具有函数作用域，而不是块作用域。

for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i);
    }, i * 1000);
}

了解面试动态

优秀的 interviewers 很少计划在面试期间提出任何特定问题，通常问题从主题的一些基本概念开始，然后根据进一步的讨论和您的回答继续进行。因此，始终弄清楚您的基本原理，以给人留下良好的印象。
javascript_questions_answers.htm
打印页面
上一页
下一页
广告