JavaScript 面试常见问题

在 JavaScript 面试中，以下是一些常见的问题和答案。这些问题涵盖了从基础到高级的各种主题，包括数据类型、语法、函数、对象、DOM、闭包等。

数据类型

1. JavaScript有哪些基本数据类型？

JavaScript有七种基本数据类型：

• 数字(Number)：整数和浮点数，如3和3.14。
• 字符串(String)：由一串字符组成，如"hello"和'world'。
• 布尔(Boolean)：表示真假，只有两个值，true和false。
• 未定义(Undefined)：表示变量未定义或者没有指定值。
• 空值(Null)：表示无值或空对象引用。
• 对象(Object)：表示复杂数据类型，如数组、函数等。
• 符号(Symbol)：表示唯一的、不可修改的值。

2. 如何检查一个变量的数据类型？

可以使用 typeof 操作符来检查一个变量的数据类型，语法如下所示：

typeof variableName;

例如：

typeof "hello"; // "string"
typeof 3.14; // "number"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object"
typeof [1, 2, 3]; // "object"
typeof function(){}; // "function"
typeof Symbol("foo"); // "symbol"

语法

1. JavaScript中的“==”和“===”有何区别？

“==”比较两个值是否相等，不考虑数据类型。如果两个值的数据类型不同，会先进行类型转换，再比较它们的值。

“===”比较两个值是否完全相同，包括数据类型和值。如果两个值的数据类型不同，会直接返回false。

例如：

5 == "5"  // true，因为"5"会被隐式转换为数字5
5 === "5" // false，因为不仅值不同，而且数据类型也不同

2. JavaScript中的“this”关键字有何含义？

“this”关键字引用当前函数运行时的上下文对象，具体指向哪个对象取决于当前函数的执行方式。在全局作用域中，this指向window对象，而在函数内部，this可能指向调用函数的对象。

例如：

var person = {
  firstName: "John",
  lastName : "Doe",
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
}
console.log(person.fullName()); //输出 "John Doe"

函数

1. JavaScript中的“arguments”对象有何含义？

“arguments”对象是一个类数组对象，包含函数调用时传递的所有参数。其可以在所有函数内部进行访问。它还有一个callee属性，可以引用当前正在执行的函数。

例如：

function sum() {
  var total = 0;
  for (var i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
console.log(sum(1, 2, 3, 4)); //输出 10

2. JavaScript中的“闭包”有何含义？

“闭包”指一个函数能够访问另一个函数内部的变量。当外部函数返回内部函数时，内部函数可以继续访问其外部函数的变量，即使其外部函数已经返回。该内部函数形成了一个“闭包”，并可以延长访问其外部函数的作用域。

例如：

function fullName(firstName, lastName) {
  var greeting = "My name is ";
  
  function getName() {
    return greeting + firstName + " " + lastName;
  }
  
  return getName();
}

console.log(fullName("John", "Doe")); //输出 "My name is John Doe"

对象

1. JavaScript中如何创建对象？

JavaScript中可以使用对象字面量、构造函数和Object.create()方法等方式来创建对象。

例如：

// 使用对象字面量
var person1 = {
  firstName: "John",
  lastName: "Doe",
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

// 使用构造函数
function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.fullName = function() {
    return this.firstName + " " + this.lastName;
  }
}
var person2 = new Person("John", "Doe");

// 使用Object.create()方法
var person3 = Object.create(person1);
person3.firstName = "Jane";

2. JavaScript中的原型链是什么？

JavaScript中的每个对象都有一个隐藏的原型属性(proto)，它指向该对象的原型对象。每个原型对象也有一个自己的原型对象，这样一层层地形成了原型链。

当我们访问对象的一个属性或方法时，JavaScript会首先查找该对象本身是否拥有该属性或方法。如果没有，就会沿着该对象的原型链去查找，直到找到该属性或方法或原型链的末尾为止。

例如：

var person = {firstName: "John", lastName: "Doe"};
var student = Object.create(person);
student.id = 123;
console.log(student.firstName); //输出 "John"
console.log(student.id); //输出 123

DOM

1. JavaScript中如何访问和操作DOM？

可以使用document对象来访问和操作DOM。可以使用getElementById、getElementsByTagName和querySelector等方法选择DOM元素，使用innerHTML、textContent、value等属性来读取或修改DOM元素的内容，使用addEventListener、onclick等事件来绑定事件处理程序。

例如：

<button id="btn">Click me</button>

<script>
var btn = document.getElementById("btn");
btn.addEventListener("click", function() {
  console.log("Hello");
});
</script>

2. JavaScript中如何创建和插入DOM元素？

可以使用createElement方法来创建DOM元素，使用appendChild方法将其插入到指定的元素中。

例如：

<div id="container"></div>

<script>
var container = document.getElementById("container");
var p = document.createElement("p");
p.textContent = "Hello";
container.appendChild(p);
</script>

结束语

以上是JavaScript面试中的一些常见问题和答案。当然，这里并没有列出所有的问题，而是挑选了一些比较典型的问题，希望读者可以通过这些问题来进行学习和练习。