ES6是JavaScript的实质性升级,彻底改变代码组织、数据处理、作用域管理与异步思维;let/const替代var解决作用域与提升问题,箭头函数固化this绑定,解构赋值结合默认值安全提取嵌套数据,Promise与async/await终结回调地狱。

ES6(ECMAScript 2015)不是“新特性集合”,而是 JavaScript 语言一次实质性升级——它改变了你组织代码、处理数据、管理作用域甚至思考异步的方式。不升级语法,就等于用 ES5 写现代应用,徒增冗余和出错风险。
let/const 替代 var:作用域问题不能靠经验补救
var 的函数作用域和变量提升(hoisting)常导致意外交互,比如循环中绑定事件时所有回调共享同一个 i 值。而 let 和 const 是块级作用域,且不被提升(只存在“暂时性死区”)。
实操建议:
- 默认用
const声明所有变量;只有明确需要重新赋值时才用let - 绝不用
var—— 即使在简单脚本里,它带来的隐式行为比显式报错更难调试 - 注意:对象或数组用
const声明后,其内部属性仍可修改,只是引用不可变
箭头函数:this 绑定不再是玄学
传统函数的 this 取决于调用方式,箭头函数则继承外层作用域的 this,彻底解决回调中 this 指向丢失的问题。
立即学习“Java免费学习笔记(深入)”;
但要注意适用边界:
- 不能用作构造函数(无
prototype,调用会报TypeError: xxx is not a constructor) - 没有自己的
arguments对象,需改用剩余参数...args - 对象方法中慎用:若写成
obj = { fn: () => console.log(this) },this指向外层而非obj
const timer = {
count: 0,
start() {
// ✅ 正确:普通函数,this 指向 timer
setInterval(() => {
this.count++; // 箭头函数捕获外层 this
console.log(this.count);
}, 1000);
}
};
解构赋值 + 默认值:别再手写 if (obj && obj.a)
解构不是语法糖,是结构化提取数据的底层能力。配合默认值,能自然处理嵌套缺失字段。
常见错误:
- 对
null或undefined解构会直接报TypeError: Cannot destructure property 'x' of 'y' as it is undefined - 深层解构如
const { user: { name } } = data;要求data.user存在,否则崩溃
安全写法:
const data = { user: null };
// ✅ 安全:提供默认空对象
const { user = {} } = data;
const { name = 'Anonymous' } = user;
Promise + async/await:回调地狱不是必须忍受的代价
用 new Promise() 手动封装异步逻辑已过时。现代写法是:优先使用 async/await,配合 try/catch 处理错误;底层 API 返回 Promise 即可(如 fetch()、setTimeout 封装)。
关键细节:
-
await只能在async函数内使用,顶层 await 仅限 ES2022+ 模块环境 -
Promise.all([])空数组会立即 resolve;Promise.allSettled([])同理,但返回全 fulfilled/rejected 结果 - 并发控制别硬写
for await,用Promise.allSettled()或第三方库如p-limit
async function loadUsers() {
try {
const res = await fetch('/api/users');
const users = await res.json();
return users.filter(u => u.active);
} catch (err) {
console.error('Failed to load users:', err.message);
return [];
}
}
真正卡住人的从来不是“记不住语法”,而是没意识到某些写法会让错误延迟暴露(比如 var 提升)、或让调试路径变长(比如嵌套回调中 this 错位)。ES6 特性不是锦上添花,而是把语言从“能跑”拉到“可维护”的必要工具。











