分享 30 个基础的 JavaScript 面试题

编辑整理 | 杨小爱

作为一名新人，你面临的最艰巨的任务之一就是为自己的第一份工作而参加的技术面试。

在前端领域里， JavaScript的世界里可以考问的技术点太多了， 为了帮助你在下一次面试中取得好成绩并找到理想的工作，我整理了一份最常见的 JavaScript 面试题清单表。

这些面试题涵盖了广泛的主题，包括基本的 JavaScript 语法、面向对象的编程概念、数据结构以及常见的库和框架。通过熟悉这些问题的答案，从而可以更好的向你的潜在雇主展示你的知识和技能。

在今天的这篇文章中，无论你是刚开始学习 JavaScript 的初学者，还是希望提高技能的有经验的开发人员，本内容都适合您。我相信，通过阅读今天这篇文章内容，你将对关键概念有一个扎实的理解，并准备好解决你在 JavaScript 面试中遇到的一些问题。

那我们现在就开始吧。

01、什么是 JavaScript，它与 Java 有何不同？

JavaScript 是一种主要用于创建动态和交互式网页的脚本语言，而 Java 是一种主要用于创建独立应用程序的编程语言。

02、JavaScript 中的数据类型有哪些？

JavaScript 有六种数据类型：Number、String、Boolean、Symbol、Object 和 Undefined。

03、请解释一下 JavaScript 中的Hoisting。

Hoisting是 JavaScript 中的一种行为，其中变量和函数声明被移动到其作用域的顶部。这意味着变量可以在声明之前使用。

04、JavaScript 中的 let 和 var 有什么区别？

let 和 var 都用于在 JavaScript 中声明变量，但有一些关键区别。

用 var 声明的变量是函数作用域的，而用 let 声明的变量是块作用域的。

这意味着用 var 声明的变量可以在整个函数中访问，而用 let 声明的变量只能在声明它的块内访问。

05、JavaScript 中的闭包是什么？

闭包是一个函数，它可以访问其父作用域中的变量，即使在父函数完成执行之后也是如此。这允许在 JavaScript 中实现数据隐私和封装。

06、你如何在 JavaScript 中声明一个变量？

JavaScript 中的变量可以使用关键字 var、let 或 const 来声明。示例：let  x = 5；

07、JavaScript 中的事件循环是什么？

事件循环是一种允许 JavaScript 以非阻塞方式执行代码的机制。它的工作原理是允许浏览器在等待事件（例如按钮单击或网络请求）发生时继续执行其他代码。

08、JavaScript 中的回调函数是什么？

回调函数是作为参数传递给另一个函数并在父函数完成后执行的函数。这允许非阻塞地执行代码，并允许分离代码中的关注点。示例：setTimeout(function(){console.log("Hello World")},1000);

09、JavaScript 中的 == 和 === 有什么区别？

双等号 == 比较值是否相等，而三等号 === 比较值和类型是否相等。

10、JavaScript 中的对象是什么？

JavaScript 中的对象是键值对的集合，类似于其他语言中的字典或哈希表。可以使用对象文字符号 {key: value} 或对象构造函数 new Object() 创建对象。

11、什么是 JavaScript 中的原型？

JavaScript 中的原型是充当其他对象模板的对象。当一个对象被创建时，它继承了它的原型的属性和方法。对象还可以添加自己的属性和方法。

例子：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
 
 
Person.prototype.sayName = function() {
  console.log(this.name);
}
 
 
let person1 = new Person("John", 25);
console.log(person1.name); // Output: John
console.log(person1.age); // Output: 25
person1.sayName(); // Output: John

12、什么是 JavaScript 中的异步函数？

异步函数是返回Promise 并可以使用 await 关键字暂停的函数。这允许以更具可读性和组织性的方式来处理异步代码。

例子：

async function getData() {
  let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  let data = await response.json();
  console.log(data);
}
getData()

13、什么是 JavaScript 中的Promise？

JavaScript 中的 Promise 是一个对象，表示异步操作的最终完成或失败。Promise 有一个 .then() 方法，当promise 被履行时调用，以及一个 .catch() 方法，当承诺被拒绝时调用。

例子：

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data Loaded");
  }, 3000);
});
 
 
promise.then((data) => {
  console.log(data);
});

14、JavaScript 中的 null 和 undefined 有什么区别？

null 和 undefined 都表示没有值，但它们用于不同的上下文。undefined 用于声明变量但尚未赋值，而 null 用于显式设置变量为无值。

15、什么是 JavaScript 中的模块？

JavaScript 中的模块是一种通过将代码封装到单个单元中来组织和重用代码的方法。可以使用 import 和 export 关键字导入和导出模块。

//file: myModule.js
export const myVariable = "Hello";
export function myFunction() {
  console.log("World");
}
 
 
//file: main.js
import { myVariable, myFunction } from './myModule';
console.log(myVariable); // Output: "Hello"
myFunction(); // Output: "World"

16、什么是 JavaScript 中的展开运算符？

扩展运算符 (... )用于将可迭代对象（例如数组或字符串）扩展为单个元素或属性。

例子：

let array1 = [1, 2, 3];
let array2 = [...array1, 4, 5];
console.log(array2); // Output: [1, 2, 3, 4, 5]

17、JavaScript 中的Map函数是什么？

map 函数是一个高阶函数，用于通过对数组的每个元素应用回调函数来转换数组。它返回一个包含转换后元素的新数组。

例子：

let numbers = [1, 2, 3, 4, 5];
let doubledNumbers = numbers.map((number) => {
  return number * 2;
});
console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10]

18、JavaScript 中的filter函数是什么？

filter 函数是一个高阶函数，用于根据特定条件过滤数组。它返回一个新数组，其中只包含满足条件的元素。

例子：

let numbers = [1, 2, 3, 4, 5];
let evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});
console.log(evenNumbers); // Output: [2, 4]

19、JavaScript 中的 reduce 函数是什么？

reduce 函数是一个高阶函数，用于通过对数组的每个元素应用回调函数来将数组缩减为单个值。它以一个累加器和一个当前值作为参数并返回一个新的累加器值。

例子：

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 15

20、什么是 JavaScript 中的生成器函数？

生成器函数是一种特殊类型的函数，可以使用 yield 和 next() 关键字暂停和恢复。它允许以更有效的方式处理无限数据流或复杂数据流。

例子：

function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}
let generator = generatorFunction();
console.log(generator.next().value); // Output: 1
console.log(generator.next().value); // Output: 2
console.log(generator.next().value); // Output: 3

21、什么是 JavaScript 中的类？

JavaScript 中的类是创建共享相同属性和方法的对象（实例）的蓝图。它是创建对象和封装相关数据和行为的一种更优雅的方式。

例子：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayName() {
    console.log(this.name);
  }
}
 
 
let person1 = new Person("John", 25);
console.log(person1.name); // Output: John
console.log(person1.age); // Output: 25
person1.sayName(); // Output: John

22、JavaScript 中的类和构造函数有什么区别？

类和构造函数都用于创建对象，但类的语法更优雅，更类似于 Java 和 C# 等面向对象的语言。构造函数更类似于 JavaScript 中创建对象的传统方式。

23、什么是 JavaScript 中的 try-catch 块？

try-catch 块用于处理 JavaScript 中的错误和异常。执行 try 块内的代码，如果发生错误，则执行 catch 块内的代码。

例子：

try {
  let a = 5;
  let b = 0;
  let c = a / b;
  console.log(c);
} catch (error) {
  console.log("Error:", error.message);
}

24、JavaScript 中的装饰器是什么？

装饰器是一种设计模式，允许在运行时修改类或方法。这是一种在不修改原始代码的情况下向现有代码添加附加功能的方法。

25、什么是 JavaScript 中的命名函数？

命名函数是在定义时被赋予名称的函数，稍后可以在代码中使用该名称进行调用。

function add(a, b) {
    return a + b;
}
console.log(add(1, 2)); // Output: 3

26、JavaScript 中的匿名函数是什么？

匿名函数是没有名称的函数，它是动态定义和调用的。

let add = function (a, b) {
    return a + b;
};
console.log(add(1, 2)); // Output: 3

27、JavaScript 中的 DOM 是什么？

文档对象模型 (DOM) 是 HTML 或 XML 文档的面向对象表示，可以使用 JavaScript 进行操作。它允许操纵网页的结构、内容和样式。

28、什么是 jQuery？

jQuery 是一个 JavaScript 库，它简化了 DOM 的操作、事件的处理和 AJAX 请求的制作。它被广泛用于使 Web 开发在不同浏览器之间更加高效和一致。

29、什么是单页应用程序？

单页应用程序 (SPA) 是加载单个 HTML 页面并在用户与应用程序交互时动态更新内容的 Web 应用程序或网站。

30、你能解释一下 JavaScript 中同步代码和异步代码的区别吗？

同步代码是按照写的先后顺序执行的，而异步代码是后执行的，不会阻塞其他代码的执行。

总结

我希望这篇博文中提供的问题和答案能帮助你更好地理解 JavaScript 的关键性概念，并让你有信心解决面试中遇到的一些问题。

请记住，熟能生巧，你越熟悉问题和答案，你在面试中就会越自在和自信。

最后，我们一起不断学习，不断成长，编程快乐！

学习更多技能

请点击下方公众号