ES6核心语法解析：从变量声明到模块化编程

1. ES6语法革命：从变量声明到模块化编程

十年前我刚接触JavaScript时，var关键字满天飞，回调地狱让人崩溃，模块化要靠立即执行函数(IIFE)硬凑。直到ES6(ECMAScript 2015)的出现，才让这门语言真正具备了现代编程语言的形态。今天我们就来深入剖析那些改变我们日常编码方式的ES6核心语法。

提示：本文示例代码需要现代浏览器环境或Node.js 12+运行环境，老项目中使用需要Babel等转译工具

1.1 变量声明的新范式

过去我们用var声明变量时，经常会遇到变量提升(hoisting)和作用域混淆的问题：

javascript复制console.log(age); // 输出undefined而不是报错
var age = 25;

for(var i=0; i<3; i++){
    setTimeout(()=>console.log(i), 100); // 输出3个3
}

ES6引入的let/const彻底改变了这种局面：

javascript复制console.log(name); // 报错：ReferenceError
let name = '张三';

for(let j=0; j<3; j++){
    setTimeout(()=>console.log(j), 100); // 输出0,1,2
}

const PI = 3.14;
PI = 3.1415; // 报错：Assignment to constant variable

实际项目中我的经验是：

• 默认使用const，除非确定需要重新赋值
• 循环变量和需要重新绑定的标识符用let
• 完全避免使用var，除非维护老代码

2. 箭头函数与this绑定

传统函数表达式中的this指向问题困扰了无数JS开发者：

javascript复制function Timer() {
    this.seconds = 0;
    setInterval(function() {
        this.seconds++; // 这里的this指向window
        console.log(this.seconds); // 输出NaN
    }, 1000);
}

ES6箭头函数不仅语法简洁，更重要的是它不绑定自己的this：

javascript复制function Timer() {
    this.seconds = 0;
    setInterval(() => {
        this.seconds++; // 正确捕获外部this
        console.log(this.seconds); // 正常计数
    }, 1000);
}

实际使用中的注意事项：

• 箭头函数没有arguments对象，可用剩余参数(...args)替代
• 不能用作构造函数，使用new调用会报错
• 对象方法慎用箭头函数，会丢失动态this特性

3. 模板字符串与标签函数

拼接字符串曾是JS中最繁琐的操作之一：

javascript复制const user = {name: '李四', age: 30};
const intro = '我叫'+user.name+'，今年'+user.age+'岁';

模板字符串让字符串拼接变得优雅：

javascript复制const intro = `我叫${user.name}，今年${user.age}岁`;

更强大的是标签函数功能：

javascript复制function highlight(strings, ...values) {
    return strings.reduce((result, str, i) => 
        `${result}${str}<mark>${values[i]||''}</mark>`, '');
}

const message = highlight`欢迎${user.name}访问，您的会员级别是${'VIP'}`;
// 输出：欢迎<mark>李四</mark>访问，您的会员级别是<mark>VIP</mark>

我在项目中的典型应用场景：

• 多行HTML模板生成
• 国际化字符串处理
• SQL查询语句构建

4. 解构赋值的艺术

从复杂结构中提取数据变得异常简单：

javascript复制// 对象解构
const {name, age, address: {city}} = user;
console.log(`${name}居住在${city}`);

// 数组解构
const [first, , third] = ['a', 'b', 'c'];

// 函数参数解构
function draw({x=0, y=0, radius=10} = {}) {
    console.log(`在(${x},${y})画半径${radius}的圆`);
}

实际开发中的技巧：

• 配合默认值处理可选参数
• 交换变量值：[a, b] = [b, a]
• 解析函数返回的多个值
• 嵌套解构时注意异常处理

5. 集合类型的进化

ES6新增了Set和Map这两种重要的数据结构：

javascript复制// Set去重
const ids = [1,2,3,2,1];
const uniqueIds = [...new Set(ids)];

// Map替代对象作为键值对
const userMap = new Map();
userMap.set(user1, '管理员');
userMap.set(user2, '普通用户');

// WeakMap避免内存泄漏
const privateData = new WeakMap();
class Person {
    constructor(name) {
        privateData.set(this, {name});
    }
    getName() {
        return privateData.get(this).name;
    }
}

性能优化建议：

• 频繁增删的场景用Map而非普通对象
• 需要遍历时优先使用Set/Map而非数组
• 缓存场景考虑WeakMap避免内存泄漏

6. 异步编程的救赎：Promise

回调地狱(callback hell)曾是JS开发的噩梦：

javascript复制getUser(id, function(user) {
    getOrders(user, function(orders) {
        getItems(orders[0], function(items) {
            // 更多嵌套...
        });
    });
});

Promise让异步流程变得线性：

javascript复制getUser(id)
    .then(user => getOrders(user))
    .then(orders => getItems(orders[0]))
    .then(items => {
        // 处理结果
    })
    .catch(error => {
        // 统一错误处理
    });

项目实践要点：

• 总是返回新的Promise链
• 错误处理要全面
• Promise.all处理并行异步
• 避免在then中嵌套Promise

7. 类与继承的语法糖

虽然JS本质是基于原型的语言，但class语法更符合传统OOP开发者的习惯：

javascript复制class Animal {
    constructor(name) {
        this.name = name;
    }
    
    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
    
    speak() {
        console.log(`${this.name} barks.`);
    }
    
    static describe() {
        console.log('这是Dog类');
    }
}

需要注意的细节：

• 类声明不会提升(hoist)
• 类方法是不可枚举的
• 构造函数必须调用super()才能使用this
• 可以extends内置类型如Array

8. 模块化的新时代

ES6模块解决了多年来JS缺乏官方模块系统的问题：

javascript复制// math.js
export function add(x, y) {
    return x + y;
}

export const PI = 3.14159;

// app.js
import {add, PI} from './math.js';
import * as math from './math.js';

console.log(add(2,3)); // 5
console.log(math.PI); // 3.14159

实际项目配置要点：

• 浏览器中使用需要