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

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 文件中通过 <script> 标签嵌入 JavaScript 代码，浏览器会自动执行这些代码。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript 示例</title>
</head>
<body>
    <h1>欢迎来到 JavaScript 的世界!</h1>
    <script>
        alert("Hello, World!"); // 弹出提示框
    </script>
</body>
</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已读不回？！试试这个宝藏小程序！大家快看这里。

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