javascript es6是什么_带来了哪些新特性【教程】

ES6是JavaScript第6版标准(ECMAScript 2015),补齐语法、对象模型与异步能力;let/const提供块级作用域与赋值约束;箭头函数简化this但无自身this/arguments;解构与模板字符串提升可读性;Promise与async/await解决回调地狱。

ES6 不是新语言,而是 JavaScript 的第 6 版语言标准(正式名称是 ECMAScript 2015),它从语法、对象模型到异步处理都补上了长期缺失的关键能力。浏览器和 Node.js 现在已全面支持,直接用就行,不用编译(除非要兼容 IE)。

let / const 替代 var:作用域和赋值约束更清晰

var 的函数作用域和变量提升常导致意外交互;letconst 改为块级作用域,且不提升,更符合直觉。

  • let 声明的变量可重新赋值,但不能重复声明(同一作用域内)
  • const 声明的必须初始化,且绑定不可重赋值——注意:对象或数组本身可修改,只是引用不能变
  • 循环中用 let 声明计数器,每次迭代都会生成新绑定,避免闭包陷阱
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0); // 输出 0, 1, 2
}

箭头函数:简化 this 和写法,但有明确限制

() => {} 是函数简写,但它没有自己的 thisargumentssupernew.target,全部继承自外层作用域。

  • 适合写回调、映射逻辑等无状态操作,比如 [1,2,3].map(x => x * 2)
  • 不能用作构造函数:new (() => {}) 会抛 TypeError
  • 不能使用 arguments 对象,需改用剩余参数 ...args
  • 单参数且只有一条返回语句时可省括号和 return,如 x => x + 1

解构赋值与模板字符串:减少 boilerplate,提升可读性

从数组/对象中“抽值”和拼接字符串不再是繁琐的点取和加号连接。

  • 对象解构支持别名:const { name: fullName, age } = user;
  • 数组解构可跳过项:const [first, , third] = arr;
  • 模板字符串用反引号,支持多行和插值:`Hello ${name}, you're ${age}`
  • 注意:模板字符串中的换行会真实出现在输出里,不是语法糖里的空格
const user = { name: 'Alice', role: 'admin' };
const { name, role } = user;
console.log(`User: ${name}, Role: ${role}`); // User: Alice, Role: admin

Promises 和 async/await:让异步逻辑不

再嵌套地狱

Promise 是 ES6 内置的异步抽象,async/await 是其语法糖(ES2017 引入,但依赖 ES6 的 Promise 基础)。

  • Promise 必须用 .then().catch() 处理,链式调用天然避免回调嵌套
  • async 函数自动返回 Promise,await 只能在 async 函数内使用
  • await 后面如果不是 Promise,会自动包装成 resolved Promise
  • 错误要用 try/catch 捕获,而不是 .catch() ——两者语义不同
async function fetchUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    return await res.json();
  } catch (err) {
    console.error('Fetch failed:', err);
  }
}

真正容易被忽略的是:解构默认值、模块导入导出的静态分析特性、以及 class 本质仍是原型继承——这些细节在重构旧代码或调试时经常成为隐性坑。别只记语法,得理解它们如何改变执行模型。