JavaScript零基础入门速通（完整）

• admin
• 2025-07-01 05:23:47

JavaScript（简称 JS）是现代网页开发中不可或缺的编程语言之一。它为网页增加了动态交互性，是一种前端编程语言，用于处理网页上的各种用户行为，如按钮点击、表单提交、页面加载等。它的强大不仅体现在浏览器端，也可以通过 Node.js 在服务器端运行。本文将详细介绍 JavaScript 的基础知识，帮助你从零开始掌握这门语言。

1. JavaScript 简介

JavaScript 最早由 Netscape 公司的 Brendan Eich 于 1995 年开发，最初被称为 LiveScript，后来更名为 JavaScript。它是一种轻量级的、解释型的编程语言，广泛应用于网页前端开发中。虽然名字中有 "Java" 一词，但 JavaScript 与 Java 并无直接关系，它们是两种完全不同的编程语言。

JavaScript 被设计用来与 HTML 和 CSS 协作，动态地修改网页内容、响应用户操作并与服务器通信。随着技术的发展，JavaScript 已经从浏览器端扩展到服务器端、桌面应用和移动端开发，成为一门全栈编程语言。

2. JavaScript 的运行环境

JavaScript 主要在两种环境中运行：

2.1 浏览器端

浏览器是最常见的 JavaScript 运行环境。现代浏览器（如 Google Chrome、Mozilla Firefox、Microsoft Edge 等）都内置了 JavaScript 引擎（例如 Google Chrome 的 V8 引擎），能够执行 JavaScript 代码并实时处理网页的动态效果。

你可以在 HTML 文件中通过

在这个例子中，当页面加载时，浏览器会执行 JavaScript 代码，并弹出一个 "Hello, World!" 的提示框。

2.2 服务器端（Node.js）

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它允许开发者在服务器端运行 JavaScript。借助 Node.js，JavaScript 可以用来处理 HTTP 请求、文件系统操作、数据库交互等任务，甚至可以构建完整的服务器应用程序。

Node.js 是使用 JavaScript 编写服务器端代码的流行选择，使得前后端开发者都能用同一语言进行开发。

3. JavaScript 基础语法

3.1 变量声明

在 JavaScript 中，变量是用来存储数据的容器。可以使用三种关键字来声明变量：var、let 和 const。

var: 在 ES5 及之前的版本中使用，声明的变量可以在整个函数范围内访问，存在变量提升的现象。let: ES6 引入的变量声明方式，具有块级作用域，不会发生变量提升。const: 用于声明常量，声明后无法重新赋值，同样具有块级作用域。

示例：

var name = "Alice"; // 使用 var 声明变量

let age = 25; // 使用 let 声明变量

const birthYear = 1998; // 使用 const 声明常量

3.2 数据类型

JavaScript 中的基本数据类型包括：

字符串 (String): 用于表示文本数据。数字 (Number): 用于表示整数和浮动小数。布尔值 (Boolean): 用于表示 true 或 false。undefined: 变量声明但未赋值时的默认值。null: 表示“无”或“空”值。对象 (Object): 用于存储多个值的容器。数组 (Array): 特殊类型的对象，用于存储有序的数据。

示例：

let message = "Hello, World!"; // 字符串

let num = 42; // 数字

let isActive = true; // 布尔值

let person = { name: "Alice", age: 25 }; // 对象

let numbers = [1, 2, 3, 4]; // 数组

3.3 运算符

JavaScript 支持多种运算符，如算术运算符、比较运算符和逻辑运算符等。

3.3.1 算术运算符

常见的算术运算符包括 +、-、*、/、%（取余）、++（自增）、--（自减）。

let a = 5;

let b = 2;

console.log(a + b); // 输出 7

console.log(a - b); // 输出 3

console.log(a * b); // 输出 10

console.log(a / b); // 输出 2.5

console.log(a % b); // 输出 1

.3.2 比较运算符

比较运算符用于比较两个值。常见的比较运算符包括 ==、===、!=、!==、>、<、>=、<=。

==（相等）: 比较两个值是否相等，忽略数据类型。===（严格相等）: 比较两个值是否相等，且数据类型也必须相同。

console.log(5 == '5'); // 输出 true (忽略数据类型)

console.log(5 === '5'); // 输出 false (数据类型不同)

console.log(10 > 5); // 输出 true

3.3.3 逻辑运算符

逻辑运算符用于处理布尔值。常见的逻辑运算符有 &&（与）、||（或）和 !（非）。

let x = true;

let y = false;

console.log(x && y); // 输出 false (与运算)

console.log(x || y); // 输出 true (或运算)

console.log(!x); // 输出 false (非运算)

3.4 控制流

JavaScript 提供了多种控制流语句来决定代码的执行顺序，包括 if、else、for、while 等。

3.4.1 条件语句

if 和 else 用于根据条件执行不同的代码。

let age = 18;

if (age >= 18) {

console.log("成年人");

} else {

console.log("未成年人");

}

3.4.2 循环语句

循环语句用于重复执行一段代码。常见的循环语句有 for 和 while。

for (let i = 0; i < 5; i++) {

console.log(i); // 输出 0, 1, 2, 3, 4

}

let j = 0;

while (j < 5) {

console.log(j); // 输出 0, 1, 2, 3, 4

j++;

}

4. 函数

函数是 JavaScript 中的基本构建块，用于封装一段可复用的代码。通过函数，我们可以将常用的逻辑抽象成一个单元，并根据需要进行调用。

4.1 函数声明

函数可以通过关键字 function 来声明。以下是一个简单的函数声明示例：

function greet(name) {

console.log("Hello, " + name + "!");

}

greet("Alice"); // 输出 "Hello, Alice!"

这个函数名为 greet，接受一个参数 name，然后输出一条问候消息。你可以在函数体内执行任意 JavaScript 代码。

4.2 返回值

函数可以返回值，使用 return 语句来指定返回的结果。如果没有显式的返回值，函数默认返回 undefined。

function add(a, b) {

return a + b;

}

let result = add(5, 3); // result 的值为 8

console.log(result);

4.3 匿名函数

有时我们不需要给函数起一个名字，这时可以使用匿名函数。匿名函数通常用于回调或事件处理。

let sum = function(a, b) {

return a + b;

};

console.log(sum(2, 3)); // 输出 5

5.4 箭头函数

ES6 引入了箭头函数，它是函数的一种简化写法，语法更加简洁。箭头函数不会创建自己的 this，而是继承外部作用域的 this。

const multiply = (a, b) => a * b;

console.log(multiply(4, 5)); // 输出 20

箭头函数与普通函数的区别在于省略了 function 关键字，并且只有一行代码时，函数体可以省略大括号 {} 和 return。

5. 对象

在 JavaScript 中，对象 是一种复杂数据类型，用于存储一组数据和功能（属性和方法）。对象通常由多个键值对（属性）组成，每个键是一个字符串，值可以是任何数据类型。

5.1 创建对象

你可以通过大括号 {} 创建一个对象，并在其中定义键值对。

let person = {

name: "Alice",

age: 25,

greet: function() {

console.log("Hello, " + this.name);

}

};

console.log(person.name); // 输出 "Alice"

person.greet(); // 输出 "Hello, Alice"

5.2 访问和修改对象的属性

你可以使用点语法或方括号语法访问和修改对象的属性。

let car = {

make: "Toyota",

model: "Corolla",

year: 2020

};

// 使用点语法访问

console.log(car.make); // 输出 "Toyota"

// 使用方括号语法访问

console.log(car["model"]); // 输出 "Corolla"

// 修改属性

car.year = 2021;

console.log(car.year); // 输出 2021

5.3 对象方法

对象可以包含方法（即函数），这些方法可以通过对象来调用。

let calculator = {

add: function(a, b) {

return a + b;

},

subtract: function(a, b) {

return a - b;

}

};

console.log(calculator.add(5, 3)); // 输出 8

console.log(calculator.subtract(5, 3)); // 输出 2

6. 数组

数组是 JavaScript 中用于存储有序数据的对象。数组的元素可以是任何数据类型，并且可以包含多个不同类型的元素。数组在 JavaScript 中的下标从 0 开始。

6.1 创建数组

你可以使用方括号 [] 来创建数组，数组中的元素用逗号分隔。

let fruits = ["Apple", "Banana", "Cherry"];

console.log(fruits[0]); // 输出 "Apple"

console.log(fruits[1]); // 输出 "Banana"

6.2 数组方法

数组有许多内建方法，用于操作数组元素。以下是一些常见的方法：

push(): 向数组末尾添加一个或多个元素。pop(): 移除数组末尾的元素。shift(): 移除数组开头的元素。unshift(): 向数组开头添加一个或多个元素。

let numbers = [1, 2, 3];

// 添加元素

numbers.push(4);

console.log(numbers); // 输出 [1, 2, 3, 4]

// 移除元素

numbers.pop();

console.log(numbers); // 输出 [1, 2, 3]

// 移除开头元素

numbers.shift();

console.log(numbers); // 输出 [2, 3]

6.3 遍历数组

你可以使用 for 循环或者数组的内建方法（如 forEach()）来遍历数组。

let colors = ["red", "green", "blue"];

// 使用 for 循环遍历

for (let i = 0; i < colors.length; i++) {

console.log(colors[i]);

}

// 使用 forEach 方法遍历

colors.forEach(function(color) {

console.log(color);

});

7. 作用域

作用域是指变量、函数和对象可访问的区域。在 JavaScript 中，有两种主要的作用域：全局作用域 和 局部作用域。

7.1 全局作用域

在 JavaScript 中，声明在函数外部的变量是全局变量，这些变量在整个程序中都可以访问。

let globalVar = "I am a global variable";

function showVar() {

console.log(globalVar); // 可以访问全局变量

}

showVar(); // 输出 "I am a global variable"

7.2 局部作用域

在函数内部声明的变量是局部变量，只在函数内部可见，外部无法访问。

function localScope() {

let localVar = "I am a local variable";

console.log(localVar); // 可以访问局部变量

}

localScope();

// console.log(localVar); // 错误：localVar 在外部无法访问

7.3 块级作用域

ES6 引入了 let 和 const，它们有块级作用域，即它们只能在声明它们的代码块内部访问。

if (true) {

let blockVar = "I am inside a block";

console.log(blockVar); // 输出 "I am inside a block"

}

// console.log(blockVar); // 错误：blockVar 只在 if 块内可见

8. 事件处理

JavaScript 允许我们监听并响应用户与网页的互动。常见的事件包括点击事件、鼠标事件、键盘事件等。

8.1 事件监听

你可以使用 addEventListener() 方法来监听元素的事件，并为事件指定回调函数。

let button = document.getElementById("myButton");

button.addEventListener("click", function() {

alert("按钮被点击了!");

});

在这个例子中，当用户点击按钮时，网页会弹出一个提示框。

8.2 事件对象

当事件发生时，浏览器会创建一个事件对象，并将其传递给事件处理函数。这个事件对象包含了事件的详细信息，例如鼠标位置、按键代码等。

button.addEventListener("click", function(event) {

console.log("点击位置: " + event.clientX + ", " + event.clientY);

});

9. 异步编程

JavaScript 是单线程的，这意味着它一次只能执行一个任务。为了在执行某些长时间运行的操作（如文件读取、网络请求等）时不阻塞主线程，JavaScript 提供了异步编程的机制。

9.1 回调函数

回调函数是 JavaScript 异步编程中最常见的一种方法。它是一个作为参数传递给另一个函数的函数，当某个任务完成时会被调用。

function fetchData(callback) {

setTimeout(() => {

console.log("数据获取完毕");

callback(); // 调用回调函数

}, 2000);

}

fetchData(() => {

console.log("回调函数被执行");

});

在上面的代码中，fetchData 函数模拟了一个异步操作，使用 setTimeout 模拟了 2 秒钟的延迟。数据获取完毕后，回调函数被执行。

9.2 问题：回调地狱

当异步操作之间存在依赖关系时，回调函数可能会嵌套在一起，形成所谓的 回调地狱（Callback Hell）。这会使得代码难以阅读和维护。

javascript

复制代码

fetchData(() => { fetchData(() => { fetchData(() => { console.log("数据获取完毕"); }); }); });

10. Promise

为了避免回调地狱，ES6 引入了 Promise，它提供了更清晰的异步编程方式。Promise 是一个代表异步操作最终完成（或失败）及其结果值的对象。

10.1 创建 Promise

一个 Promise 对象有三种状态：pending（等待中）、fulfilled（已完成）和 rejected（已拒绝）。你可以通过 new Promise() 创建一个 Promise 对象，并通过 resolve 和 reject 方法来改变其状态。

fetchData(() => {

fetchData(() => {

fetchData(() => {

console.log("数据获取完毕");

});

});

});

then() 方法用于指定操作成功时的回调函数。catch() 方法用于指定操作失败时的回调函数。

10.2 Promise 链式调用

Promise 支持链式调用，使得多个异步操作可以按顺序进行处理。

let myPromise = new Promise((resolve, reject) => {

let success = true;

if (success) {

resolve("操作成功");

} else {

reject("操作失败");

}

});

myPromise.then((message) => {

console.log(message); // 输出 "操作成功"

}).catch((message) => {

console.log(message); // 输出 "操作失败"

});

每个 then() 方法返回一个新的 Promise 对象，这使得你可以链接多个 then() 调用，依次处理异步任务。

10.3 Promise.all

Promise.all 方法可以将多个 Promise 对象合并成一个 Promise 对象，它会在所有的 Promise 对象都完成时返回结果。如果其中任何一个 Promise 失败，Promise.all 会立刻失败并返回错误。

let promise1 = new Promise((resolve) => resolve("任务1完成"));

let promise2 = new Promise((resolve) => resolve("任务2完成"));

let promise3 = new Promise((resolve) => resolve("任务3完成"));

Promise.all([promise1, promise2, promise3]).then((results) => {

console.log(results); // 输出 ["任务1完成", "任务2完成", "任务3完成"]

});

11. async/await

为了进一步简化异步编程，ES7 引入了 async 和 await。async 和 await 基于 Promise，但它们使得异步代码看起来更像是同步代码，从而提高了可读性。

11.1 async 函数

async 关键字用于声明一个异步函数。异步函数总是返回一个 Promise 对象，并且可以使用 await 来等待其他异步操作的结果。

async function fetchData() {

return "数据获取成功";

}

fetchData().then((message) => {

console.log(message); // 输出 "数据获取成功"

});

11.2 await 表达式

await 关键字用于等待一个 Promise 对象解决，并返回其结果。await 只能在 async 函数内部使用。

async function getData() {

let result = await fetchData();

console.log(result); // 输出 "数据获取成功"

}

getData();

await 会暂停代码的执行，直到 Promise 被解决，然后返回结果。它让异步代码变得更加直观。

11.3 错误处理

你可以通过 try...catch 来处理异步函数中的错误：

async function getData() {

try {

let result = await fetchData();

console.log(result);

} catch (error) {

console.log("发生错误: " + error);

}

}

12. 模块化

随着应用的增大，代码组织变得非常重要。为了使代码更模块化，JavaScript 提供了模块化的支持。在 ES6 中，JavaScript 引入了原生的模块化系统，可以使用 import 和 export 语句来组织代码。

12.1 导出模块

你可以使用 export 来导出模块中的变量、函数或类，以便在其他文件中使用。

// file1.js

export const greet = (name) => {

console.log("Hello, " + name);

};

12.2 导入模块

在另一个文件中，你可以使用 import 语句来引入其他文件导出的模块。

// file2.js

import { greet } from './file1.js';

greet("Alice"); // 输出 "Hello, Alice"

12.3 默认导出

你还可以导出一个默认模块，使用 default 关键字：

// file1.js

export default function add(a, b) {

return a + b;

}

然后使用默认导入：

// file2.js

import add from './file1.js';

console.log(add(5, 3)); // 输出 8

13. ES6 新特性总结

除了上述内容，ES6 还引入了许多新的语言特性，如：

解构赋值：可以方便地提取数组和对象中的值。模板字符串：提供更便捷的字符串拼接方式。类：类语法使得对象的构造和继承更加直观。Set 和 Map：提供新的数据结构，分别用于存储唯一值和键值对。

// 解构赋值

let [a, b] = [1, 2];

console.log(a); // 输出 1

// 模板字符串

let name = "Alice";

let greeting = `Hello, ${name}!`;

console.log(greeting); // 输出 "Hello, Alice!"

// 类

class Person {

constructor(name, age) {

this.name = name;

this.age = age;

}

}

let person = new Person("Alice", 25);

console.log(person.name); // 输出 "Alice"

通过本系列的 JavaScript 入门教程，我们已经覆盖了从基础到中级，再到高级的 JavaScript 知识。从理解基础语法到掌握异步编程和模块化，JavaScript 的强大和灵活性在实际开发中展现得淋漓尽致。希望这些知识能够帮助你更好地理解和应用 JavaScript，为你的编程之路奠定坚实的基础。

各位小伙伴还在BOSS直聘hr已读不回？！试试这个宝藏小程序！大家快看这里。

创作不易，各位帅气漂亮的小伙伴点个关注再走呗！！