ES6 新特性完全指南：JavaScript 的现代进化
2015 年，ECMAScript 6（简称 ES6）的发布是 JavaScript 历史上最重要的一次更新。它引入了大量语法糖和强大的编程范式，让 JS 从“玩具语言”真正蜕变为适合开发大型企业级应用的语言。无论是 React、Vue 还是 Node.js，现代前端开发几乎都建立在 ES6 及其后续版本的基础之上。本文将系统梳理 ES6 的核心特性，每个特性都配有清晰的解释和代码示例，帮助你快速掌握现代 JavaScript。
注： ES6 之后每年都有增量更新（ES7、ES8...），但 ES6 是基础中的基础。掌握本文内容，你就能流畅阅读绝大部分现代 JS 项目代码。
一、let 和 const：块级作用域的变量声明
1.1 问题：var 的弊端
var存在变量提升，可以在声明前使用（值为undefined）var没有块级作用域，只有函数作用域和全局作用域
// var 提升导致怪异行为 console.log(a); // undefined，而不是报错 var a = 1; // var 没有块级作用域 if (true) { var x = 10; } console.log(x); // 10，变量泄露到外部1.2 let 和 const 的特点
- 块级作用域：
{}内声明的变量只在块内有效 - 不存在变量提升：必须先声明后使用（暂时性死区）
- 不能重复声明：同一作用域内不能重复声明同名变量
const声明常量，必须立即初始化，且不能重新赋值（但对象的属性可以修改）
javascript
// let 示例 if (true) { let y = 20; console.log(y); // 20 } console.log(y); // ReferenceError: y is not defined // const 示例 const PI = 3.14; PI = 3.1415; // TypeError: Assignment to constant variable const person = { name: '张三' }; person.name = '李四'; // ✅ 可以修改属性 person = {}; // ❌ 不能重新赋值最佳实践：默认使用const，只有明确需要重新赋值的变量才用let。尽量避免使用var。
二、箭头函数：更简洁的函数写法
2.1 语法简化
javascript
// 传统函数 function add(a, b) { return a + b; } // 箭头函数 const add = (a, b) => a + b; // 只有一个参数可省略括号 const double = n => n * 2; // 无参数需要写括号 const now = () => Date.now(); // 函数体多行时需加 {} 和 return const process = (x, y) => { const sum = x + y; return sum * 2; };2.2 不绑定自己的 this
箭头函数没有自己的this，它继承外层作用域的this。这解决了传统函数中this指向变化的问题。
javascript
// 传统函数的问题 const obj = { name: '对象', greet: function() { setTimeout(function() { console.log('Hello ' + this.name); // this 指向 window（或 undefined 严格模式） }, 100); } }; // 箭头函数解决方案 const obj2 = { name: '对象', greet: function() { setTimeout(() => { console.log('Hello ' + this.name); // this 继承自 greet 方法的 this，即 obj2 }, 100); } };注意：箭头函数不能用作构造函数（不能new），也没有arguments对象。
三、模板字符串：字符串拼接的革命
3.1 基础用法
使用反引号`包裹字符串，变量用${}嵌入。
javascript
const name = '小明'; const age = 18; // ES5 繁琐拼接 const msg = '我叫' + name + '，今年' + age + '岁。'; // ES6 模板字符串 const msg = `我叫${name}，今年${age}岁。`;3.2 多行字符串
javascript
// ES5 需要加换行符 const html = '<div>\n' + ' <p>内容</p>\n' + '</div>'; // ES6 直接写换行 const html = ` <div> <p>内容</p> </div>`;