ES6是JavaScript在2015年的实质性升级,引入let/const解决变量提升与作用域问题,箭头函数固化this绑定,解构赋值与模板字符串简化取值拼串,import/export与Promise支撑模块化与异步编程。

ES6(也就是 ECMAScript 2015)不是新语言,而是 JavaScript 在 2015 年落地的一次实质性升级——它把过去靠库、靠技巧才能写出的简洁代码,直接变成了语言原生能力。你今天写的 const、=>、import,几乎都来自这次更新。
let/const 替代 var:解决变量提升和作用域混乱
用 var 声明变量时,会被“提升”到函数顶部,且没有块级作用域,容易导致意外覆盖或 ReferenceError 难定位。
-
let和const是块级作用域(比如if、for内部声明,外部就访问不到) -
const不代表“值不可变”,而是“绑定不可重赋值”——对象或数组本身仍可修改属性或元素 - 循环中闭包问题被天然规避:
for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); // 输出 0, 1, 2(不是三个 3) }
箭头函数 vs 普通函数:this 绑定和语法精简
箭头函数不绑定自己的 this,而是继承外层词法作用域的 this——这对事件回调、定时器、Promise 链里特别关键。
- 普通函数:
this取决于调用方式(obj.fn()中this是obj;单独调用则可能是undefined或全局对象) - 箭头函数:
this固定为定义时所在上下文,无法用call/apply/bind改变 - 无
arguments对象,需用 rest 参数替代:(...args) => args[0] - 单参数、单表达式可省括号和花括号:
x => x * 2
解构赋值 + 模板字符串:减少 boilerplate 代码
这两项不是炫技,而是每天都在写的“取值”和“拼串”操作的降噪方案。
立即学习“Java免费学习笔记(深入)”;
- 对象解构支持默认值、重命名、嵌套解构:
const { name: fullName = 'Anonymous', age, address: { city } = {} } = user; - 模板字符串支持多行、换行保留、表达式插值:
`Hello ${name}, you're ${age} years old.` - 注意反引号 `` ` `` 不是单引号,误用会报
SyntaxError: Unexpected token - 模板字符串里的表达式可以是任意 JS 表达式,包括函数调用、三元运算,但别塞太重逻辑,可读性会下降
模块化(import/export)与 Promise:工程化和异步的基石
ES6 原生支持模块系统,不再依赖 RequireJS 或 CommonJS 手动包装;Promise 则让异步流程从“回调地狱”转向链式可控。
-
export有命名导出和默认导出两种,对应import方式不同:export const PI = 3.14; export function add(a, b) { return a + b; } export default class Calculator { ... }// 对应导入 import { PI, add } from './math.js'; import Calculator from './math.js'; // 默认导出不用大括号
-
Promise的.then()和.catch()是扁平化的,但要注意未捕获的 rejection 会静默失败(现代浏览器会抛Uncaught (in promise)警告) - 模块是静态编译时解析的,不能动态拼接路径:
import './' + name + '.js'❌,得用import()动态导入
真正容易被忽略的是:这些特性不是孤立存在的。比如 const + 解构 + 箭头函数组合起来写一个工具函数,看似简单,但一旦在循环中误用 var 或漏写 let,或者在类方法里错用箭头函数导致 this 失效,调试成本反而比 ES5 更高。用得熟,是利器;用得模糊,就是隐性 bug 温床。











