前端面试必备！JS基础知识点全面梳理

2023-11-15 22:38:45

前端面试必备：JS基础知识点详解

作为前端开发者，在面试中牢牢掌握JS基础知识点至关重要。这些知识点构成了前端开发的基础，是通往理想offer的关键。为了帮助你脱颖而出，我们精心整理了以下JS基础知识点，涵盖变量类型、原型和原型链、作用域和闭包、异步和JS-API，助你面试顺利过关。

变量类型

在JS中，变量是用来存储数据的容器。它们根据其存储内容的类型进行分类：

基本类型： 这些类型直接存储实际值，包括null、undefined、boolean、number、string和symbol（ES6引入）。
引用类型： 这些类型存储对其他值的引用，包括object和array（严格模式下array被归为基本类型）。

示例：

let name = "John"; // string类型
let age = 30; // number类型
let isLoggedIn = true; // boolean类型
let hobbies = ["coding", "reading", "gaming"]; // array类型

原型和原型链

每个JS函数（除了箭头函数）都有一个原型对象。原型对象包含该函数的所有属性和方法。一个对象的原型指向其创建者的原型，依次类推，最终指向Object.prototype，这是一个空对象。这形成了一个原型链，允许对象继承原型上的属性和方法。

示例：

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}.`);
};

const john = new Person("John");
john.greet(); // 输出：Hello, my name is John.

作用域和闭包

作用域定义了变量和函数可访问的范围。JS中存在全局作用域和局部作用域。闭包是指一个函数可以在其作用域外部被调用，且可以访问其作用域内的变量。

示例：

function makeCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}

const counter = makeCounter();
console.log(counter()); // 输出：0
console.log(counter()); // 输出：1

异步

异步编程允许程序在等待某些事件（如网络请求）完成时继续执行其他任务。回调函数在异步事件完成后被调用。Promise是处理异步操作的一种更现代的方式，提供更好的错误处理和链式调用。

示例：

fetch("data.json")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

JS-API

JS-API提供了一系列用于与网页文档（DOM API）、浏览器本身（BOM API）和进行异步HTTP请求（AJAX）的接口。这些API对于前端开发至关重要，允许开发者与用户界面和服务器进行交互。

示例：

// DOM API
document.getElementById("myDiv").innerHTML = "Hello World!";

// BOM API
window.location.href = "https://www.example.com";

// AJAX
$.ajax({
  url: "/api/data",
  success: function(data) {
    console.log(data);
  }
});