2023年常见的20道JavaScript面试题及其答案解析，你知道多少

1. JavaScript中typeof操作符有哪些返回值？
   答案：typeof操作符返回字符串数据类型。可能的返回值有：“undefined”、“boolean”、“number”、“string”、“object"和"function”。
2. 如何检查一个变量是否为数组？
   答案：可以使用Array.isArray()方法检查一个变量是否为数组。该方法在ES5中引入，在ES5之前，可以使用Object.prototype.toString.call方法。
   示例：

const arr = [1, 2, 3];
console.log(Array.isArray(arr));  // true
console.log(Object.prototype.toString.call(arr) === "[object Array]");  // true
1
2
3

3. 如何遍历一个对象的所有属性？
   答案：可以使用for…in循环遍历一个对象的所有属性。for…in循环会迭代对象的可枚举属性，包括继承的属性，但不包括原型链上的属性。
   示例：

const obj = {a: 1, b: 2, c: 3};
for (const prop in obj) {
  console.log(prop + ": " + obj[prop]);
}
// 输出：a: 1  b: 2  c: 3
1
2
3
4
5

4. 在JavaScript中如何创建一个新的对象？

• 使用Object构造函数：const obj = new Object();
• 使用对象字面量：const obj = {}; 或者 const obj = {a: 1, b: 2, c: 3};
• 使用Object.create()方法：const obj = Object.create(null);（该方法可以指定新对象的原型）
• 使用工厂函数：function createObj() {return {};} const obj = createObj();

5. 下面的代码会输出什么？

console.log(1 + "2" + "2");  // "122"
console.log(1 + +"2" + "2");  // "32"
console.log(1 + -"1" + "2");  // "02"
console.log(+"1" + "1" + "2");  // "112"
console.log("A" - "B" + "2");  // "NaN2"
console.log("A" - "B" + 2);  // NaN
1
2
3
4
5
6

6. 如何判断一个变量是否为undefined？
   答案：有多种方式可以判断一个变量是否为undefined。

• 使用typeof操作符：typeof varName === “undefined”
• 直接比较varName与undefined：varName === undefined
• 使用void操作符：void(0) === undefined

7. 如何将一个字符串转换为数字？
   答案：可以使用parseInt()或parseFloat()方法将一个字符串转换为数字。parseInt()方法将字符串转换为整数，parseFloat()方法将字符串转换为浮点数。
   示例：

const str = "123";
const num1 = parseInt(str);  // 123
const num2 = parseFloat(str);  // 123.0
1
2
3

8. 如何将一个数字转换为字符串？
   答案：可以使用toString()方法将一个数字转换为字符串。
   示例：

const num = 123;
const str = num.toString();  // "123"
1
2

9. 下面的代码会输出什么？

console.log(false == '0');  // true
console.log(false === '0');  // false
1
2

10. 如何从一个数组中删除一个元素？
    答案：可以使用splice()方法从一个数组中删除一个元素。
    示例：

const arr = [1, 2, 3];
arr.splice(1, 1);
console.log(arr);  // [1, 3]
1
2
3

11. 如何在JavaScript中实现继承？
    答案：JavaScript中的继承可以通过原型链实现。子类可以使用Object.create()方法继承父类的原型。还可以使用ES6中的class关键字和extends关键字来定义类和继承关系。
    示例：
    // 原型链继承

function Animal(name) {
  this.name = name;
}
Animal.prototype.sayName = function() {
  console.log(this.name);
};
function Dog(name) {
  this.breed = "Unknown";
  Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.sayBreed = function() {
  console.log(this.breed);
};
 const myDog = new Dog("Fido");
myDog.sayName();  // "Fido"
myDog.breed = "Husky";
myDog.sayBreed();  // "Husky"
 // ES6的class关键字和extends关键字
class Animal {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}
class Dog extends Animal {
  constructor(name) {
    super(name);
    this.breed = "Unknown";
  }
  sayBreed() {
    console.log(this.breed);
  }
}
 const myDog = new Dog("Fido");
myDog.sayName();  // "Fido"
myDog.breed = "Husky";
myDog.sayBreed();  // "Husky"
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

12. 如何在JavaScript中处理异步操作？
    答案：可以使用回调函数、Promise和async/await来处理异步操作。

• 回调函数：将异步操作的结果传递给一个回调函数，当异步操作完成时调用该函数。回调函数必须保证只会被调用一次，否则可能会出现未知的错误。
• Promise：Promise可以返回一个异步操作的结果对象，该对象可以处于三种状态之一：pending（等待中）、resolved（已完成）和rejected（已拒绝）。当异步操作完成时，可以调用resolve()方法将结果传递给Promise对象；当异步操作失败时，可以调用reject()方法传递错误信息。
• async/await：async/await是ES8中引入的异步操作处理方式。async函数会返回一个Promise对象，该对象的状态取决于async函数的执行结果；await操作符可以暂停async函数的执行，直到异步操作完成并返回结果。

13. 如何判断一个变量是否为对象？
    答案：可以使用typeof操作符和instanceof操作符来判断一个变量是否为对象。

• typeof操作符：typeof varName === “object”，该方式不能区分数组和对象。
• instanceof操作符：varName instanceof Object，该方式不能区分原始值和对象。

14. JavaScript中的闭包是什么？
    闭包指的是在一个函数内部定义的另一个函数，并且内部函数可以访问到外部函数的变量。闭包可以解决JavaScript中变量作用域的问题，也可以实现一些高级的编程技巧，比如函数式编程中的柯里化。
    在JavaScript中，每当创建一个函数时，都会同时创建一个作用域链。该作用域链是保存了当前上下文中所有变量对象的一个列表。当一个函数被创建时，它的作用域链就被初始化为当前上下文中的活动对象（活动对象是指正在执行的函数的变量对象）。当函数执行结束后，它的作用域链就会被销毁，其中的变量也会被销毁。
    闭包是通过函数内部的函数来实现的。内部函数可以访问外部函数的变量，而外部函数的变量又可以在内部函数执行后被保留下来。这种变量的保留方式称为“闭包”。
    以下是一个简单的闭包的例子：

function outer() {
  var count = 0;
  function inner() {
    count +=1;
    console.log(count);
  }
  return inner;
}
var counter = outer();
counter(); // 输出 1
counter(); // 输出 2
counter(); // 输出 3
1
2
3
4
5
6
7
8
9
10
11
12

在这个例子中，函数 outer 返回了一个内部函数 inner 。每次调用内部函数 inner ，它的闭包都会保留变量 count 的值，所以 count 的值会一直增加。

16. JavaScript中的变量提升是什么？
    答案：变量提升是JavaScript中的一种特性，即在代码执行之前，所有变量声明会被提升到作用域的顶部。这意味着可以在声明之前使用变量，但是该变量的值是undefined。函数声明也会被提升到作用域的顶部，但函数表达式不会。
    示例：

console.log(x);  // undefined
var x = 10;
 foo();  // "bar"
function foo() {console.log("bar");}
1
2
3
4

17. 如何避免JavaScript闭包内存泄漏？

• 及时释放闭包：当不再需要闭包时，应该将其引用设为null，以便垃圾回收器回收变量。
• 使用事件委托：当事件委托注册的事件处理程序执行完毕后，其作用域中的变量就可以被垃圾回收器回收。

18. 如何实现JavaScript中的模块化？

• CommonJS规范：CommonJS规范是Node.js中广泛使用的模块化规范。该规范使用require()函数加载模块，使用module.exports导出模块。
• AMD规范：AMD规范是一种异步模块定义规范，用于浏览器端的模块化。该规范使用require()函数异步加载模块，使用define()函数定义模块。
• ES6模块：ES6模块是ES6中引入的一种模块化规范。该规范使用import语句加载模块，使用export语句导出模块。

19. 如何处理JavaScript中的错误？
    答案：JavaScript中的错误可以使用try-catch语句处理。

try {
  // 可能会抛出错误的代码
} catch (error) {
  // 处理错误的代码
} finally {
  // 无论是否发生错误都会执行的代码
}
1
2
3
4
5
6
7

20. 如何判断一个数组中是否包含一个特定的值？
    答案：可以使用indexOf()方法或includes()方法判断一个数组中是否包含一个特定的值。
    示例：

const arr = [1, 2, 3, 4, 5];
console.log(arr.indexOf(3));  // 2
console.log(arr.includes(3));  // true
1
2
3

更多详见：