ES6+ 核心特性完全指南：let/const/解构/箭头函数/模板字符串
Introduction
ES6（ECMAScript 2015）是 JavaScript 语言史上最重要的更新，引入了 let/const、箭头函数、模板字符串、解构赋值、类（Class）等大量新特性，极大地提升了代码的可读性和开发效率。此后的 ES7/ES8/ES9/ES10/ES11 持续添加强力新特性。本指南系统讲解 ES6+ 最核心的语法，帮助你掌握现代 JavaScript 的基础。
基础语法
1. let 与 const
let count = 0;
count = 1;
const PI = 3.14159;
const user = { name: '张三' };
user.name = '李四';
if (true) { let blockVar = '块级变量'; const blockConst = '块级常量'; }
for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 100); }2. 模板字符串
const name = '小明'; const age = 25;
const greeting = 你好，我叫${name}，今年${age}岁。;
const a = 10, b = 20;
console.log(${a} + ${b} = ${a + b});
const html = <div class="card"><h2>${name}</h2></div>;3. 箭头函数
const add = (a, b) => a + b;
const double = x => x * 2;
const calc = (a, b) => { const sum = a + b; return sum * 2; };
function Timer() { this.time = 0; setTimeout(() => { this.time++; }, 1000); }
const fn = (...args) => console.log(args);4. 解构赋值
const [a, b, c] = [1, 2, 3];
const [first, ...rest] = [1, 2, 3, 4];
const { name, age } = { name: '张三', age: 25, city: '北京' };
const { name: userName, age: userAge } = { name: '张三', age: 25 };
function printUser({ name, age, city = '未知' }) { console.log(${name}, ${age}岁, 来自${city}); }
printUser({ name: '李四', age: 30 });5. 展开运算符
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];
const obj1 = { a: 1, b: 2 }; const obj2 = { ...obj1, c: 3 };
const nums = [3, 1, 4, 1, 5]; console.log(Math.max(...nums));
function sum(...values) { return values.reduce((acc, val) => acc + val, 0); }完整代码示例
const users = [
{ id: 1, name: '张三', age: 25, city: '北京', tags: ['前端', 'JavaScript'] },
{ id: 2, name: '李四', age: 30, city: '上海', tags: ['后端', 'Node.js'] },
{ id: 3, name: '王五', age: 28, city: '北京', tags: ['全栈', 'Python'] },
{ id: 4, name: '赵六', age: 35, city: '深圳', tags: ['架构', 'Java'] },
];
const getUserInfo = ({ name, age, city }) => 姓名：${name}，年龄：${age}，城市：${city};
const beijingUsers = users.filter(user => user.city === '北京').map(user => ({ name: user.name, age: user.age, ...user }));
const frontendTags = ['HTML', 'CSS', 'JavaScript'];
const backendTags = ['Node.js', 'Python', 'Java'];
const allTags = [...frontendTags, ...backendTags];
const id = 'user';
const createdUser = { name: '新用户', age: 22, getInfo() { return ${this.name} (${this.age}); }, [${id}_id]: 100, [get${id.charAt(0).toUpperCase() + id.slice(1)}Info]() { return ID: ${this.user_id}; } };
const ages = [25, 30, 28, 35, 25, 30];
const uniqueAges = [...new Set(ages)].sort((a, b) => a - b);
function getStats(numbers) { const sum = numbers.reduce((a, b) => a + b, 0); const avg = sum / numbers.length; const min = Math.min(...numbers); const max = Math.max(...numbers); return { sum, avg, min, max }; }
const { sum, avg, min, max } = getStats([10, 20, 30, 40, 50]);
const original = { user: { name: '张三', score: 90 } };
const shallowCopy = { ...original };
const deepCopy = JSON.parse(JSON.stringify(original));
function createElement(tag = 'div', { className = '', content = '' } = {}) { return <${tag} class="${className}">${content}</${tag}>; }
class Animal { constructor(name, sound) { this.name = name; this.sound = sound; } speak() { return ${this.name} 发出声音：${this.sound}; } }
class Dog extends Animal { constructor(name) { super(name, '汪汪'); } speak() { return super.speak() + '汪汪汪~'; } }
const dog = new Dog('旺财'); const animal = new Animal('动物', '...');
console.log('用户信息:', getUserInfo(users[0]));
console.log('北京用户:', beijingUsers.map(u => u.name));
console.log('所有标签:', allTags);
console.log('新用户信息:', createdUser.getInfo());
console.log('去重排序:', uniqueAges);
console.log('统计:', { sum, avg, min, max });
console.log('DOM元素:', createElement('button', { className: 'btn', content: '点击' }));
console.log('动物叫:', animal.speak());
console.log('狗叫:', dog.speak());
常见问题
- let/const/var 有什么区别？ var 是函数作用域，存在变量提升（undefined）；let 和 const 是块级作用域，暂时性死区（TDZ）更安全。
- 箭头函数什么时候不能用？ 不能用作构造函数（不能 new），不能用作 Generator 函数。
- 模板字符串中 ${} 可以写什么？ 可以写任意 JavaScript 表达式，包括函数调用、三元运算、算术计算。
- 对象展开和 Object.assign 效果一样吗？ 结果一样，但对象展开更简洁，且可以轻松实现部分属性覆盖。