前言

上接[ES6：初学1](https://blog.csdn.net/cfvbcgbcfh/article/details/159284306?spm=1011.2124.3001.6209)。
 

回调地狱

回调地狱（Callback Hell）是 JavaScript 中多层异步回调函数嵌套导致的代码问题，核心表现是：代码缩进层级越来越深、可读性极差、维护和调试困难，看起来像 “金字塔” 一样

// 模拟异步请求函数（比如接口请求）
function getUserInfo(callback) {
  setTimeout(() => {
    console.log("1. 获取用户信息");
    callback({ userId: 1001 }); // 第一个请求完成，执行回调
  }, 1000);
}

function getOrder(userId, callback) {
  setTimeout(() => {
    console.log("2. 根据用户ID获取订单");
    callback({ orderId: 2001 }); // 第二个请求完成，执行回调
  }, 1000);
}

function getGoods(orderId, callback) {
  setTimeout(() => {
    console.log("3. 根据订单ID获取商品");
    callback({ goodsName: "手机" }); // 第三个请求完成，执行回调
  }, 1000);
}

// 回调地狱：多层嵌套，缩进越来越深
getUserInfo(function(user) {
  getOrder(user.userId, function(order) {
    getGoods(order.orderId, function(goods) {
      console.log("最终拿到商品：", goods);
    });
  });
});

这种代码层级嵌套越多，代码越靠右边，阅读时需要 “层层扒开”，出错后难以定位难以更改

同步请求和异步请求

同步请求：代码执行到请求语句时，会阻塞后续代码，必须等请求完成（成功 / 失败），才继续执行
类比：去奶茶店点单，下单后站在柜台前等，直到拿到奶茶才能做下一件事（比如去上班），期间什么都干不了
异步请求：代码执行到请求语句时，不会阻塞后续代码，请求在后台执行，完成后通过「回调 / Promise/async-await」通知结果，期间代码继续往下走
类比：你点单后拿到取餐码，先去旁边便利店买东西，等奶茶做好了，店员喊你取餐，你再回来拿，期间不耽误做其他事

Promise

// 语法：new Promise((resolve, reject) => { 异步操作 })
const promise = new Promise((resolve, reject) => {
  // 模拟异步操作（比如接口请求、定时器）
  setTimeout(() => {
    const isSuccess = true; // 模拟请求成功/失败
    if (isSuccess) {
      // 成功时调用 resolve，传递结果
      resolve({ data: "请求成功的结果" });
    } else {
      // 失败时调用 reject，传递错误信息
      reject(new Error("请求失败：网络错误"));
    }
  }, 1000);
});
// then：接收成功结果（第一个参数），可选接收失败结果（第二个参数）
// catch：专门接收失败结果（推荐单独用 catch 处理错误）
promise
  .then((result) => {
    // 成功回调：状态变为 fulfilled 时执行
    console.log("成功：", result); // 输出 { data: "请求成功的结果" }
  })
  .catch((error) => {
    // 失败回调：状态变为 rejected 时执行
    console.log("失败：", error.message);
  });

Promise 是异步编程的核心方案，用「状态管理」替代传统回调，解决回调地狱
核心语法：new Promise((resolve, reject) => { 异步操作 }) + .then() 接收成功 + .catch() 接收失败

模块化

ES6 模块化的核心语法：export（导出） + import（导入）
基本导出 / 导入：适合导出多个变量、函数、对象的场景

// 第一步：创建模块文件（比如 utils.js）—— 导出
// 导出变量
export const PI = 3.14;
// 导出函数
export function sum(a, b) {
  return a + b;
}
// 导出对象
export const user = { name: "张三", age: 20 };

// 第二步：在其他文件（比如 index.js）—— 导入
// 方式1：按需导入（指定要导入的内容，名字要和导出一致）
import { PI, sum, user } from "./utils.js";
console.log(PI); // 3.14
console.log(sum(1, 2)); // 3
console.log(user.name); // 张三

// 方式2：导入后重命名（避免名字冲突）
import { PI as circlePI, sum as add } from "./utils.js";
console.log(circlePI); // 3.14
console.log(add(1, 2)); // 3

// 方式3：导入所有内容（用 * 通配符，打包成一个对象）
import * as utils from "./utils.js";
console.log(utils.PI); // 3.14
console.log(utils.sum(1, 2)); // 3

默认导出 / 导入：合一个模块只导出「核心内容」

// 第一步：创建模块文件（比如 api.js）—— 默认导出
// 默认导出一个函数（核心请求函数）
export default function request(url) {
  console.log(`请求接口：${url}`);
}

// 也可以先定义，再默认导出
// function request(url) { ... }
// export default request;

// 第二步：在其他文件导入（名字可自定义，不用和导出一致）
import requestApi from "./api.js"; // 自定义名字 requestApi
requestApi("https://api.example.com/user"); // 输出：请求接口：https://api.example.com/user

混合导出 / 导入：一个模块可同时有「命名导出」和「默认导出」

// 模块文件：mix.js
export const version = "1.0.0"; // 命名导出
export default function coreFn() { // 默认导出
  console.log("核心函数");
}

// 导入文件：index.js
import coreFn, { version } from "./mix.js"; // 先写默认导出，再写命名导出
coreFn(); // 核心函数
console.log(version); // 1.0.0

总结

ES6作为JavaScript的核心升级标准，核心目标是解决传统JS的历史缺陷、简化代码写法并适配大型项目开发。在变量声明层面，ES6用let和const替代var，二者均具备块级作用域且不允许重复声明，其中let支持延后赋值和重新赋值，const需立即赋值且禁止重新赋值（引用类型可修改内部属性），实战中优先使用const，仅在变量需要修改时用let。语法简化方面，模板字符串通过反引号包裹、${}嵌入变量/表达式的方式，替代繁琐的字符串拼接并支持多行写法；箭头函数以(参数) => 代码/返回值的简洁形式简化函数定义，核心特性是无自身this，继承外层作用域的this，适合回调函数场景；解构赋值则按顺序（数组）或属性名（对象）批量拆解值到变量，大幅简化取值代码。异步编程是ES6的核心升级点，Promise作为异步操作的“状态容器”，通过resolve（成功）、reject（失败）管理异步结果，配合.then()/.catch()实现异步逻辑的平铺式书写，解决了传统回调嵌套导致的“回调地狱”问题，Promise.all()可并行执行多个异步操作，Promise.race()适用于超时控制等竞速场景，而async/await作为Promise的语法糖，进一步让异步代码具备同步代码的可读性。模块化则通过export（分命名导出、默认导出）和import语法，将代码拆分为独立模块，解决了全局变量污染、代码复用难、依赖混乱的问题，是前端框架开发的基础，浏览器中使用需给脚本加type="module"，Node.js需配置type: module或修改文件后缀为.mjs。整体而言，ES6并非新语言，而是围绕“简化代码、优化异步、工程化组织代码”三大方向对JS的升级，其中异步相关特性是前端高频考点，模块化则是大型前端项目的必备能力。