20 个 JavaScript 面试问题及答案

几天前，你申请了一份 Web 开发人员的职位。面试已经安排好了，但你担心自己的 JavaScript 知识不够扎实。

如果是这样，那你真走运！如果不是，你仍然可以获得一些信息，用于以后的面试。

以下是 20 个常见的 JavaScript 面试问题及其相应的答案：

什么是 JavaScript

好吧，说实话，你可能会觉得这个问题很简单。但当你试图向你未来的老板解释什么是 JavaScript 时，你可能会惊讶地发现自己竟然笨手笨脚。JavaScript 是一种用于编写网站和 Web 应用程序的语言。

什么是 DOM

文档对象模型 (DOM) 是您的网页及其所有元素的树状、自上而下的表示。

列举 5 种 JavaScript DOM 操作方法并解释其用途

• createElement()：此方法在网页中创建一个新的 HTML 元素。它接受一个参数，即要创建的元素的名称。

• querySelector()：此方法用于根据任何 CSS 选择器定位元素。它始终返回第一个与一个或多个 CSS 选择器匹配的元素。它以选择器作为参数。

• querySelectorAll()：querySelector 仅返回第一个匹配的实例，而此方法则返回所有与一个或多个 CSS 选择器匹配的元素。这些元素以节点列表的形式返回，类似于 JavaScript 对象。

• getElementById()：顾名思义，此方法根据元素的唯一 id 属性获取元素。

• addEventListener()：此方法将事件监听器附加到 DOM 中的元素。它接受一个函数作为附加参数。当该元素被设置的事件触发时，回调函数将会运行。

什么是变量

所有编程语言都与数据打交道，变量只是数据的容器。当赋值给变量时，数据就变成了“值”。

var variable = value

定义并解释 JavaScript 中的变量声明

JavaScript中var、let、const的区别：

变量

• 它是全球范围的
• 当用于在函数内定义变量时，该变量在该函数之外是无法访问的
• 可重新分配
• 它不是块作用域

常量

• 它用于存储不可变/不变的值。
• 它不是全局范围的
• 当用于在函数内定义变量时，该变量在该函数之外是无法访问的
• 它是块级作用域的。也就是说，在 if 条件语句和 for 循环等块之外无法访问它。

让

• 它不是全局范围的
• 可重新分配
• 当用于在函数内定义变量时，该变量在该函数之外是无法访问的
• 它是块范围的。

注意：如果您有兴趣了解有关现代 JavaScript 的更多信息，我推荐Sleepless Yogi 撰写的《HTML To React：终极指南》

什么是异步编程

异步编程的原则是让代码稍后运行，而不是立即/顺序运行。这是通过回调、Promises 和其他异步模式实现的。

解释全局作用域和局部作用域

• 可以从脚本中的任何位置访问全局变量。

• 另一方面，局部变量具有函数作用域。这意味着在函数中定义的变量在该函数外部无法访问。

什么是 Node.js 以及它的作用是什么

Node.js 是一个开源、跨平台的后端 JavaScript 运行时环境，它基于 V8 引擎运行，用于执行 JavaScript 代码。请记住，以前 JavaScript 只能在浏览器上运行。您无法在任何其他环境中运行 JavaScript。然而，随着 Node.js 的出现，您现在可以在独立于 Web 浏览器的 Web 服务器上运行 JavaScript。

列出 JavaScript 中的所有数据类型

• 细绳
• 数字
• 布尔值
• 无效的
• 目的
• 不明确的
• 符号（ES6）

什么是柯里化

Currying 是一种技术，当你接受一个需要多个参数的函数并返回一系列只接受一个参数的函数时就会发生这种情况

const program = { 
name: 'Presenting Research', 
room: '415', 
hours: '3 - 6', 
}; 
const exhibit = { 
name: 'Emerging Scholarship', 
contact: 'Dyan', 
}; 

const setStrongHallProgram = program => { 
const defaults = { 
hours: '6 a.m. - 6 p.m.', 
address: 'jally Ave', 
name: 'kingsley', 
phone: '555-555-5555' 
} 
return { ...defaults, ...program} 
} 
const programs = setStrongHallProgram(program); 
const exhibit = setStrongHallProgram(exhibit);

列出并解释所有数组迭代器方法

Map()：此方法循环遍历数组并始终返回一个数组。然后，您可以定义一些操作，这些操作将应用于数组中的所有项。例如，您可以将数组中的所有数字除以 2。

filter()：此方法循环遍历一个数组集合，并根据过滤条件返回另一个数组。例如，你可以指定只过滤年龄小于 50 的数组，而不过滤年龄大于 50 的数组。

find()：这与 filter() 非常相似。主要区别在于，此方法仅返回符合条件的第一个实例。后续匹配将被忽略。

sort()：此方法循环遍历一个数组并返回另一个重新排序的数组。新的顺序基于指定的条件。例如，您可以按字母顺序对所有姓名进行排序，可以是升序，也可以是降序。

forEach()：此方法循环遍历数组，并对其中的所有项执行一致的操作。它不会返回新的数组。

reduce()：此方法用于将数组转换为全新的数组，对其进行彻底的改变。

列出你所了解的 ES6 中的 5 个新功能

• JavaScript 类

• 箭头函数

• 引入 let 和 const 关键字用于变量声明。

• for/of 循环。

• 默认参数

• 剩余运算符和扩展运算符

什么是 React

React 是一个现代且专业的 JavaScript 库，用于构建模块化、可复用的 UI 组件（例如按钮）以及单页应用程序。React 充分利用了虚拟 DOM。

什么是虚拟 DOM

虚拟 DOM 是 DOM 的轻量级 JavaScript 表示，常用于声明式 Web 框架（例如 React 和 Vue.js）。更新虚拟 DOM 比更新真实 DOM 速度相对较快，因为无需在屏幕上渲染任何内容。

什么是类？写出定义类的典型语法。

类是对象的蓝图。为了便于说明，你可以将一栋建筑的建筑平面图视为一个类，而根据该平面图构建的最终建筑则视为一个对象。建筑平面图不包含诸如颜色、要使用的家具类型等属性。所有这些属性都将在“建造”建筑（即对象）时提供。

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // Method
  calcArea() {
    return this.height * this.width;
  }
}

什么是对象

当一个类被“实例化”时，一个对象就被构造出来了。对象是一种数据结构，它拥有以“值对”形式出现的属性。

区分箭头函数和命名函数

namedFunction() {
  console.log("this is a named function")
}

() => {
console.log("This is an arrow function")
}

什么是图书馆

库是已经制作好的代码/模块包，可以导入到另一个程序中来执行特定的任务。

例如 lodash，它包含一组用于编程中一些常见任务（如排序等）的实用函数。

什么是 Typescript 以及何时应该使用它

Typescript 是 JavaScript 的超集；它包含 JavaScript 的所有语法以及一些附加功能。它用于编写具有类型检查机制的强类型 JavaScript。

给我买个菠萝😋

是的！如果你喜欢这篇文章，请给我买我最喜欢的水果：

谢谢你！

再见！