JavaScript零基础入门速通（下）

最新推荐文章于 2025-08-05 17:55:38 发布

小黄编程快乐屋

最新推荐文章于 2025-08-05 17:55:38 发布

阅读量747

点赞数 26

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/beishang_1/article/details/144117109

大家好，我是小黄。

在前两部分中，我们讨论了 JavaScript 的基础语法、函数、对象、数组以及事件处理等核心概念。今天，我们将深入学习 JavaScript 中更高级的主题，包括异步编程、Promise、模块化等内容。掌握这些知识将使你能够编写更加高效和灵活的 JavaScript 应用。

1. 异步编程

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

1.1 回调函数

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

function fetchData(callback) {
    setTimeout(() => {
        console.log("数据获取完毕");
        callback();  // 调用回调函数
    }, 2000);
}

fetchData(() => {
    console.log("回调函数被执行");
});

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

1.2 问题：回调地狱

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

javascript

复制代码

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

2. Promise

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

2.1 创建 Promise

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

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

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

2.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() 调用，依次处理异步任务。

2.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完成"]
});

3. async/await

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

3.1 async 函数

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

async function fetchData() {
    return "数据获取成功";
}

fetchData().then((message) => {
    console.log(message);  // 输出 "数据获取成功"
});

3.2 await 表达式

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

async function getData() {
    let result = await fetchData();
    console.log(result);  // 输出 "数据获取成功"
}

getData();

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

3.3 错误处理

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

async function getData() {
    try {
        let result = await fetchData();
        console.log(result);
    } catch (error) {
        console.log("发生错误: " + error);
    }
}

4. 模块化

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

4.1 导出模块

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

// file1.js
export const greet = (name) => {
    console.log("Hello, " + name);
};

4.2 导入模块

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

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

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

4.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

5. 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已读不回？！试试这个宝藏小程序！大家快看这里。

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