JavaScript 完全参考

2025 年 4 月 19 日 | 阅读 13 分钟

JavaScript 仍然是当今 Web 开发的基石，它在整个网络上实现了动态和直观的体验。在本详尽指南中，我们将深入探讨 JavaScript 的各个方面，从其关键结构块到高级技术和最佳实践。

1. 简介

JavaScript，通常缩写为 JS，起源于 20 世纪 90 年代，是一种用于网页的脚本语言。最初，它被设想为一种为静态 HTML 页面增加智能的简单工具，如今 JavaScript 已发展成为一种能够驱动动态 Web 的多功能且强大的编程语言。

关键点

在 Web 开发中的重要性： JavaScript 在现代 Web 开发中发挥着至关重要的作用，它使开发人员能够创建交互式 UI，动态地控制内容，并无缝地处理异步任务。
历史与演变： JavaScript 由 Brendan Eich 于 1995 年在 Netscape Communications Corporation 工作时创建，多年来经历了重大演变。它被标准化为 ECMAScript，第一个版本于 1997 年发布。后续版本引入了新功能和改进，使 JavaScript 发展至今。
客户端脚本： JavaScript 主要作为客户端脚本语言工作，在客户端的 Web 浏览器中执行代码。这使得动态控制网页内容成为可能，而无需服务器端处理，从而带来更快、响应更快的用户体验。

在本文中，我们将探讨 JavaScript 的各个方面，从其基本语法和核心概念到异步编程、模块化和性能优化等高级主题。无论您是希望从零开始学习 JavaScript 的新手开发人员，还是希望扩展对该语言理解的经验丰富的开发人员，本指南都将是您关于 JavaScript 的全面参考。

2. JavaScript 基础

与任何编程语言一样，JavaScript 也有构成更复杂功能的基础组件。理解这些基础知识对于掌握 JavaScript 开发至关重要。

关键点

变量： JavaScript 中的变量是用于存储数据值的容器。它们可以保存不同类型的数据，包括数字、字符串、布尔值、对象等。变量使用 var、let 或 const 关键字声明。

示例

// Variable declaration using var
var x = 10;

// Variable declaration using let (block-scoped)
let y = "Hello";

// Variable declaration using const (immutable)
const PI = 3.14;

数据类型： JavaScript 支持几种原始数据类型，包括数字、字符串、布尔值、null、undefined、Symbol（ES6 中引入）和对象。每种数据类型都有其特定的用途，并有一套自己的行为和操作。

示例

// Number
let num = 42;

// String
let str = "Hello, world!";

// Boolean
let isValid = true;

// Null
let empty = null;

// Undefined
let undef;

运算符： JavaScript 提供了各种运算符来执行算术、比较、逻辑和赋值运算。这些运算符允许开发人员在程序中操作数据和控制执行流程。

示例

// Arithmetic Operators
let sum = 5 + 3;    // Addition
let difference = 10 - 5; // Subtraction
let product = 4 * 6; // Multiplication
let quotient = 12 / 3;  // Division
let remainder = 10 % 3; // Modulus

// Comparison Operators
let isEqual = (5 === 5); // Equality
let isGreater = (10 > 5); // Greater than
let isLesser = (3 < 8);   // Less than

// Logical Operators
let andResult = true && false; // Logical AND
let orResult = true || false;  // Logical OR
let notResult = !true;         // Logical NOT

// Assignment Operators
let x = 5;
x += 3; // Equivalent to: x = x + 3;

控制结构： 控制结构，如条件语句（if、else、else if）和循环（for、while、do...while），使开发人员能够根据特定条件决策和迭代数据。

示例

// Conditional Statements
let num = 10;
if (num > 0) {
    console.log("Number is positive");
} else if (num < 0) {
    console.log("Number is negative");
} else {
    console.log("Number is zero");
}

// Loops
// for loop
for (let i = 0; i < 5; i++) {
    console.log(i);
}
// while loop
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}
// do while loop
let j = 0;
do {
    console.log(j);
    j++;
} while (j < 5);

3. 函数和作用域

函数是 JavaScript 编程的基石，使开发人员能够封装可重用代码块并按需执行它们。理解函数及其作用域对于编写模块化且高效的代码至关重要。

关键点

函数声明： JavaScript 中的函数可以使用 function 关键字声明，后跟一个名称以及包含可选参数的括号对。函数声明可以被提升，这意味着它们可以在代码中定义之前被调用。
函数表达式： 函数也可以定义为表达式，赋值给变量，或作为参数传递给其他函数。函数表达式不会被提升，必须在使用前定义。
箭头函数： ES6 中引入的箭头函数为定义函数提供了一种简洁的语法，尤其适用于简单的函数。它们具有词法上的 this 绑定，并且不创建自己的 context。
作用域和闭包： 作用域指代变量在程序中的可见性。JavaScript 具有函数作用域，这意味着在函数内定义的变量只能在该函数内部访问。当一个函数即使在外部函数执行完毕后仍能访问其封闭作用域中的变量时，就会发生闭包。

示例

// Function Declaration
function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("John")); // Output: Hello, John!

// Function Expression
let square = function(x) {
    return x * x;
};

console.log(square(5)); // Output: 25

// Arrow Function
let multiply = (a, b) => a * b;

console.log(multiply(3, 4)); // Output: 12

// Scope and Closures
function outer() {
    let outerVar = "I'm outer!";
    
    function inner() {
        let innerVar = "I'm inner!";
        console.log(outerVar); // Access outerVar from outer function scope
        console.log(innerVar); // Access innerVar from inner function scope
    }
    
    inner();
    // console.log(innerVar); // This will throw an error as innerVar is not accessible here
}

outer();

4. 对象和原型

在 JavaScript 中，对象是表示相关数据和功能集合的主要实体。理解对象和原型对于构建复杂应用程序和充分利用语言的强大功能至关重要。

关键点

对象字面量： JavaScript 中的对象可以使用对象字面量创建，对象字面量由包含在大括号 {} 中的键值对组成。可以通过点表示法 (object.property) 或方括号表示法 (object['property']) 访问属性。
构造函数： 构造函数是用于创建具有预定义属性和方法的对象实例的函数。按照约定，构造函数名称的首字母通常大写，以将其与普通函数区分开来。
原型： JavaScript 使用基于原型的继承模型，其中对象从原型对象继承属性和方法。每个对象都有一个原型链，允许它访问其原型及其原型的属性和方法，依此类推。

示例

// Object Literal
let person = {
    firstName: "John",
    lastName: "Doe",
    greet: function() {
        return "Hello, " + this.firstName + " " + this.lastName + "!";
    }
};

console.log(person.firstName); // Output: John
console.log(person.lastName); // Output: Doe
console.log(person.greet()); // Output: Hello, John Doe!

// Constructor Function and Prototypal Inheritance
function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
}

Person.prototype.greet = function() {
    return "Hello, " + this.firstName + " " + this.lastName + "!";
};

let john = new Person("John", "Doe");
console.log(john.firstName); // Output: John
console.log(john.lastName); // Output: Doe
console.log(john.greet()); // Output: Hello, John Doe!

5. 数组和数组方法

数组是 JavaScript 中用于存储元素集合的基本数据结构。理解数组及其内置方法对于高效、有效地处理数据集合至关重要。

关键点

数组字面量： JavaScript 中的数组可以使用数组字面量创建，数组字面量由包含在方括号 [] 中的逗号分隔的值组成。元素可以是任何数据类型，并且可以通过它们的索引访问。
数组方法： JavaScript 提供了各种内置数组方法来操作数组，例如添加或删除元素、迭代元素以及以各种方式修改数组。
push()： 向数组末尾添加一个或多个元素。
pop()： 删除数组的最后一个元素并返回该元素。
shift()： 删除数组的第一个元素并返回该元素。
unshift()： 在数组的开头添加一个或多个元素。
forEach()： 对数组的每个元素执行一次给定的函数。
map()： 创建一个新数组，其中包含对数组中每个元素调用给定函数的结果。
filter()： 创建一个新数组，其中包含所有通过给定函数执行的测试的元素。
reduce()： 将一个函数应用于累加器和数组中的每个元素，最终将其归结为单个值。
indexOf()： 返回数组中给定元素首次出现的索引，如果不存在则返回 -1。
slice()： 将数组的一部分浅拷贝到新数组对象中。

示例

// Array Literal
let numbers = [1, 2, 3, 4, 5];

// push(): Adds an element to the end of the array
numbers.push(6);
console.log(numbers); // Output: [1, 2, 3, 4, 5, 6]

// pop(): Removes the last element from the array
and let lastElement = numbers.pop();
console.log(lastElement); // Output: 6
console.log(numbers); // Output: [1, 2, 3, 4, 5]

// shift(): Removes the first element from the array
and lets firstElement = numbers.shift();
console.log(firstElement); // Output: 1
console.log(numbers); // Output: [2, 3, 4, 5]

// unshift(): Adds one or more elements to the beginning of the array
numbers.unshift(0, 1);
console.log(numbers); // Output: [0, 1, 2, 3, 4, 5]

// forEach(): Iterates over each element in the array
numbers.forEach(function(element) {
    console.log(element);
});
// Output:
// 0
// 1
// 2
// 3
// 4
// 5

// map(): Creates a new array with the results of calling a provided function on every element in the array,
let doubledNumbers = numbers.map(function(element) {
    return element * 2;
});
console.log(doubledNumbers); // Output: [0, 2, 4, 6, 8, 10]

// filter(): Creates a new array with elements that pass the test implemented by the provided function,
let evenNumbers = numbers.filter(function(element) {
    return element % 2 === 0;
});
console.log(evenNumbers); // Output: [0, 2, 4]

// reduce(): Applies a function against an accumulator and each element in the array to reduce it to a single value,
let sum = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
}, 0);
console.log(sum); // Output: 15 (0 + 1 + 2 + 3 + 4 + 5)

// indexOf(): Returns the first index at which a given element can be found in the array, or -1 if it is not present,
let index = numbers.indexOf(3);
console.log(index); // Output: 3 (index of element 3 in the array)

6. DOM 操作

DOM 操作是 Web 开发的关键组成部分。它允许开发人员使用 JavaScript 动态地与 HTML 元素进行交互。理解如何操作 DOM 对于创建动态且交互式的 Web 应用程序至关重要。

关键点

选择元素： JavaScript 提供了多种从 DOM 中选择 HTML 元素的方法，例如 getElementById、getElementsByClassName、getElementsByTagName、querySelector 和 querySelectorAll。
修改元素： 一旦选择了元素，开发人员就可以使用 JavaScript 修改它们的属性、特性和内容。常见操作包括更改文本内容、更新属性、添加或删除 CSS 类以及修改元素样式。
处理事件： DOM 事件，例如 click、hover、input 和 submit，允许开发人员响应用户与网页的交互。JavaScript 使开发人员能够将事件监听器附加到 HTML 元素并定义自定义事件处理逻辑。
控制 DOM 树： JavaScript 允许开发人员动态地创建、附加、删除和操作 DOM 元素，从而能够创建动态用户界面并与 Web 页面无缝交互。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM Manipulation Example</title>
<style>
    .highlight {
        background-color: yellow;
    }
</style>
</head>
<body>
<h1 id="heading">Welcome to DOM Manipulation</h1>
<button id="btn">Click Me</button>

<script>
    // Selecting elements
    const heading = document.getElementById('heading');
    const button = document.getElementById('btn');

    // Modifying elements
    heading.textContent = 'Hello, DOM';
    heading.style.color = 'blue';

    // Handling events
    button.addEventListener('click', function() {
        heading.classList.toggle('highlight');
    });

    // Manipulating the DOM tree
    const newParagraph = document.createElement('p');
    newParagraph.textContent = 'This is a new paragraph added dynamically.';
    document.body.appendChild(newParagraph);
</script>
</body>
</html>

7. 异步 JavaScript 概念

异步编程是 JavaScript 的一个基本方面，它允许开发人员执行非阻塞代码并处理可能需要一些时间才能完成的任务，例如从服务器获取数据或等待用户输入。

setTimeout：安排延迟执行
setTimeout 函数用于在指定的延迟（以毫秒为单位）后安排函数的执行。这种异步操作允许开发人员推迟代码执行，从而能够让任务在后台运行而不会阻塞主线程。
setInterval：定时重复执行
setInterval 函数用于以指定的间隔（也以毫秒为单位）重复执行一个函数。这种异步操作对于执行需要按固定间隔执行的任务非常有用，例如更新实时计数器或获取实时数据。
Promises：处理异步任务
Promises 为 JavaScript 中的异步任务提供了一种更结构化、更直观的处理方式。Promise 代表异步任务的最终完成或失败，并允许开发人员附加回调来异步处理结果。
Async/Await：异步代码的同步语法
Async/await 是一项现代 JavaScript 功能，它为编写异步代码提供了更同步的语法。通过使用 async 关键字定义异步函数，并使用 await 暂停执行直到 Promise 解决，开发人员可以更同步地编写异步代码。

示例

// Example 1: setTimeout
console.log("Start");
setTimeout(() => {
    console.log("Inside setTimeout");
}, 2000); // Executes after 2 seconds
console.log("End");

// Example 2: setInterval
let counter = 0;
const intervalId = setInterval(() => {
    counter++;
    console.log("Counter:", counter);
    if (counter === 5) {
        clearInterval(intervalId);
        console.log("Interval stopped");
    }
}, 1000); // Executes every 1 second

// Example 3: Promises
const promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("Promise resolved after 3 seconds");
    }, 3000);
});

promise.then((result) => {
    console.log(result);
}).catch((error) => {
    console.error(error);
});

// Example 4: Async/Await
function delay(ms) {
    return new Promise((resolve) => {
        setTimeout(resolve, ms);
    });
}

async function asyncFunction() {
    console.log("Start async function");
    await delay(2000); // Pause execution for 2 seconds
    console.log("Async function resumed after delay");
}

asyncFunction();

重要属性

document： 通过在浏览器的文档对象模型 (DOM) 中表示 HTML 文档，提供对 HTML 文档的文本、结构和元素的访问。它在 Web 开发中广泛用于页面导航、事件管理和 DOM 操作。
Window： 这个对象代表浏览器窗口，并提供对浏览器特有的函数和属性的访问。它管理浏览器行为，设置窗口尺寸，并处理滚动和调整大小等事件。
Local Storage： 此功能允许您通过在浏览器中存储键值对来在浏览器会话之间保存数据。它经常用于缓存、客户端数据存储和用户偏好设置管理。
Navigator： 提供有关用户设备和浏览器信息，包括浏览器的名称、版本和用户代理字符串。它用于功能和浏览器检测，以及根据用户环境提供个性化体验。
Location： 它包含当前浏览器窗口的 URL，并提供导航到其他 URL 的方法。它可用于提取 URL 组件，如主机名和路径名，操作 URL 并重定向 URL。
console - 提供 log()、error()、warn() 和 info() 等函数，用于将消息记录到浏览器的控制台。在开发过程中，它用于跟踪错误、监控程序活动和进行调试。
Math - 提供函数和数学常数以在 JavaScript 中执行数学运算。它用于三角函数、随机数生成和算术计算。
Date： 这个类包含用于处理日期的方法，例如 getFullYear()、getMonth()、getDate() 和 getTime()。它还表示 JavaScript 中的日期和时间。它用于格式化、比较以及日期和时间的操作。
String： JavaScript 的 String 类表示文本数据，并提供字符串上的操作，包括 length、charAt()、concat() 和 indexOf()。它用于格式化、搜索和字符串操作。
Arrays： JavaScript 的数组类表示元素列表，并提供 length、push()、pop()、splice() 和 forEach() 等操作函数。它用于数组操作、迭代元素和存储数据集合。
Event： 在 JavaScript 中，事件是一组属性，例如 type、target 和 timestamp，它们由用户操作或系统事件触发。它用于管理事件、记录用户输入以及响应浏览器发送的事件。
RegExp： RegExp 代表 JavaScript 正则表达式，并提供 exec() 函数、标志和 source 属性。它也用于文本验证、字符串搜索和模式匹配。
Error： 在 JavaScript 中，错误表示运行时错误，并具有 name、message 和 stack 等属性。它用于错误处理、调试和错误消息日志记录。
HTMLElement： 这个 JavaScript 类表示 HTML 元素，并提供 innerHTML、className 和 style 等属性。它用于 DOM 元素访问和操作。
EventTarget： 这个类提供 addEventListener() 和 dispatchEvent() 等功能，并表示 JavaScript 中能够接收事件的对象。它用于事件冒泡、捕获和委托。
HTMLElement.dataset - 提供访问 HTML 元素上设置的自定义数据属性 (data-*)，从而为应用程序使用存储数据。它经常用于在 HTML 和 JavaScript 之间传输数据，并为元素添加元数据。
Window.localStorage： 这个类包含 setItem()、getItem() 和 removeItem() 等属性，并代表浏览器的本地存储区域。它用于会话数据维护、缓存和客户端数据存储。
Document.body： 这个对象表示 HTML 文档的元素，并提供 appendChild()、style 和 innerHTML 等属性。它用于检索和修改包含在 DOM 的 body 元素中的内容。
Window.innerHeight 表示浏览器窗口内容区域的高度，这对于响应式设计和根据视口大小调整布局非常有用。
Document.URL - 提供有关当前文档位置的信息，并代表其 URL。它经常用于提取 URL 组件、重定向 URL 和操作 URL。

结论

总而言之，JavaScript 是现代 Web 开发的基石，使开发人员能够创建动态且交互式的 Web 应用程序。在本文中，我们探讨了 JavaScript 的完整参考，涵盖了它的基础知识、高级功能和最佳实践。

我们首先深入研究了 JavaScript 的基础知识，包括变量、函数和控制结构。然后，我们探讨了对象、原型和异步编程等更高级的主题。

下一个主题词法作用域在JavaScript中的应用

JavaScript 完全参考

1. 简介

关键点

2. JavaScript 基础

关键点

3. 函数和作用域

关键点

4. 对象和原型

关键点

5. 数组和数组方法

关键点

6. DOM 操作

7. 异步 JavaScript 概念

重要属性

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 完全参考

1. 简介

关键点

2. JavaScript 基础

关键点

3. 函数和作用域

关键点

4. 对象和原型

关键点

5. 数组和数组方法

关键点

6. DOM 操作

7. 异步 JavaScript 概念

重要属性

结论

相关帖子

如何在 JavaScript 中循环遍历数组

如何在 JavaScript 中查找数组的平均值？

在 Safari 中启用 JavaScript