❮ ❯

JavaScript 面试题

这些 JavaScript 面试题是专门设计的，旨在帮助您熟悉面试中可能遇到的问题。这些问题是通过分析不同公司面试中最近提出的 JavaScript 问题而精心挑选出来的。

JavaScript 面试问题

JavaScript 面试问题集

我们将精选的问题分为以下三个不同的集合。

初学者
中级
高级

初学者 JavaScript 面试问题

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

1. 什么是 JavaScript?

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

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 运算符的操作数是数字、字符串或布尔值，则其结果为"数字"、"字符串"或"布尔值"，并根据结果返回 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++) {
   // 使用 x[i] 执行某些操作
}

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

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

答:JavaScript 非常支持对象概念。您可以使用对象字面量创建对象，如下所示。

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

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

答:您可以使用点符号编写和读取对象的属性，如下所示。

// 获取对象属性
emp.name // ==> Zara
emp.age // ==> 10

// 设置对象属性
emp.name = "Daisy" // <== Daisy
emp.age = 20 // <== 20

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

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

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

原始数据类型:JavaScript 预定义的数据类型称为原始数据类型，例如:
- 数字
- 字符串
- 布尔值
- 符号
- Undefined
- Null
- BigInt
非原始数据类型:这些数据类型源自原始数据类型。
- 对象
- 函数
- 数组

中级 JavaScript 面试题

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

答:变量的作用域是指程序中定义变量的区域。 JavaScript 变量只有两个作用域。

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

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

答:局部变量优先于同名的全局变量。

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

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

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

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

答:JavaScript 中的函数可以是命名函数，也可以是匿名函数。

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

5. 如何定义匿名函数?

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

// 命名函数
function namedFunction() {
    return "I have a name";
}

// 匿名函数
const anonymousFunction = function() {
    return "I don't have a name";
};

6. 可以将匿名函数赋值给变量吗?

答:可以!匿名函数可以赋值给变量。

7. JavaScript 中 this 运算符的作用是什么?

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

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

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

创建 Date 对象后，您可以使用多种方法对其进行操作。大多数方法仅允许您使用本地时间或 UTC(通用时间，即 GMT)时间获取和设置对象的年、月、日、时、分、秒和毫秒字段。

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

答: JavaScript Number 对象表示数值日期，可以是整数或浮点数。一般来说，您无需担心 Number 对象，因为浏览器会自动将数字字面量转换为 number 类的实例。

语法:创建一个数字对象

var val = new Number(number);

如果参数无法转换为数字，则返回 NaN(非数字)

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

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

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

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

// 模拟鼠标点击:
window.location.href = "https://www.cainiaomax.com/";

// 模拟 HTTP 重定向:
window.location.replace("https://www.cainiaomax.com/");

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

答:JavaScript 可以使用 window 对象的 print 函数来实现此功能。JavaScript 打印函数 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. 什么 typeof 会返回 null 值?

答: 它返回"object"。

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

答: 我们有一个 button 元素，点击它时，会生成一个新的 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() {
        // 创建一个新的段落元素
        var newParagraph = document.createElement('p');
        
        // 设置段落的文本内容
        newParagraph.textContent = '这是一个动态创建的段落。';
        
        // 将段落附加到容器 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 中的参数对象是什么?

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

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 argument.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。

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 字符串将保存一个以分号分隔的"name = value"对列表，其中"name"是 Cookie 的名称，而"value"是其字符串值。

您可以使用字符串的 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);
}

❮ ❯

JavaScript 基础教程

JavaScript 运算符

JavaScript 控制流

JavaScript 函数

JavaScript 对象

面向对象的 JavaScript

JavaScript 版本

JavaScript 异步

JavaScript Cookies

JavaScript 浏览器 BOM

JavaScript Web APIs

JavaScript 事件

JavaScript 错误处理

JavaScript 重要关键字

JavaScript HTML DOM

JavaScript 高级章节

JavaScript 杂项

JavaScript 实用资源