ES6是什么？现代JavaScript特性全解析

ES6（ECMAScript 2015）不是遥远的未来标准，而是你每天都在写的JavaScript——它用let/const终结变量提升与作用域混乱，以箭头函数固化this绑定（同时明确其不可构造的边界），借模板字符串和解构赋值让数据提取与拼接更安全、更简洁，并依托import/export模块系统和Promise（及async/await）构建起现代前端工程的底层骨架；真正阻碍落地的往往不是语法本身，而是根深蒂固的旧习惯——只要改掉用var声明循环变量、在对象方法中误用箭头函数、混淆const与对象冻结这三大误区，你就已稳稳站在现代JavaScript的基石之上。

let/const 替代 var：解决变量提升和作用域混乱

用 var 声明变量，容易在 if 或 for 里意外泄漏到全局；let 和 const 是块级作用域，声明即绑定，不提升。

• let 用于会重新赋值的变量（如计数器、临时状态）
• const 用于不重新赋值的引用（对象、数组）或原始值（数字、字符串）——注意：const obj = {} 允许改 obj.name，只是不能 obj = {}
• 常见错误：console.log(x); let x = 1; → 报错 Cannot access 'x' before initialization（暂时性死区）

箭头函数：this 不再飘忽，但也不能当构造函数

它不是语法糖，核心是词法 this 绑定 —— 看上去像普通函数，行为却完全不同。

• 适合场景：map、filter、setTimeout 回调、React 事件处理器（避免手动 bind(this)）
• 不能用：new 调用（无 prototype）、没有 arguments（用 rest 参数 ...args 替代）、不能用作对象方法（{ fn: () => this } 中的 this 指向外层，不是当前对象）
• 典型坑：document.addEventListener('click', () => console.log(this)) → this 是全局对象，不是 document；想绑定 DOM 元素，得用传统函数或显式传参

模板字符串和解构赋值：让取值和拼接不再靠加号和点号

这两项不是炫技，是每天都在写的“取数据”和“塞数据”的底层优化。

• 模板字符串用反引号：`Hello ${name}, you're ${age} years old`，支持多行、嵌入表达式甚至函数调用（${getName()}）
• 解构赋值可大幅减少样板代码：const { id, title } = post 比 const id = post.id; const title = post.title 更安全（若 post 为 undefined，前者报错，后者静默赋 undefined）
• 数组解构注意跳过项：const [first, , third] = ['a','b','c'] → first='a', third='c'；别误写成 [first, second, third] 再手动忽略 second

模块化（import/export）和 Promise：组织代码与处理异步的现代基座

它们不是“可选特性”，而是现代前端工程的事实标准 —— Webpack、Vite、TypeScript 全部基于此构建。

• export 必须是声明级（不能 export foo()），默认导出用 export default，命名导出用 export const util = () => {}
• Promise 让异步流程可控：fetch(url).then(res => res.json()).catch(err => console.error(err))；但别链太长，优先用 async/await 保持线性可读
• 兼容性提醒：IE 完全不支持模块和 Promise，必须用 Babel + @babel/preset-env 转译；但 Chrome/Firefox/Edge 新版本已原生支持全部核心特性

终于介绍完啦！小伙伴们，这篇关于《ES6是什么？现代JavaScript特性全解析》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！