ES6+是将隐性逻辑显性化、运行时错误前置的工具箱，关键在场景适配：const/let解决作用域泄漏与闭包问题，解构赋值明确取值逻辑与默认值，Promise/async-await需精准错误处理，Map/Set提供真正集合能力，盲目套用新语法易致逻辑错误。
ES6+ 不是语法糖合集，而是帮你把隐性逻辑显性化、把运行时错误提前到开发阶段的工具箱。用错特性反而增加维护成本，关键在选对场景。
用 const 和 let 替代 var 控制作用域泄漏
很多人以为只是“不写 var”就叫用了块级作用域，实际问题常出在循环闭包和变量提升误判上。
-
var声明的变量会提升并绑定到函数作用域，let/const绑定到块级作用域（如for循环体、if分支），避免意外复用 - 循环中用
var i+setTimeout会导致所有回调共享同一个i；改用let i后每次迭代生成独立绑定 -
const不代表“值不可变”，而是“绑定不可重赋值”——对象属性仍可修改，但不能const obj = {}; obj = {};
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 100); // 输出 0, 1, 2
}
// 若用 var，全部输出 3
用解构赋值减少冗余取值和默认值硬编码
解构不是为了写得短，是为了让“从哪取值”和“取不到怎么办”一目了然。
- 函数参数解构适合配置对象：避免
options.type || 'default'这类重复判断，直接写{ type = 'default', timeout = 5000 } = options - 嵌套解构要谨慎：
const { user: { name, age } } = data;在user为null时会报Cannot destructure property 'name' of 'undefined' - 安全解构推荐加空对象默认值：
const { name, age } = data?.user ?? {};（需 ES2020+ 可选链）
function connect({ host = 'localhost', port = 3000, secure = false } = {}) {
return `http${secure ? 's' : ''}://${host}:${port}`;
}
用 Promise 链和 async/await 消除回调地狱，但别滥用 try/catch
async/await 让异步代码像同步一样读，代价是错误必须显式捕获——很多人漏掉 catch 或错误处理粒度太粗。
立即学习“Java免费学习笔记（深入）”；
- 单个
await后不跟try/catch等于把错误抛给调用栈顶层，无法区分是网络失败还是数据解析失败 - 多个并行请求用
Promise.allSettled()而非Promise.all()，避免一个失败导致全部中断 -
async函数返回的是Promise，不要在非await场景下直接返回async () => {...}—— 这会产生多余 Promise 嵌套
async function loadProfile(userId) {
try {
const res = await fetch(`/api/users/${userId}`);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return await res.json();
} catch (err) {
console.error('Profile load failed:', err.message);
throw err; // 不要静默吞掉错误
}
}
用 Map 和 Set 替代普通对象做键值存储
对象作为哈希表有两大硬伤：键只能是字符串/符号，且无法可靠判断是否为空。而 Map 和 Set 是真正意义上的集合类型。
-
Map允许任意类型作键（包括对象、函数、NaN），且按插入顺序遍历，size属性直接获取长度 -
Set去重比[...new Set(arr)]更语义清晰；用set.has(item)查找比arr.includes(item)在大数据量时更高效（O(1) vs O(n)） - 别用
{}模拟Map存对象键——obj[{}]实际转成"[object Object]"，所有对象键都冲突
const cache = new Map();
function getCachedResult(key) {
if (cache.has(key)) return cache.get(key);
const result = expensiveCalculation(key);
cache.set(key, result);
return result;
}
最易被忽略的是：ES6+ 特性不是越新越好，比如 ??（空值合并）和 && 行为不同，Array.from() 和扩展运算符在处理类数组时有差异——不理解底层机制就套用，很快会掉进“语法正确但逻辑错误”的坑里。
