javascript ES6是什么_它带来了哪些重要更新?

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

ES6(也就是 ECMAScript 2015)不是新语言,而是 JavaScript 在 2015 年落地的一次实质性升级——它把过去靠库、靠技巧才能写出的简洁代码,直接变成了语言原生能力。你今天写的 const=>import,几乎都来自这次更新。

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

var 声明变量时,会被“提升”到函数顶部,且没有块级作用域,容易导致意外覆盖或 ReferenceError 难定位。

  • letconst 是块级作用域(比如 iffor 内部声明,外部就访问不到)
  • 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()thisobj;单独调用则可能是 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 温床。