ES6 + 核心语法全解析（极简可运行代码 + 避坑 + 快速回顾） 前言 学 ES6 语法时总记混 let/const 作用域、箭头函数 this 指向、解构赋值传参规则，还踩过'const 定义对象改属性报错''模板字符串换行空格'的坑，整理了 10 个高频核心语法的「问题 + 思路 + 极简例子」，每个例子都能直接复制运行，方便自己后续快速唤醒记忆，也能让新手看懂核心用法。 --- 一、核心…
学 ES6 语法时总记混 let/const 作用域、箭头函数 this 指向、解构赋值传参规则，还踩过'const 定义对象改属性报错''模板字符串换行空格'的坑，整理了 10 个高频核心语法的「问题 + 思路 + 极简例子」，每个例子都能直接复制运行，方便自己后续快速唤醒记忆，也能让新手看懂核心用法。
ES6（ECMAScript 2015）及后续版本是 JavaScript 的重大升级，核心是：比如用 解决 的全局 / 函数作用域混乱问题，用箭头函数简化回调写法并固定 指向，用解构 / 扩展运算符快速操作数组 / 对象，用 解决回调地狱。所有语法都围绕'写更少的代码，做更多的事'，且完全兼容日常开发（如 uni-app、前端项目）。
let/constvarthisPromise/Async-Await
var 只有全局 / 函数作用域，容易变量提升、重复声明导致 bug（比如循环里的变量泄露）。
let 是块级作用域变量（可重新赋值），const 是块级作用域常量（引用不可变），两者都不能重复声明、不存在变量提升。
// 步骤 1：对比 var 的问题（var 无块级作用域）
var a = 1;
if (true) {
var a = 2; // 覆盖全局 a
}
console.log(a); // 输出 2（坑：本意是块内变量，却改了全局）
// 步骤 2：let 的正确用法（块级作用域）
let b = 1;
if (true) {
let b = 2; // 块内新变量，不影响外部
}
console.log(b); // 输出 1（符合预期）
// 步骤 3：const 的正确用法（引用不可变）
const PI = 3.14;
// PI = 3.1415; // ❌ 报错：不能重新赋值（核心坑点）
const user = { name: "张三" };
user.name = "李四"; // ✅ 允许改属性（const 只锁引用，不锁值）
console.log(user.name); // 输出李四
传统函数的 this 指向随调用场景变化（比如定时器里 this 指向 window），回调函数写法繁琐。
箭头函数无自身 this（继承外层作用域的 this），语法更简洁，适合简单回调 / 纯函数。
// 步骤 1：传统函数的 this 坑
const person = {
name: "张三",
sayName: function () {
setTimeout(function () {
console.log(this.name); // 输出 undefined（this 指向 window）
}, 100);
},
};
person.sayName();
// 步骤 2：箭头函数解决 this 问题
const person2 = {
name: "张三",
sayName: function () {
setTimeout(() => {
console.log(this.name); // 输出张三（继承外层 this）
}, 100);
},
};
person2.sayName();
// 步骤 3：箭头函数简写规则
const add = (a, b) => a + b; // 单返回值可省略{}和 return
console.log(add(1, 2)); // 输出 3
const fn = a => a * 2; // 单参数可省略()
console.log(fn(3)); // 输出 6
传统字符串拼接需要 + 号，多行字符串需要 \n 转义，易出错。
用反引号 ` 包裹字符串，${变量/表达式} 插值，支持原生多行，无需转义。
// 步骤 1：传统拼接的麻烦
const name = "张三";
const age = 20;
const str1 = "姓名：" + name + "，年龄：" + age + "\n多行字符串";
console.log(str1);
// 步骤 2：模板字符串简化
const str2 = `姓名：${name}，年龄：${age} 多行字符串（原生换行）表达式：${1 + 2}`;
console.log(str2); // 输出：姓名：张三，年龄：20 换行 多行字符串 换行 表达式：3
从数组 / 对象中取数据需要逐个赋值，代码冗余（比如 const name = user.name; const age = user.age;）。
按数组 / 对象的结构'拆解'，直接提取所需数据，支持默认值、重命名。
// 步骤 1：数组解构
const arr = [1, 2, 3];
const [a, b] = arr; // 按顺序提取
console.log(a, b); // 输出 1 2
const [x, , z] = arr; // 跳过第二个元素
console.log(x, z); // 输出 1 3
// 步骤 2：对象解构（按属性名，不按顺序）
const user = { name: "张三", age: 20 };
const { name, age } = user; // 直接提取
console.log(name, age); // 输出张三 20
const { name: userName } = user; // 重命名（避免变量冲突）
console.log(userName); // 输出张三
// 步骤 3：函数参数解构（高频用法）
function printUser({ name, age = 18 }) { // 设置默认值
console.log(`${name}，${age}岁`);
}
printUser(user); // 输出张三，20 岁
printUser({ name: "李四" }); // 输出李四，18 岁（用默认值）
传统合并数组用 concat，复制数组用 slice，合并对象用 Object.assign，写法繁琐。
用 ... 展开数组 / 对象，实现一键合并、复制（浅拷贝），替代传统方法。
// 步骤 1：数组操作
const arr1 = [1, 2];
const arr2 = [3, 4];
const mergeArr = [...arr1, ...arr2]; // 合并数组
console.log(mergeArr); // 输出 [1,2,3,4]
const copyArr = [...arr1]; // 复制数组（浅拷贝）
console.log(copyArr); // 输出 [1,2]
// 步骤 2：对象操作
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, b: 3, c: 4 }; // 合并 + 覆盖属性
console.log(obj2); // 输出 {a:1,b:3,c:4}
const copyObj = { ...obj1 }; // 复制对象（浅拷贝）
console.log(copyObj); // 输出 {a:1,b:2}
对象属性名和变量名相同时，需要重复写 key: value；方法需要写 function 关键字。
变量名 = 属性名时可省略 key:，方法可省略 function，支持动态属性名。
// 步骤 1：属性简写
const name = "张三";
const age = 20;
const user = { name, age }; // 等价于{name: name, age: age}
console.log(user); // 输出 {name: "张三", age: 20}
// 步骤 2：方法简写
const obj = {
sayHi() { // 等价于 sayHi: function() {}
console.log("Hi");
},
};
obj.sayHi(); // 输出 Hi
// 步骤 3：动态属性名
const key = "status";
const obj2 = {
[key]: "active", // 动态属性名：status
[`get_${key}`]() { // 动态方法名：get_status
return this[key];
},
};
console.log(obj2.status); // 输出 active
console.log(obj2.get_status()); // 输出 active
多层异步回调（比如先请求用户数据，再请求用户订单）会形成'回调地狱'，代码嵌套深、难维护。
Promise 将异步操作封装为对象，用 then/catch 链式调用；Async-Await 是 Promise 的语法糖，用同步写法写异步代码。
// 步骤 1：模拟异步请求（比如接口调用）
function fetchData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ name: "张三" }); // 成功返回数据
// reject(new Error("请求失败")); // 失败返回错误
}, 1000);
});
}
// 步骤 2：Promise 链式调用（替代回调嵌套）
fetchData()
.then(data => {
console.log(data); // 输出 {name: "张三"}
return data.name;
})
.then(name => console.log(name)) // 输出张三
.catch(error => console.error(error)); // 捕获错误
// 步骤 3：Async-Await（同步写法）
async function loadData() {
try {
const data = await fetchData(); // 等待异步完成
console.log(data); // 输出 {name: "张三"}
} catch (error) {
console.error(error); // 捕获错误
}
}
loadData();
数组去重需要遍历 + 判断，对象的键只能是字符串 / Symbol，无法用对象做键。
Set 是唯一值集合（一键去重），Map 是键值对集合（键可以是任意类型）。
// 步骤 1：Set 去重（高频用法）
const arr = [1, 2, 2, 3];
const uniqueArr = [...new Set(arr)]; // 数组去重
console.log(uniqueArr); // 输出 [1,2,3]
// 步骤 2：Map 使用（键可以是对象）
const map = new Map();
const objKey = { id: 1 };
map.set(objKey, "张三"); // 对象作为键
console.log(map.get(objKey)); // 输出张三
console.log(map.has(objKey)); // 输出 true
传统原型链继承写法繁琐（比如 Person.prototype.sayHi = function() {}），易出错。
Class 是原型链的语法糖，用 class/constructor/extends/super 实现面向对象编程，更贴近传统语言。
// 步骤 1：定义基础类
class Person {
constructor(name, age) { // 构造函数（初始化属性）
this.name = name;
this.age = age;
}
sayHi() { // 实例方法
console.log(`Hi, ${this.name}`);
}
}
const p = new Person("张三", 20);
p.sayHi(); // 输出 Hi, 张三
// 步骤 2：继承
class Student extends Person {
constructor(name, age, grade) {
super(name, age); // 调用父类构造函数
this.grade = grade;
}
sayGrade() {
console.log(`${this.name}的年级：${this.grade}`);
}
}
const s = new Student("李四", 18, "高三");
s.sayHi(); // 输出 Hi, 李四
s.sayGrade(); // 输出李四的年级：高三
多个 JS 文件共用变量时会造成全局污染，代码无法隔离复用。
用 export 导出模块内的变量 / 函数 / 类，用 import 导入到其他文件，实现代码隔离和复用。
// 步骤 1：创建模块文件（module.js）
export const PI = 3.14; // 命名导出
export function add(a, b) {
return a + b;
}
export default function mul(a, b) { // 默认导出（一个模块只能有一个）
return a * b;
}
// 步骤 2：导入模块（app.js）
import mul, { PI, add } from './module.js';
console.log(PI); // 输出 3.14
console.log(add(1, 2)); // 输出 3
console.log(mul(2, 3)); // 输出 6
const 定义对象后改属性报错 → ✅ 解决：const 锁的是'引用地址'，不是值，对象 / 数组属性可正常修改，只有重新赋值（user = {}）才会报错；arguments → ✅ 解决：箭头函数无 arguments 对象，需用剩余参数 ...args 替代；trim() 去除首尾空格；undefined；JSON.parse(JSON.stringify()) 或专门的深拷贝方法；Async-Await 未用 try/catch 捕获错误 → ✅ 解决：await 的异步错误必须用 try/catch 捕获，否则会静默失败。let/const 替代 var，用箭头函数简化回调，用解构 / 扩展运算符操作数据，用 Async-Await 写异步代码；let/const、模板字符串、解构 / 扩展运算符、Async-Await 是使用频率最高的 5 个语法，必须掌握；const 的'引用不可变'、箭头函数的 this 继承规则、扩展运算符的浅拷贝特性，能避免 80% 的 ES6 使用坑；模拟前端请求「用户列表」和「用户订单列表」两个异步接口，完成以下操作：
Async-Await 并行请求两个接口（模拟接口用 Promise 封装，延迟 1 秒返回数据）；orders 字段（匹配 userId）；[{ id: 1, name: "张三", orders: [/* 该用户订单 */], totalAmount: 去重后总金额 }, ...]。// 模拟用户列表接口
function fetchUsers() {
return new Promise(resolve => setTimeout(() => {
resolve([
{ id: 1, name: "张三", age: 20 },
{ id: 2, name: "李四", age: 22 },
{ id: 3, name: "王五", age: 25 }
]);
}, 1000));
}
// 模拟订单列表接口
function fetchOrders() {
return new Promise(resolve => setTimeout(() => {
resolve([
{ orderId: 1, userId: 1, amount: 100 },
{ orderId: 2, userId: 1, amount: 200 },
{ orderId: 3, userId: 1, amount: 200 }, // 重复金额
{ orderId: 4, userId: 2, amount: 150 },
{ orderId: 5, userId: 3, amount: 0 } // 金额为 0
]);
}, 1000));
}
Async-Await 处理异步，禁止使用 then/catch 链式调用；Set 实现；async function handleUserAndOrders() {
// 并行请求两个接口，数组解构接收结果
const [users, orders] = await Promise.all([fetchUsers(), fetchOrders()]);
// 处理用户数据，过滤无有效订单的用户
const result = users.map(user => {
// 筛选当前用户的有效订单（userId 匹配 + 金额>0）
const userOrders = orders.filter(order => order.userId === user.id && order.amount > 0);
if (userOrders.length === 0) return null; // 无有效订单返回 null，后续过滤
// Set 实现金额去重，扩展运算符转数组后求和
const uniqueAmounts = new Set(userOrders.map(order => order.amount));
const totalAmount = [...uniqueAmounts].reduce((sum, amount) => sum + amount, 0);
// 扩展运算符合并用户基础数据，添加订单和总金额字段
return { ...user, orders: userOrders, totalAmount };
}).filter(Boolean); // 过滤 null 值，保留有有效订单的用户
return result;
}
// 测试调用
handleUserAndOrders().then(res => console.log(res));
// 预期输出：
// [
// { id: 1, name: "张三", age: 20, orders: [{ orderId:1, userId:1, amount:100 }, { orderId:2, userId:1, amount:200 }, { orderId:3, userId:1, amount:200 }], totalAmount: 300 },
// { id: 2, name: "李四", age: 22, orders: [{ orderId:4, userId:2, amount:150 }], totalAmount: 150 }
// ]
封装一个 ShoppingCart 类，实现购物车核心功能：
Map 存储商品（键：商品 id，值：{id, name, price, count}）；addGoods(goods)：添加商品（若已存在则累加数量，商品格式：{id, name, price}）；removeGoods(goodsId)：删除指定 id 的商品；getTotalPrice()：计算购物车商品总价（价格 × 数量求和）；getCartInfo()：返回购物车信息字符串，格式："购物车：商品 1（数量：2，单价：100）、商品 2（数量：1，单价：200），总价：400"。const cart = new ShoppingCart();
cart.addGoods({ id: 1, name: "手机", price: 2000 });
cart.addGoods({ id: 1, name: "手机", price: 2000 }); // 数量累加为 2
cart.addGoods({ id: 2, name: "耳机", price: 300 });
console.log(cart.getTotalPrice()); // 预期输出：4300
console.log(cart.getCartInfo()); // 预期输出："购物车：手机（数量：2，单价：2000）、耳机（数量：1，单价：300），总价：4300"
cart.removeGoods(2);
console.log(cart.getCartInfo()); // 预期输出："购物车：手机（数量：2，单价：2000），总价：4000"
class ShoppingCart {
constructor() {
// 初始化 Map，键为商品 id，值为商品详细信息
this.goodsMap = new Map();
}
// 添加商品：对象简写语法，解构取值简化代码
addGoods(goods) {
const { id, name, price } = goods;
if (this.goodsMap.has(id)) {
// 商品已存在，累加数量，扩展运算符保留原有属性
const oldGoods = this.goodsMap.get(id);
this.goodsMap.set(id, { ...oldGoods, count: oldGoods.count + 1 });
} else {
// 商品不存在，新增，数量默认 1
this.goodsMap.set(id, { id, name, price, count: 1 });
}
}
// 删除商品：根据 id 删除 Map 中的键值对
removeGoods(goodsId) {
this.goodsMap.delete(goodsId);
}
// 计算总价：遍历 Map 值，累加价格×数量
getTotalPrice() {
let total = 0;
for (const goods of this.goodsMap.values()) {
total += goods.price * goods.count;
}
return total;
}
// 获取购物车信息：模板字符串拼接，扩展运算符转数组后遍历
getCartInfo() {
const goodsStr = [...this.goodsMap.values()].map(goods => {
return `${goods.name}（数量：${goods.count}，单价：${goods.price}）`;
}).join("、");
const totalPrice = this.getTotalPrice();
return `购物车：${goodsStr}，总价：${totalPrice}`;
}
}
// 测试用例执行
const cart = new ShoppingCart();
cart.addGoods({ id: 1, name: "手机", price: 2000 });
cart.addGoods({ id: 1, name: "手机", price: 2000 });
cart.addGoods({ id: 2, name: "耳机", price: 300 });
console.log(cart.getTotalPrice()); // 4300
console.log(cart.getCartInfo()); // 购物车：手机（数量：2，单价：2000）、耳机（数量：1，单价：300），总价：4300
cart.removeGoods(2);
console.log(cart.getCartInfo()); // 购物车：手机（数量：2，单价：2000），总价：4000
封装一个 formatUtil.js 工具模块，实现以下功能：
DEFAULT_FORMAT（值：{ date: "YYYY-MM-DD", money: "¥0.00" }）；formatDate：接收日期对象 / 时间戳，返回指定格式的日期字符串（默认用 DEFAULT_FORMAT.date）；formatMoney：接收数字，返回指定格式的金额字符串（默认用 DEFAULT_FORMAT.money）；formatData：接收数据对象（{date, money}），合并默认配置，返回格式化后的对象；const 声明，函数用箭头函数；import formatData, { formatDate, formatMoney, DEFAULT_FORMAT } from './formatUtil.js';
console.log(formatDate(new Date(2026, 0, 27))); // 预期输出："2026-01-27"
console.log(formatMoney(100)); // 预期输出："¥100.00"
console.log(formatData({ date: new Date(2026, 0, 27), money: 200 })); // 预期输出：{ date: "2026-01-27", money: "¥200.00" }
console.log(formatData({ money: 300 }, { money: "$0.00" })); // 预期输出：{ date: "YYYY-MM-DD", money: "$300.00" }
// 常量声明：所有变量用 const，符合要求
const DEFAULT_FORMAT = { date: "YYYY-MM-DD", money: "¥0.00" };
// 格式化日期：箭头函数，参数默认值，处理日期对象/时间戳
const formatDate = (date, format = DEFAULT_FORMAT.date) => {
const d = new Date(date);
const year = d.getFullYear();
const month = String(d.getMonth() + 1).padStart(2, "0"); // 补 0 为 2 位
const day = String(d.getDate()).padStart(2, "0"); // 替换格式符为实际日期
return format.replace("YYYY", year).replace("MM", month).replace("DD", day);
};
// 格式化金额：箭头函数，参数默认值，数字补两位小数
const formatMoney = (num, format = DEFAULT_FORMAT.money) => {
const fixedNum = Number(num).toFixed(2); // 确保是两位小数
return format.replace("0.00", fixedNum);
};
// 默认导出：格式化数据，箭头函数，解构 + 默认值，扩展运算符合并配置
const formatData = (data = {}, customFormat = {}) => {
// 合并默认配置和自定义配置，自定义配置优先级更高
const finalFormat = { ...DEFAULT_FORMAT, ...customFormat };
const { date, money } = data;
// 按需格式化日期和金额，未传则返回配置默认值
return {
date: date ? formatDate(date, finalFormat.date) : finalFormat.date,
money: money ? formatMoney(money, finalFormat.money) : finalFormat.money
};
};
// 命名导出 + 默认导出，符合模块化规范
export { DEFAULT_FORMAT, formatDate, formatMoney };
export default formatData;
import formatData, { formatDate, formatMoney, DEFAULT_FORMAT } from './formatUtil.js';
// 测试调用
console.log(formatDate(new Date(2026, 0, 27))); // 2026-01-27
console.log(formatMoney(100)); // ¥100.00
console.log(formatData({ date: new Date(2026, 0, 27), money: 200 })); // { date: '2026-01-27', money: '¥200.00' }
console.log(formatData({ money: 300 }, { money: "$0.00" })); // { date: 'YYYY-MM-DD', money: '$300.00' }
题目：let/const 与 var 的核心区别有哪些？为什么实际开发中推荐优先使用 const 而非 let？
参考答案：
var 是函数 / 全局作用域，let/const 是块级作用域（{} 包裹的区域，如 if/for/while）；var 存在变量提升（可先使用后声明），let/const 存在暂时性死区（声明前使用会报错，无变量提升）；var 允许同一作用域内重复声明，let/const 不允许；const 声明时必须初始化，var/let 可后续赋值；var 声明的全局变量会挂载到 window/global 上，let/const 不会。const 明确表示变量引用不可变，代码可读性更高，其他开发者能快速知道该变量不会被重新赋值；const 改为 let 即可，属于'最小权限原则'；const 仅锁引用地址，不锁值（对象 / 数组属性可正常修改），不影响日常使用。题目：箭头函数和普通函数的核心差异体现在哪些方面？请列举至少 3 点，并说明哪些场景绝对不能使用箭头函数（举例说明）。
参考答案：
this 指向：箭头函数无自身 this，继承外层作用域的 this；普通函数的 this 指向调用者（谁调用指向谁，全局调用指向 window/undefined）；arguments 对象：箭头函数无 arguments 对象，需用剩余参数...args替代；普通函数有 arguments 对象（存储实参的类数组）；const btn = document.querySelector('button');
btn.onclick = () => {
console.log(this)
}; // this 指向 window，而非按钮元素
class Person {
name = "张三";
sayName = () => {
console.log(this.name)
}; // 每个实例都有一个 sayName，浪费内存
}
const obj = {
name: "张三",
sayName: () => {
console.log(this.name) // this 指向 window，输出 undefined
}
};
obj.sayName();
题目：解构赋值是 ES6 的高频用法，请列举 3 个解构赋值的典型业务场景，并说明：解构对象时如果目标属性不存在，如何避免获取到 undefined？
参考答案：
const user = null;
const { name } = user || {}; // user 为 null，用空对象替代，name 取 undefined
const user = { name: "张三" };
const age = user?.info?.age ?? 0; // 可选链判断，空值合并运算符设置默认值
// 错误：info 为 undefined，解构 info.age 会报错
const { info: { age = 0 } } = { name: "张三" };
// 正确：为 info 设置默认空对象，避免报错
const { info: { age = 0 } = {} } = { name: "张三" };
const { name = "未知用户", age = 0 } = { name: "张三" }; // age 不存在，取默认值 0
let a = 1, b = 2;
[a, b] = [b, a]; // 交换 a 和 b 的值，a=2，b=1
// 接口返回数据
const res = { code: 200, data: { list: [1,2,3], total: 3 }, msg: "成功" };
// 解构提取核心数据
const { code, data: { list, total } } = res;
// 传统写法
function fn(options) {
const name = options.name;
const age = options.age;
}
// 解构写法
function fn({ name, age = 18 }) {
console.log(name, age)
}
fn({ name: "张三" });
题目：扩展运算符（...）实现的对象 / 数组拷贝是浅拷贝，请解释「浅拷贝」的定义，并说明深拷贝的 3 种实现方式，以及每种方式的优缺点。
参考答案：
原理：将对象转为 JSON 字符串，再转回新的对象，实现内存地址的完全隔离；
优点：写法简单，无需额外依赖，适合大部分简单场景；
缺点：① 无法拷贝函数、正则表达式、Date 对象、undefined、Symbol；② 无法处理循环引用（对象自身引用 / 互相引用），会直接报错；③ 会丢失对象的原型链，拷贝后变为普通对象。
原理：递归遍历对象的每一层属性，若为引用类型（对象 / 数组）则继续递归拷贝，若为基本类型则直接赋值；
优点：可自定义拷贝规则，支持函数、Date、正则等类型，可处理循环引用，保留原型链；
原理：库内部封装了完善的递归拷贝逻辑，处理了所有边界情况（类型判断、循环引用、原型链等）；
优点：成熟稳定，支持所有数据类型，处理了循环引用 / 原型链 / 特殊对象，无需自己写代码，开发效率高；
缺点：若仅需简单深拷贝，引入库会增加项目体积（可按需引入，如 import cloneDeep from 'lodash/cloneDeep'）。
缺点：代码复杂，需要处理各种边界情况（如 null/undefined/ 正则 / Date / 循环引用），开发成本高；
function deepClone(obj, map = new WeakMap()) {
if (obj === null || typeof obj !== 'object') return obj;
if (obj instanceof Date) return new Date(obj);
if (obj instanceof RegExp) return new RegExp(obj);
if (map.has(obj)) return map.get(obj); // 处理循环引用
const cloneObj = new obj.constructor(); // 保留原型链
map.set(obj, cloneObj);
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
cloneObj[key] = deepClone(obj[key], map);
}
}
return cloneObj;
}
深拷贝的 3 种实现方式及优缺点
JSON.parse(JSON.stringify(obj))（简易深拷贝）_.cloneDeep）浅拷贝的定义浅拷贝仅复制对象 / 数组的第一层属性，对于嵌套的对象 / 数组，不会递归复制，而是直接复制其内存引用地址。修改拷贝后对象的嵌套属性，原对象的嵌套属性也会被修改，因为二者指向同一块内存空间。
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { ...obj1 }; // 浅拷贝
obj2.b.c = 3;
console.log(obj1.b.c); // 输出 3，原对象被修改
题目：Async-Await 的本质是什么？它和 Promise 的关系是什么？使用 Async-Await 时，为什么必须用 try/catch 捕获错误？如果不捕获会有什么问题？
参考答案：
Async-Await 是ES7 推出的语法糖，底层完全基于Promise实现，其核心作用是将异步代码以同步的写法呈现，解决了 Promise 链式调用（then/catch）的嵌套问题，让异步代码的可读性和维护性更高。async 修饰的函数，返回值一定是 Promise 对象（无论函数内返回什么，都会被包装为 Promise.resolve (返回值)）；await 关键字只能在 async 函数中使用，且后面必须跟 Promise 对象（若跟非 Promise 值，会被包装为 Promise.resolve (值)）；await 的作用是等待 Promise 的状态变为 fulfilled（成功），并返回 Promise 的 resolve 值；若 Promise 状态为 rejected（失败），则会抛出错误；await 后面的 Promise 对象状态变为 rejected（如接口请求失败、异步操作报错）时，会抛出一个错误，该错误不会像普通 Promise 那样通过 catch 捕获，而是会静默中断async 函数的执行，若不通过 try/catch 捕获，错误会被'吞噬'，导致后续代码无法执行，且无法定位问题。
代码执行中断：async 函数中，await 抛出错误后，错误位置后的代码会完全停止执行，导致业务逻辑中断；
async function fn() {
await Promise.reject(new Error("请求失败"));
console.log("后续代码"); // 不会执行，因为前面抛出了错误
}
fn();
不捕获错误的问题补充：除了 try/catch，也可通过在 await 后加 Promise.catch () 捕获单个异步错误：
async function fn() {
const res = await fetchData().catch(err => {
console.error(err);
return null; // 兜底返回 null，避免代码中断
});
console.log(res);
}
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online