17370845950

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 温床。