17370845950

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 ?? {};（需 ES2025+ 可选链）

function connect({ host = 'localhost', port = 3000, secure = false } = {}) {
  return `http${secure ? 's' : ''}://${host}:${port}`;
}

用 Promise 链和 async/await 消除回调地狱，但别滥用 try/catch

async/await 让异步代码像同步一样读，代价是错误必须显式捕获——很多人漏掉 catch 或错误处理粒度太粗。

• 单个 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() 和扩展运算符在处理类数组时有差异——不理解底层机制就套用，很快会掉进“语法正确但逻辑错误”的坑里。