100 道 JavaScript 面试题及答案

1.什么是JavaScript？

JavaScript 是一种客户端/服务器端编程语言。可以将 JavaScript 插入到 HTML 中，使网页具有交互性并使用户参与。

2. JavaScript 中的hoisting是什么？

hoisting意味着所有的声明都被移动到范围的顶部，这发生在代码运行之前。

对于函数，这意味着您可以从范围内的任何地方调用它们，甚至在它们被定义之前。

hello();  // Prints "Hello world! " even though the function is called "before" declaration
function hello(){   console.log("Hello world! ");}

对于变量，hoisting有点不同，它在定义变量范围之前，它们为 undefined 。

例如，在定义变量之前调用它：

console.log(dog);var dog = "Spot";

结果是：

undefined

这可能会令人惊讶，因为您可能预计它会导致错误。

如果你声明一个函数或变量，无论你在哪里声明它，它总是被移动到范围的顶部。

3. isNan() 函数有什么作用？

您可以使用 isNan() 函数来检查值的类型是否为数字且为 NaN。

（是的，NaN 是数字类型，尽管它的名称是“非数字”。这是因为它是底层的数字类型，即使它没有数值。）

例如：

function toPounds(kilos) {  if (isNaN(kilos)) {    return 'Not a Number! Cannot be a weight.';  }  return kilos * 2.2;}
console.log(toPounds('this is a test'));console.log(toPounds('100'));

输出：

Not a Number! Cannot be a weight.220.00000000000003

4. JavaScript 中的负无穷大是什么？

如果在 JavaScript 中将负数除以零，则会得到负无穷大。

例如：

console.log(-10/0)

输出：

-Infinity

5. 什么是未声明变量？未定义的变量怎么样？

程序中根本不存在未声明的变量。如果您的程序试图读取未声明的变量，则会引发运行时错误。

调用未声明变量的示例显然会导致错误：

console.log(dog);

输出：

error: Uncaught ReferenceError: dog is not defined

未定义的变量在程序中声明但没有值。如果程序尝试读取未定义的变量，则会返回未定义的值并且应用程序不会崩溃。

未定义变量的示例是：

let car;console.log(car);

输出：

undefined

6. JavaScript 中有哪几种弹出框？

弹窗的三种类型有警告、确认和提示。让我们看一下每个的使用示例：

01).警告

例如：

window.alert("Hello, world!");

02).确认

例如：

if (window.confirm("Are you sure you want to go?")) {  window.open("exit.html", "See you again!");}

03).提示

例如：

let person = window.prompt("Enter your name");if (person != null) {  console.log('Hello', person);}

7. == 和 === 有什么区别？

== 比较值

=== 比较值和类型

例子：

var x = 100;var y = "100";
(x == y)  // --> true because the value of x and y are the same
(x === y) // --> false because the type of x is "number" and type of y is "string"

8. 隐式类型强制有什么作用？举个例子。

隐式类型强制意味着一个值在幕后从一种类型转换为另一种类型。当表达式的操作数属于不同类型时，就会发生这种情况。

例如，字符串强制转换意味着在数字上应用 + 运算符，字符串会自动将数字转换为字符串。

例如：

var x = 1;var y = "2";
x + y // Returns "12"

但是在处理减法时，强制以另一种方式起作用。它将字符串转换为数字。

例如：

var x = 10;var y = "10";
x - y // Returns 0

9. JavaScript 是静态类型语言还是动态类型语言？这是什么意思？

JavaScript 是动态类型的。

这意味着在运行时检查对象的类型。（在静态类型语言中，类型在编译时检查。）

换句话说，JavaScript 变量与类型无关，这意味着您可以毫无问题地更改数据类型。

var num = 10;num = "Test";

在静态类型语言（如 C++）中，不可能以这种方式将整数更改为字符串。

10. JavaScript 中的 NaN 是什么？

NaN 的意思是“非数字”，这意味着在 JavaScript 中不是正式数字的值。

可能令人困惑的是，使用 typeof() 函数对 NaN 进行类型检查会导致 Number。

console.log(typeof(NaN))

输出：

Number

为避免混淆，请使用 isNaN() 来检查值的类型是 NaN 还是非数字。

11. JavaScript 中的展开运算符是什么？

扩展运算符允许将可迭代对象（数组/对象/字符串）扩展为单个参数/元素。让我们举个例子来看看这个行为，

function sum(a, b, c) {  return a + b + c;}const nums = [15, 25, 35];console.log(sum(...nums));

输出：

12. JavaScript 中的闭包是什么？

JavaScript 中的闭包意味着内部函数可以访问外部函数的变量——即使在外部函数返回之后。

例如，要创建一个自增 1 的计数器，您可以使用闭包：

function createCounter() {   let counter = 0;   function increment() {     counter++;     console.log(counter);   }   return increment;}

这里 createCounter() 是外部函数， increment() 是内部函数。现在您可以按如下方式使用它：

const add = createCounter();add();add();add();

输出

这是有效的，因为存储内部函数 increment() 的 add 仍然可以访问 createCounter() 函数的计数器变量。这是可能的，因为 JavaScript 的闭包特性：即使在外部函数返回后，内部函数也可以访问外部函数的变量。

13. JavaScript 中如何处理异常？

如果表达式抛出错误，您可以使用 try...catch 语句处理它们。

使用此结构的想法是尝试运行一个表达式，例如带有输入的函数，并捕获可能的错误。

例如：

function weekDay(dayNum) {  if (dayNum < 1 || dayNum > 7) {    throw 'InvalidDayNumber'  } else {    return ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'][dayNum - 1];  }}
try { // Try to run the following  let day = weekDay(8);  console.log(day);}catch (e) { // catch an error if the above try failed  let day = 'unknown';  console.log(e);}

14. 什么是网络存储？

Web 存储是一种 API，它为浏览器提供了一种将键值对存储到用户浏览器本地的方法。使用网络存储使这个过程比使用 cookie 更直观。

Web 存储提供了两种存储数据的方式：

本地存储——为客户端存储没有过期日期的数据。

会话存储——只存储一个会话的数据，浏览器关闭时数据消失。

以下是如何从 sessionStorage 保存、访问和删除项目的示例：

// Save data to sessionStoragesessionStorage.setItem('favoriteColor', 'gray');
// Get the color from the sessionStoragelet data = sessionStorage.getItem('favoriteColor');console.log(data);
// Remove saved color preset from sessionStoragesessionStorage.removeItem('favoriteColor');
// Remove ALL the saved data from sessionStoragesessionStorage.clear();

以下是使用 localStorage 执行相同操作的方法：

// Save data to localStoragelocalStorage.setItem('favoriteColor', 'gray');
// Get the color from the localStoragelet data = localStorage.getItem('favoriteColor');console.log(data);
// Remove saved color preset from localStoragelocalStorage.removeItem('favoriteColor');
// Remove ALL the saved data from localStoragelocalStorage.clear();

15. 为什么需要网络存储？

Web 存储（问题 14）使得在本地存储大量数据成为可能。关键是它不会影响网站的性能。

使用网络存储，信息不会存储到服务器中。与 cookie 相比，这使其成为一种更可取的方法。

16.什么是模块？

模块是可重用代码的单元。通常，您可以从模块中将有用的函数或构造函数导入到您的项目中。

从模块导入功能可能如下所示：

import { hello } from './modules/helloWorld.js';

17. JavaScript 中的“作用域”是什么意思？

范围定义了“代码的可见性”。

更正式地说，范围描述了变量、函数和其他对象在代码中的哪些位置可以访问。范围是在运行时在您的代码中创建的。

例如，块作用域表示花括号之间的“区域”：

if(true) {   let word = "Hello";}console.log(word); // ERROR OCCURS

在这里，除了在 if 语句中，不能从其他任何地方访问变量 word。

18. JavaScript 中的高阶函数是什么？

高阶函数对另一个函数进行操作。它要么接受一个函数作为参数，要么返回另一个函数。

例如：

function runThis(inputFunction) {  inputFunction();}
runThis(function() { console.log("Hello world") });

输出

Helloworld

另外一个例子：

function giveFunction() {  return function() {    console.log("Hello world")  }}
var action = giveFunction();action()

输出：

Hello world

19. JavaScript 中的“this”关键字是什么？

这是指对象本身。

例如：

var student = {    name:  "Matt",    getName: function(){      console.log(this.name);    }}
student.getName();

输出：

Matt

要使 getName() 方法在student对象中起作用，该对象必须访问它自己的属性。这可以通过对象内的 this 关键字来实现。

20. call()方法有什么作用？

call() 方法可用于在另一个对象上调用一个对象的方法。

obj1.func.call(obj2)

例子：

var student = {  name: "Matt",  getName: function(){    console.log(this.name);  }}
var anotherStudent = {  name: "Sophie"};
student.getName.call(anotherStudent);

输出：

Sofie

Call() 方法也可用于通过指定所有者对象来调用函数。

例如：

function sayHi(){  console.log("Hello " + this.name);}
var person = {name: "Matt"};
sayHi.call(person);

输出：

Hello Matt

call() 也可以接受参数。

例如：

function sayHi(adjective){  console.log("Hello " + this.name + ", You are " + adjective);}
var obj = {name: "Matt"};
sayHi.call(obj, "awesome");

输出：

Hello Matt, you are awesome

21.什么是apply()方法？

apply() 方法与 call() 方法的作用相同，不同之处在于 apply() 方法接受参数作为数组。

例如：

const person = {    name: 'John'}
function greet(greeting, message) {    return `${greeting} ${this.name}. ${message}`;}
let result = greet.apply(person, ['Hello', 'How are you?']);
console.log(result);

输出：

Hello John. How are you?

在行中：

let result = greet.apply(person, ['Hello', 'How are you?']);

在 greet() 函数中，“Hello”被分配给问候语，“How are you？”被分配给消息。

22.什么是bind()方法？

bind() 方法返回一个新函数，其 this 已设置为另一个对象。

与 apply() 和 call() 不同，bind() 不会立即执行函数。相反，它返回一个新版本的函数，其 this 被设置为另一个值。

让我们看一个例子：

let person = {    name: 'John',    getName: function() {        console.log(this.name);    }};
window.setTimeout(person.getName, 1000);

这不会打印名称“John”，而是打印 undefined。要理解为什么会发生这种情况，请以等效方式重写最后一行：

let func = person.getName;setTimeout(func, 1000);

setTimeout() 接收与人对象分开的函数，但没有人的名字。因此，当 setTimeout() 调用 person.getName 时，名称是未定义的。

要解决此问题，您需要将 getName() 方法绑定到 person 对象：

let func = person.getName.bind(person);setTimeout(func, 1000);

输出：

John

让我们检查一下这种方法是如何工作的：

person.getName 方法绑定到 person 对象。

绑定函数 func 现在将 this 值设置为 person 对象。当您将这个新的绑定函数传递给 setTimeout() 函数时，它知道如何获取此人的姓名。

23.什么是柯里化？

柯里化意味着将具有 n 个参数的函数转换为具有一个或更少参数的 n 个函数。

例如，假设您有一个函数 add() 可以对两个数字求和：

function add(a, b) {    return a + b;}

您可以通过以下方式调用此函数：

add(2,3)

然后让我们柯里化函数：

function add(a) {  return function(b) {    return a + b;  }}

现在您可以通过以下方式调用此柯里化函数：

add(2)(3)

柯里化不会改变函数的行为，它改变了它被调用的方式。

24. 什么是 JavaScript 中的承诺？

Promise 是一个对象，它可能在未来产生一个值。

承诺总是处于可能的状态之一：已履行、已拒绝或未决。

创建承诺如下所示：

const promise = new Promise(function(resolve, reject) {    // implement the promise here})

例如，让我们创建一个在被调用两秒后解析的承诺。

const promise = new Promise(resolve => {  setTimeout(() => {    resolve("Hello, world!");  }, 2000);}, reject => {});

现在 promises 的关键是您可以在使用 .then() 方法解析 promise 后立即执行代码：

promise.then(result => console.log(result));

输出：

Hello, world!

Promise 可以链接在一起，以便已解决的 promise 返回一个新的 promise。

下面是 promise 的流程图，也说明了如何将它们链接起来：

25. 为什么要使用promises？

在 JavaScript 中，promises 对于异步操作很有用。

过去，必须使用回调来处理异步操作，即使用在操作完成后立即执行的函数。这导致了“回调地狱”，一个带有嵌套回调的金字塔形代码。

Promises 通过减少回调地狱和编写更清晰的代码，为回调提供了另一种方法。这是可能的，因为 promise 可以按以下方式链接：

26. JavaScript 中的回调函数是什么？

回调函数是作为参数传递给另一个函数的函数。当某些动作完成时，此函数在传递给它的函数内部执行以“回调”。

让我们看一个例子：

function greetName(name) {  console.log('Hello ' + name);}
function askName(callback) {  let name = prompt('Enter your name.');  callback(name);}
askName(greetName);

此代码会提示您输入姓名，当您输入姓名时，它会对该姓名说“你好”。因此，回调函数（在本例中为 greetName）仅在您输入名称后执行。

27. 为什么在 JavaScript 中使用回调？

回调很有用，因为 JavaScript 是一种事件驱动的语言。换句话说，它不是等待响应，而是在监听其他事件的同时继续执行。

上面的例子展示了回调在 JavaScript 中的用处：

function greetName(name) {  console.log('Hello ' + name);}
function askName(callback) {  let name = prompt('Enter your name.');  callback(name);}
askName(greetName);

28. 什么是 JavaScript 中的严格模式？

严格模式允许您将程序设置为在严格的上下文中运行。这可以防止执行某些操作。此外，还会抛出更多异常。

表达“使用严格”；告诉浏览器启用严格模式。

例如：

"use strict";number = 1000;

这会导致错误，因为严格模式会阻止您为未声明的变量赋值。

29.什么是立即调用函数？

立即调用函数 (IIFE) 在定义后立即运行。

例如：

(function(){   // action here})();

要了解 IIFE 的工作原理，请查看它周围的括号：

当 JavaScript 看到关键字 function 时，它假设有一个函数声明来了。
但是上面的声明是无效的，因为函数没有名字。
为了解决这个问题，使用了声明周围的第一组括号，这告诉解释器这是一个函数表达式，而不是声明。

(function (){   // action here;})

然后，要调用该函数，需要在函数声明的末尾添加另一组括号，这类似于调用任何其他函数：

(function (){  // action here})();

30. 什么是cookie？

Cookie 是存储在您计算机上的一个小数据包。

例如，网站可以在访问者的浏览器上放置 cookie，以便在用户下次访问该页面时记住登录凭据。

在幕后，cookie 是带有键值对的文本文件。要创建、读取或删除 cookie，请使用 document.cookie 属性。

例如，让我们创建一个保存用户名的 cookie：

document.cookie = "username=foobar123";

31. 为什么要在 JavaScript 中使用严格模式？

严格模式有助于编写“安全”的 JavaScript 代码。这意味着错误的语法实践会转化为真正的错误。

例如，严格模式会阻止创建全局变量。

要声明严格模式，请添加“use strict”；在你想处于严格模式下的语句之前的语句：

'use strict';const sentence = "Hello, this is very strict";

32.双感叹号有什么作用？

双感叹号将任何东西转换为 JavaScript 中的布尔值。

!!true    // true!!2       // true!![]      // true!!"Test"  // true
!!false   // false!!0       // false!!""      // false

这是可行的，因为 JavaScript 中的任何东西本质上都是“Truthy”或“Falsy”。

33. 如何删除属性及其值？

您可以使用 delete 关键字从对象中删除属性及其值。

让我们看一个例子：

var student = {name: "John", age:20};delete student.age;
console.log(student);

输出：

{name: "John"}

34. 如何检查 JavaScript 中变量的类型？

使用 typeof 运算符。

typeof "John Abraham"  // Returns "string"typeof 100             // Returns "number"

35. JavaScript 中的 null 是什么？

null 表示没有值，它突出显示变量不指向任何对象。

null 的类型是一个对象：

var name = null;console.log(typeof(name))

36. Null 与 undefined?

Null

是一个值，表示变量不指向任何对象。
是对象类型。
表示 null、空或不存在的引用。
表示缺少变量值。
使用原始操作转换为 0。

Undefined

是一个值，表示已声明但没有值的变量
类型未定义。
表示变量不存在。
使用原始操作转换为 NaN。

37. 你能用 JavaScript 访问历史记录吗？

这是可以的，您可以通过包含浏览器历史记录的 window.history 访问历史记录。

要检索上一个和下一个 URL，可以使用以下方法：

window.history.back()window.history.forward()

38.什么是全局变量？

全局变量在代码中随处可用。

要创建全局变量，请省略 var 关键字：

x = 100; // Creates a global variable.

此外，如果在任何函数之外使用 var 创建变量，则会创建一个全局变量。

39. JavaScript 与 Java 有关系吗？

没有关系。它们是两种不同的编程语言，彼此之间没有任何关系。

40. 什么是 JavaScript 事件？

事件是 HTML 元素发生的事情。当在 HTML 页面中使用 JavaScript 时，它可以对事件做出反应，例如，单击按钮。

让我们创建一个 HTML 页面，其中有一个按钮，当该按钮被单击时，会出现一个警告：

<!doctype html>
<html> <head>   <script>     function sayHi() {       alert('Hi, how are you?');     }</script> </head>
 <body>   <button type="button" onclick="sayHi()">Click here</button> </body>
</html>

41. preventDefault() 方法有什么作用？

preventDefault() 取消一个方法。名称 preventDefault 很好地描述了这种行为。它阻止事件采用默认行为。

例如，您可以在单击提交按钮时阻止表单提交：

document.getElementById("link").addEventListener("click", function(event){  event.preventDefault()});

42.什么是setTimeout()方法？

setTimeout() 方法在指定的毫秒数后调用一个函数（一次）。例如，让我们在一秒（1000 毫秒）后记录一条消息：

setTimeout(function() {    console.log("Good day");}, 1000);

43.什么是setInterval()方法？

setInterval() 方法以自定义间隔定期调用函数。

例如，让我们每秒定期记录一条消息：

setInterval(function() {    console.log("Good day");}, 1000);

44. 什么是 ECMAScript？

ECMAScript 是构成 JavaScript 基础的脚本语言。

ECMAScript 由 ECMA 国际标准组织标准化（查看 ECMA-262 和 ECMA-402 规范）。

45.什么是JSON？

JSON（JavaScript Object Notation）是一种用于交换数据的轻量级数据格式。

例如，这是一个 JSON 对象：

{    'name': 'Matt',    'address': 'Imaginary Road 22',    'age': 32,    'married': false,    'hobbies': ['Jogging', 'Tennis', 'Padel']}

JSON 的语法规则是：

数据以键值对的形式存在。
数据以逗号分隔。
大括号定义一个对象。
方括号定义一个数组。

46.JSON用在什么地方？

当向服务器发送数据和向服务器发送数据时，数据必须是文本格式。

JSON 是一种纯文本格式，允许将数据发送到服务器以及从服务器向浏览器发送数据。几乎所有编程语言都支持 JSON，因此它也可以与其他语言一起使用。

47. 为什么要使用JSON stringify？

当您向服务器发送数据时，它必须是一个字符串。

要将 JavaScript 对象转换为字符串，可以使用 JSON.stringify() 方法。

var dataJSON = {name: "Matt", age: 51};var dataString = JSON.stringify(dataJSON);console.log(dataString);

输出：

'{"name":"Matt","age":51}'

48. 如何将 JSON 字符串转换为 JSON 对象？

当您从服务器接收数据时，它始终是字符串格式。要将 JSON 字符串转换为 JavaScript 对象，请使用 JSON.parse() 方法。

var data = '{"name":"Matt", "age":51}';var dataJSON = JSON.parse(data);console.log(dataJSON);

输出：

{    name:"Matt",    age:51}

49. 如何为变量分配默认值？

使用逻辑运算符 || 在分配中提供默认值。

const a = b || c;

这使得如果 b 是假的，那么 c 将被分配给 a。（Falsy 表示 null、false、undefined、0、空字符串或 NaN。）

50. 你能为函数定义属性吗？

是的，因为函数也是对象。

让我们看一个例子：

let func = function(x) {
};func.property1 = "Hello there";console.log(func.property1);

输出：

Hello there

51. promises中的race method是什么意思？

Promise.race() 方法返回首先解决或拒绝的Promise。

让我们用一个例子来证明这一点，第二个promise 比第一个promise 更快地解决：

let p1 = new Promise(function(resolve, reject) {    setTimeout(resolve, 500, 'the first promise');});
let p2 = new Promise(function(resolve, reject) {    setTimeout(resolve, 100, 'the second promise');});
Promise.race([p1, p2]).then(function(value) {  console.log(value, 'was faster');});

输出：

the second promise was faster

52. promise.all() 方法有什么作用？

Promise.all 是一个将一系列promise 作为输入的promise 。它在以下情况下得到解决：

要么所有的输入promise 都得到解决。
或者其中任何一个被拒绝。

例如，promise.all 等待所有这三个promise 完成：

var prom1 = new Promise((resolve, reject) => {  setTimeout(() => {    resolve("Yay!");  }, 1000);});var prom2 = Promise.resolve(10);var prom3 = 100;
Promise.all([prom1, prom2, prom3]).then(values => {  console.log(values);});

一秒后输出：

["Yay", 10, 100]

53.什么是eval()函数？

eval() 函数是计算字符串中的代码，要评估的字符串可以是表达式、变量、语句或语句序列。

例如：

console.log(eval("5+10"));

输出：

54.什么是事件冒泡？

在事件冒泡中，事件通过在最内层元素上运行事件处理程序开始。然后它触发父母的事件处理程序，直到它到达最外层的元素。

查看此操作的最佳方法是创建一个 HTML 文档，在 divs 中包含 divs：

<style>  body * {    margin: 20px;    border: 1px solid blue;  }</style>
<div onclick="alert('Outer layer')">Outer layer  <div onclick="alert('Middle layer')">Middle layer    <div onclick="alert('Inner layer')">Inner layer
    </div>  </div></div>

在每个 div 中，都有一个 JavaScript 警报，当单击该 div 时会触发该警报。

结果页面如下所示：

如果您现在单击内层，它会触发分配给该 div 的警报，并且会触发父 div 的警报。

55.什么是时间死区？

时间死区意味着变量无法访问，即使它已经在范围内。

让我们首先看一下当您尝试在未初始化的情况下将变量记录到控制台时会发生什么：

console.log(x);var x = "Yay";

输出：

undefined

您可能希望这会导致错误，但它会打印出 undefined。

发生这种情况是因为hoisting，这意味着所有声明都被移动到范围的顶部。由于hoisting，上面的代码在幕后表现如下：

var x;console.log(x);x = "Yay";

这里 undefined 自动分配给顶部的变量，这使得在定义它之前使用它成为可能。

但是让我们看看当我们使用 let 而不是 var 做同样的事情时会发生什么：

console.log(x);let x = 10;

输出：

error: Uncaught ReferenceError: Cannot access 'x' before initialization

发生这种情况是因为 let 的hoisting方式与 var 不同。当一个 let 变量被hoisting时，它不会变成未定义的。相反，它是不可访问的，或者在时间死区中，直到它被分配一个值。

56.什么是URI？

URI 或统一资源标识符是一组用于区分资源的字符，URI 允许互联网协议执行资源之间的操作。

URI 看起来像这样：

hello://example.com:8042/there?name=jack#sumthing

57. 什么是 DOM？

加载网页后，浏览器会为该页面创建一个 DOM。这赋予了 JavaScript 创建动态 HTML 的能力。

DOM 或文档对象模型充当 HTML 文档的 API，它定义了文档的结构，它还指定如何访问和修改文档。

58. 文档加载与 DOMContentLoaded？

DOMContentLoaded 事件在加载和解析 HTML 文档时触发，它不等待资产（例如样式表和图像）。

文档加载事件仅在加载整个页面（包括所有资产）后触发。

例如，下面是如何使用 DOMContentLoaded 在 DOM 完全加载时发出通知：

window.addEventListener('DOMContentLoaded', (event) => {    console.log('DOM is now loaded!');});

这是一个示例，说明如何在加载特定页面时添加侦听器：

window.addEventListener('load', (event) => {  console.log('The page is now loaded!');});

59. HTML 属性与 DOM 属性？

当您编写 HTML 时，您可以在 HTML 元素上定义属性。然后，当您使用浏览器打开该页面时，您的 HTML 代码将被解析。至此，一个DOM节点就创建好了。这个 DOM 节点对应于您刚刚编写的 HTML 文档。此 DOM 节点是一个具有属性的对象。

例如，这个 HTML 元素：

<input id="my-input" type="text" value="Name:">

具有三个属性，id，type，value。

当浏览器解析这个 HTML 元素时

它获取此输入字段并从中烘焙一个 HTMLInputElement 对象。
这个对象有accept、accesKey、align等几十个属性。
它还将一些原始的 HTML 属性变成了属性，例如 id 和 type。但是，例如，value 属性不引用 value 属性。

60.什么是同源策略？

同源策略是一种有价值的安全机制。它可以防止 JavaScript 越过域边界发出请求。

来源是指 URI 方案、主机名和端口号。同源策略使得一个页面上的脚本不可能访问另一个页面上的敏感数据。

61. JavaScript 是编译语言还是解释语言？

JavaScript 是一种解释型语言。

浏览器中的解释器读取 JavaScript 代码、解释每一行并运行它。

62. JavaScript 是区分大小写的语言吗？

JavaScript 是一种区分大小写的语言。

关键字、变量、函数名等需要大写一致。

为了演示，这段代码有效

let i = 1;while(i < 2) {  console.log(i);  i++;}

但这并没有，因为 while 被大写了，尽管它不应该大写。

let i = 1;WHILE(i < 2) {  console.log(i);  i++;}

63. JavaScript 中有多少个线程？

JavaScript 使用单线程。它不允许编写解释器可以在多个线程或进程中并行运行的代码。

这意味着它按顺序执行代码并且必须执行完一段代码才能移动到下一段代码。

当您在网页上显示警报时，就是一个很好的例子。警报弹出后，您无法与页面交互，直到警报关闭。

alert("Hello there!");

64.“break”语句有什么作用？

break语句跳出循环，继续执行循环外的代码。

例如，此循环在遇到数字 5 后终止：

for (var i = 0; i < 100; i++) {  if (i === 5) {    break;  }  console.log('Number is ', i);}
console.log('Yay');

Number is 0Number is 1Number is 2Number is 3Number is 4Yay

65. “continue”语句的作用是什么？

continue 语句跳过一轮循环。

例如，此循环会跳过数字 2 和 3：

for (var i = 0; i < 5; i++) {  if (i === 2 || i === 3) {    continue;  }  console.log('Number is ', i);}

输出：

66.什么是正则表达式？

正则表达式，也称为 regex 或 regexp，是一组构成搜索模式的字符。它是一种模式匹配工具，常用于 JavaScript 和其他编程语言。

例如，让我们使用正则表达式从字符串中查找任意数字：

var regex = /\d+/g;var string = "You have 100 seconds time to run";
var matches = string.match(regex);
console.log(matches);

输出是所有匹配项的数组：

[100]

例如，正则表达式可用于在大型文本文件中搜索电子邮件或电话号码。

67. 调试代码时断点的作用是什么？

断点允许您在 JavaScript 代码中查找错误。

当执行调试器语句并出现调试器窗口时，您可以在代码中设置断点。

在断点处，JavaScript 停止执行并让您检查值和范围以解决可能的问题。

68.什么是条件运算符？

条件运算符是编写 if-else 语句的简写。条件运算符有时称为三元运算符。

例如：

// Regular if-else expression:const age = 10;if(age < 18){  console.log("Minor");} else {  console.log("Adult");}
// Conditional operator shorthand for the above if-elseage < 18 ? console.log("Minor") : console.log("Adult");

69. 你能链接条件运算符吗？

对的，这是可能的。有时它很有用，因为它可以使代码更易于理解。

让我们看一个例子：

function example() {    if (condition1) { return value1; }    else if (condition2) { return value2; }    else if (condition3) { return value3; }    else { return value4; }}
// Shorthand for the above functionfunction example() {    return condition1 ? value1         : condition2 ? value2         : condition3 ? value3         : value4;}

70. freeze() 方法有什么作用？

freeze() 方法冻结一个对象。它使对象不可变。

冻结对象后，无法向其添加新属性。

例如：

const item = { name: "test" };Object.freeze(item);item.name = "Something else"; // Error

71. 如何获取对象的键列表？

使用 Object.keys() 方法。

例如：

const student = {  name: 'Mike',  gender: 'male',  age: 23};
console.log(Object.keys(student));

输出：

["name", "gender", "age"]

72. JavaScript 的原始数据类型有哪些？

原始数据类型具有原始值。JavaScript 中有七种不同的原始数据类型：

string——单词。例如，“John”。
number— 数值。例如, 12。
boolean——真或假。例如，true。
null — 没有值。例如，let x = null；
undefined——声明变量但没有值的类型。例如，当以这种方式创建变量 x 时，let x; , x 变得undefined。
bigint — 用于表示大于 2^53–1 的整数的对象。例如 BigInt(121031393454720292)
symbol — 用于创建独特符号的内置对象。例如，let sym1 = Symbol('test')

73.有哪些方法可以访问对象的属性？

可以通过三种方式访问属性。

点符号。

例如：

obj.property

方括号表示法。

例如：

obj["property"]

表达式符号。

例如：

obj[expression]

74. 如何在页面加载后执行 JavaScript 代码？

您可以通过三种方式执行此操作：

将属性 window.onload 设置为在页面加载后执行的函数：

window.onload = function ...

将属性 document.onload 设置为在页面加载后执行的函数：

document.onload = function ...

将 HTML 属性的 onload 属性设置为 JS 函数：

<body onload="script();">

75.什么是错误对象？

错误对象是一个内置对象，如果发生错误，它会为您提供详细的错误信息。

错误对象有两个属性：

nema
message

例如，假设 sayHi() 函数抛出错误。发生这种情况时，catch 块会为您提供一个错误对象，您可以将其打印到控制台。

try {  sayHi("Welcome");}catch(error) {  console.log(error.name + "\n" + error.message);}

76.NoScript标签有什么作用？

Noscript 标签用于检测和响应禁用 JavaScript 的浏览器。

您可以使用 noscript 标签来执行一段通知用户的代码。

例如，您的 HTML 页面可以有一个像这样的 noscript 标签：

<script>  document.write("Hello World!");</script>
<noscript>  Your browser does not support JavaScript!</noscript>

77. 什么是入口控制循环？

在入口控制循环中，在进入循环体之前测试条件。

例如，for 循环和 while 循环就属于这一类：

let nums = [1,2,3];for (let num of nums) {    console.log(num);}

输出：

78. 什么是退出控制循环？

在退出控制循环中，在循环结束时评估条件。这意味着无论条件为真还是假，循环体至少执行一次。

例如，do-while 循环就属于这一类：

const i = 0;do {  console.log('The number is', i);} while (i !== 0);

输出：

The number is 0

79.什么是匿名函数？

匿名函数是没有名字的函数。

匿名函数通常分配给变量名或用作回调函数。

这是一个带有名称的函数供参考：

function example(params) {    // do something}

这是一个分配给变量的匿名函数：

const myFunction = function() {    // do something};

这是一个用作回调的匿名函数：

[1, 2, 3].map(function(element) {      // do something});

80.什么是迭代器？

迭代器协议使对象可以生成一系列值。

迭代器必须实现 next() 方法以获取序列中的下一个值。这个方法返回一个对象

value——迭代序列中的下一个值

done——如果这个值是序列中的最后一个，则为真。如果不是，那就是false。

下面是创建和使用迭代器的示例。该函数实现了一个范围迭代器，可以由 rangeIter(1,5) 调用，并打印值 1 2 3 4。

// define a function that returns an iterator function rangeIter(start = 0, end = Infinity, step = 1) {    let nextIndex = start;    let count = 0;    // create the actual iterator object    const iterator = {       // create the next() method that knows how to get the next value in the sequence       next: function() {           let result;           if (nextIndex < end) {               // Return the value and set done 'false' because the iteration is not completed               result = { value: nextIndex, done: false }               nextIndex += step;               count++;               return result;           }           // set done 'true' when the end has been reached           return { value: count, done: true }       }    };    // return an iterator object    return iterator;}
// Using the iteratorconst it = rangeIter(1, 5);
let result = it.next();while (!result.done) { // prints 1 2 3 4     console.log(result.value);     result = it.next();}

81. 什么是可迭代对象？

可迭代协议意味着一个对象可以被迭代，因此实现了迭代器协议（问题 80）。

换句话说，您可以在任何可迭代对象上使用 for...of 循环来遍历它生成的值序列。

例如，Array 或 Map 在 JavaScript 中是可迭代的，但 Object 不是。

下面是一个在数组上应用 for...of 循环的示例，该数组本质上是可迭代的：

const nums = [1,2,3];for (let num of nums) {    console.log(num);}

输出：

82.什么是生成器？

生成器是迭代器的替代品。您可以编写非连续执行的迭代代码。换句话说，可以暂停生成器函数的执行。

生成器是使用 function* 语法定义的。它们不是返回值，而是产生值。

创建时，生成器不执行它们的代码。相反，它们返回一个 Generator 对象，它本质上是一个迭代器。当您在生成器对象上调用 next() 时，它会运行代码，直到遇到 yield 语句，然后停止。

例如，这里有一个生成器，其功能与上面迭代器部分中的迭代器完全相同：

// Create a generator function that returns an iteratorfunction* rangeIter(start = 0, end = Infinity, step = 1) {    let count = 0;    for (let i = start; i < end; i += step) {        count++;        yield i;    }    return count;}// Create a generator objectconst it = rangeIter(1, 5);// Use the generator exactly how you'd use an iteratorlet result = it.next();while (!result.done) { // prints 1 2 3 4     console.log(result.value);     result = it.next();}

rangeIter 函数比迭代器示例中的 rangeIter 更容易阅读。然而两者都做完全相同的事情。

83. 什么是 for of 循环？

For…of 循环可用于迭代 JavaScript 中的可迭代对象。

例如，您可以使用 for...of 循环打印数组的内容：

const nums = [1,2,3];for (const num of nums) {    console.log(num);}

输出：

84.什么是nodejs？

Node.js 建立在 Chrome 的 JS 运行时之上。它是一个以可扩展方式构建网络应用程序的平台。

85.什么是事件循环？

事件循环是一个回调函数队列。它处理所有异步回调。

当一个异步函数执行时，一个回调函数被推入队列。在异步任务完成之前，JavaScript 引擎不会触发事件循环。

例如，事件循环的结构可能如下所示：

while (queue.waitForMessage()) {    queue.processNextMessage();}

86.什么是一元运算符？

一元 + 运算符用于将变量转换为数字。

如果变量无法转换，则将其转换为 NaN（这是数字的特殊情况，因此类型仍然是数字）。

例如：

let str = "10";let num = +str;
console.log(typeof str, typeof num);
let word = "Hello";let n = +word;
console.log(typeof word, typeof n, n);

输出：

string, numberstring, number, NaN

87. 如何对数组的元素进行排序？

使用 sort() 对数组的项目进行排序。这不会创建一个新数组，而是“就地”对原始数组进行排序，即直接修改它。

let months = ["Adam", "Sam", "Jack", "Bill"];months.sort();console.log(months);

输出：

["Adam", "Bill", "Jack", "Sam"]

88. 什么是 TypeScript？

TypeScript 是带有类型的 JavaScript。它是 Microsoft 创建的 JavaScript 超集。

TypeScript 将可选类型、类、async/await 等类型添加到纯 JavaScript 中。

这是 TypeScript 函数的一个简单示例：

function greet(name: string): string {   return "Hello, " + name;}
console.log(greet("Michael"));

89. JavaScript 中的构造函数是什么？

构造函数是用于创建和初始化类对象的方法。当您从一个类中实例化一个新对象时，它会被执行。

例如：

class Student {  constructor() {    this.name = "Mike";  }}
let student = new Student();console.log(student.name);

输出：

Mike

90.什么是ES6？

ES6（ECMAScript 6）是 JavaScript 编程语言的第六版。它于 2015 年 6 月发布。

91.什么是模板文字？

模板文字允许您将表达式直接嵌入到字符串中。

使用模板文字时，不要用引号声明字符串，而是使用反引号 (`)。

要将变量或表达式嵌入到字符串中，您需要将其添加到 ${} 之间

例如：

console.log(`This is the ${10 * 10}th time`)

输出：

This is the 100th time

92. 如果没有第三个变量，如何交换两个变量？

使用解构从数组中分离值。这也可以用于在没有第三个助手的情况下交换两个变量：

let a = 1;let b = 2;[a, b] = [b, a];console.log(a, b)

输出：

2 1

93. 什么是 ArrayBuffer？

ArrayBuffer 是通用的固定长度二进制数据缓冲区。

let buffer = new ArrayBuffer(16);console.log(buffer.byteLength)

输出：

94.什么是原型？

所有 JavaScript 对象都从原型继承属性。

例如：

Math 对象从 Math 原型继承属性
Array 对象从 Array 原型继承属性。

原型是对象的特征。它描述了与之关联的属性。它充当对象的蓝图。

例如，您可以访问对象的原型以向对象构造函数添加新属性，例如：

function Fruit(name, weight) {  this.name = name;  this.weight = weight;}Fruit.prototype.description = "Yum!";

95.什么是箭头函数？

箭头函数提供了一种在 JavaScript 中创建函数的简写方式。

您只能在函数表达式中使用箭头函数。

这是常规函数和箭头函数的比较：

// Traditional functionvar sum = function(a,b){  return a + b;}
// Arrow Functionvar sum = (a,b) => a + b;

箭头函数声明时不使用 function 关键字。

如果只有一个（返回）表达式，则不需要使用 return 关键字。

在上面，花括号也不见了。这只有在箭头函数只包含一个表达式时才有可能。如果还有更多，则需要在箭头后添加花括号。

96. dir()方法有什么用？

console.dir() 将 JavaScript 对象的属性的交互式列表显示为 JSON。

例如：

const student = { "name":"Mike", "id": 132123, "city": "New York"};console.dir(student);

在控制台中产生以下交互式列表：

97. 如何禁用网页上的右键单击？

您可以通过从 body 元素的 oncontextmenu 属性返回 false 来禁用网页上的右键单击。

<body oncontextmenu="return false;">

98.什么是一元函数？

一元函数是只接受一个参数的函数。

例如：

function greet(name){    console.log('Hello', name);}

99.什么是纯函数？

纯函数是一种函数，无论何时何地被调用，它都以相同的参数返回相同的结果。如果一个函数不依赖于程序执行期间的状态或数据更改，那么它就是纯函数。

例如，计算圆面积的函数是纯函数：

function circleArea(radius) {  return Math.PI * Math.pow(radius, 2);}

100.什么是对象解构？

对象解构是一种从对象（或数组）中提取属性的方法。

在 ES6 之前，你需要这样做来提取对象的属性：

const PersonDetails = {  name: "Matty",  age: 42,  married: false}
const name = PersonDetails.name;const age = PersonDetails.age;const married = PersonDetails.married;
console.log(name);console.log(age);console.log(married);

但是自 ES6 以来，您可以通过利用对象解构来使用一行代码来完成此操作：

const PersonDetails = {  name: "Matty",  age: 42,  married: false}
const {name, age, married} = PersonDetails;
console.log(name);console.log(age);console.log(married);

100 道 JavaScript 面试题及答案相关推荐

100 道 JavaScript 面试题及答案（下）
编辑整理 | 杨小爱我们接上昨天的上篇内容<100 道 JavaScript 面试题及答案(上)>,今天我们开启下篇,把后面的50道题认真看完. 现在,我们就开始吧. 51. promi ...
100 道 JavaScript 面试题及答案汇总(下）
英文 | https://betterprogramming.pub/100-javascript-interview-questions-58e22e30f7f1 翻译 | 杨小二接上篇< ...
100道JavaScript 面试题和答案(下）
英文 | https://betterprogramming.pub/100-javascript-interview-questions-58e22e30f7f1 翻译 | 杨小二接上篇<1 ...
建议收藏 100 道 Linux 面试题附答案
关注公众号"Java后端技术全栈" 回复"000"获取程序员必备电子书大家好,我是老田,今天我给大家分享100道Linux面试题. 本文一共 3万多字,分别从 ...
100道+ JavaScript 面试题，助你查漏补缺
来源 | https://github.com/Wscats/articles 最近在整理 JavaScript 的时候发现遇到了很多面试中常见的面试题,本文主要是在 Github 等各大论坛收录的 ...
100道 Dubbo面试题及答案（2021最新）
Redis面试题及答案[2021最新版]Dubbo面试题大全(2021版),发现网上很多Dubbo面试题都没有答案,所以花了很长时间搜集,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小 ...
100道Redis面试题及答案（2021最新）
在网上看到有关Redis的120道面试题,但是没有给出答案,之前我也在寻找这份Redis面试题的答案,今天特地把答案分享出来. 花了大量时间整理了这套Redis面试题及答案,希望对大家有帮助哈~ 弄明 ...
100道爬虫面试题以及答案（宝典级别的）
1. http 基于 tcp/ip 协议 2. 百度是通用性爬虫 3. http 返回的状态码代表成功的是 200 4. 网页编码使用的函数式 encode() 5. 解码使用的函数式是 decode ...
2023年常见的20道JavaScript面试题及其答案解析，你知道多少
JavaScript中typeof操作符有哪些返回值? 答案:typeof操作符返回字符串数据类型.可能的返回值有:"undefined"."boolean". ...

100 道 JavaScript 面试题及答案

100 道 JavaScript 面试题及答案相关推荐

最新文章

热门文章