ES6（ECMAScript 2015）功能介绍，运用场景，对应机制点完整采用示例

以下是 ECMAScript 2015 (ES6) 的核心功能详解、典型使用场景及完整示例代码：

---

一、核心新特性概览与场景分析

功能特性	核心价值	典型应用场景
let/const	块级作用域 + 禁止重复声明	✅ 循环变量控制 ✅ 防止意外全局污染
箭头函数	简练语法 + 自动绑定this	✅ 事件回调 ✅ 高阶函数 ✅ 定时器回调
模板字符串	ES原始支持多行文本 + ${}插值	✅ HTML片段拼接 ✅ 日志格式化 ✅ SQL语句
解构赋值	快速提取数组/对象元素	✅ API响应解析 ✅ 函数多返回值接收 ✅ 配置项分离
默认/剩余/扩展参数	灵活的函数参数处理	✅ 可选参数设置 ✅ 不定数量参数收集 ✅ 对象合并
类语法	更清晰的OOP语法（基于原型继承）	✅ 业务实体建模 ✅ 组件化开发 ✅ 继承体系
模块化	原生代码分割机制（import/export）	✅ 大型项目架构 ✅ 公共库封装 ✅ 按需加载
Promise	异步编程解决方案（取代回调金字塔）	✅ AJAX请求 ✅ 文件读写 ✅ 异步流程控制
生成器 & async/await	协程式异步控制流（同步写法处理异步）	✅ 顺序执行异步任务 ✅ 流数据处理 ✅ 中间件管道
Map/Set/WeakMap/WeakSet	高性能键值集合/唯一性集合	✅ 去重数据存储 ✅ 关联关系映射 ✅ 缓存系统
Symbol	唯一标识符（解决属性名冲突）	✅ 私有属性定义 ✅ 元数据注解 ✅ 反射API

---

二、逐项深度解析与完整示例

1️⃣ let / const → 块级作用域革命

// 传统var的问题：变量提升+函数作用域
for(var i=0; i<3; i++) {} console.log(i); // => 3 (泄露至全局)
  // ES6解决方案
  for(let j=0; j<3; j++) {} console.log(j); // => Uncaught ReferenceError
    const PI = 3.14; PI = 3; // => TypeError: Assignment to constant variable.
    // ✔️ 适用场景：循环计数器、常量定义、闭包安全

2️⃣ 箭头函数 → this困境终结者

// 传统绑定痛点
const btn = document.getElementById('btn');
btn.addEventListener('click', function() {
console.log('Clicked:', this); // this指向按钮元素
}).bind({}); // 强制改变this导致bug风险
// ES6箭头函数自动捕获词法作用域this
const user = { name: 'Alice' };
const greet = () => console.log(`Hello ${this.name}`);
greet.call(user); // Hello Alice (this来自外部作用域)
// ✔️ 最佳实践：配合数组方法
[1,2,3].forEach(num => console.log(num * 2)); // [2,4,6]

3️⃣ 模板字符串 → 字符串处理进化论

// 传统拼接痛点
function wrapLog(msg) { return '[' + new Date().toISOString() + '] ' + msg; }
wrapLog('System started');
// => "[2025-04-05T08:00:00Z] System started"
// ES6模板字符串
`[${new Date().toISOString()}] ${'System started'}`;
// ✔️ 高级用法：多行字符串+嵌入表达式
const html = `
<div class="card">
<h2>${title}</h2>
<p>${summary.substring(0, 100)}...</p>
</div>`;

4️⃣ 解构赋值 → 数据提取加速器

// 传统方式笨拙
const data = { id: 1, name: 'Bob', age: 30 };
let id = data.id;
let name = data.name;
let age = data.age;
// ES6一步到位
const { id, name, age } = data; // 对象解构
const [first, ...rest] = [1,2,3,4]; // 数组解构+剩余项
// ✔️ 实战应用：交换变量
[a, b] = [b, a]; // Swap without temp variable
// ✔️ 嵌套解构
const config = { db: { host: 'localhost', port: 5432 }, cache: true };
const { db: { host, port }, cache } = config; // host='localhost', port=5432

5️⃣ 类语法 → 现代OOP范式

// 传统构造函数模式缺陷
function Person(name) { this.name = name; }
Person.prototype.sayHi = function() { console.log(`Hi ${this.name}`); };
// ES6 Class语法糖（本质仍是原型继承）
class Person {
constructor(name) { this.name = name; }
sayHi() { console.log(`Hi ${this.name}`); }
// 静态方法
static createAdmin() { return new Person('Admin'); }
}
// ✔️ 继承实现
class Employee extends Person {
constructor(name, salary) { super(name); this.salary = salary; }
showDetails() { console.log(`${this.name} earns ${this.salary}`); }
}
const emp = new Employee('Charlie', 80000);
emp.sayHi(); // Hi Charlie
emp.showDetails(); // Charlie earns 80000

6️⃣ 模块化 → 前端工程化基石

// mathUtils.js
export const add = (a,b) => a+b;          // 命名导出
export default { subtract: (a,b)=>a-b }; // 默认导出
// app.js
import { add } from './mathUtils.js';      // 仅导入需要的
import myMath from './mathUtils.js';      // 导入默认导出
console.log(add(1,2)); // 3
console.log(myMath.subtract(5,3)); // 2
// ✔️ Node环境注意：需添加"type": "module"到package.json

7️⃣ Promise → 异步编程救星

// 传统回调地狱
setTimeout(() => {
fetchData((data) => {
processData(data, (result) => {
saveResult(result, () => console.log('Done!'));
});
});
}, 1000);
// ES6 Promise链式调用
fetchData()
.then(data => processData(data))
.then(result => saveResult(result))
.then(() => console.log('Clean flow!'))
.catch(err => console.error('Error:', err));
// ✔️ 实际API调用示例
fetch('/api/users')
.then(response => response.json())
.then(users => {
users.forEach(user => console.table(user));
})
.catch(error => console.error('Fetch failed:', error));

8️⃣ async/await → 同步风格写异步

// 传统Promise虽好但不够直观
async function loadUserData() {
try {
const response = await fetch('/api/user'); // 等待请求完成
const user = await response.json();      // 等待JSON解析
return user;
} catch (error) {
throw new Error('User load failed: ' + error.message);
}
}
// ✔️ 使用示例
loadUserData()
.then(user => console.log('Loaded:', user))
.catch(err => console.error(err));
// ✔️ 序列化操作
async function processOrder() {
const product = await getProduct('P123');
const payment = await processPayment(product.price);
const receipt = await generateReceipt(payment);
return receipt;
}

9️⃣ Map/Set → 高效数据结构

// Set去重特性
const colors = new Set(['red', 'green', 'blue', 'red']);
console.log(colors.size); // 3
colors.add('purple');
colors.delete('green');
console.log([...colors]); // ['red', 'blue', 'purple']
// Map键值对
const scoreBoard = new Map();
scoreBoard.set('player1', 150);
scoreBoard.set('player2', 200);
console.log(scoreBoard.get('player1')); // 150
scoreBoard.forEach((score, player) => console.log(`${player}: ${score}`));

10️⃣ Symbol → 唯一标识符

// 解决属性名冲突
const SYMBOL_KEY = Symbol('secret');
const obj = { [SYMBOL_KEY]: 'hidden value', normalProp: 'visible' };
console.log(obj[SYMBOL_KEY]); // hidden value
console.log(Object.keys(obj)); // ['normalProp'] - 不会暴露Symbol属性
// ✔️ 实际应用：私有属性模拟
class Car {
#engineStatus = Symbol('engineStatus'); // 私有字段
start() { this[#engineStatus] = 'running'; }
}

---

三、综合应用案例：待办事项管理器

// todoApp.js
class TodoItem {
constructor(task) {
this.task = task;
this.completed = false;
}
toggleComplete() { this.completed = !this.completed; }
}
class TodoList {
#items = new Map(); // 使用Map存储，保证唯一性
add(item) {
if (!(item instanceof TodoItem)) throw new Error('Invalid item');
this.#items.set(item.task, item);
}
remove(task) { this.#items.delete(task); }
list() { return Array.from(this.#items.values()); }
}
// 使用示例
const myList = new TodoList();
myList.add(new TodoItem('Buy milk'));
myList.add(new TodoItem('Write report'));
// 输出待办事项
console.log(myList.list().map(item => `${item.completed ? '✓' : '○'} ${item.task}`));
// => [ '○ Buy milk', '○ Write report' ]
// 切换完成状态
const firstItem = myList.list()[0];
firstItem.toggleComplete();
console.log(firstItem); // TodoItem { task: 'Buy milk', completed: true }

---

四、生产环境注意事项

要点	建议方案
浏览器兼容	Babel转译 + Core-JS polyfill
模块打包	Webpack/Rollup + Tree Shaking优化死代码
类型检查	TypeScript/Flow增强代码健壮性
性能优化	合理使用WeakMap/WeakSet避免内存泄漏
异步错误处理	始终给Promise链添加.catch()，async函数用try/catch包裹

ES6通过引入现代化编程范式，显著提升了JavaScript的开发效率和代码可维护性，已成为当代前端开发的标配语言特性。