各位代码美食家们，欢迎来到JavaScript的甜品屋！ES6+带来的新特性就像各种美味的语法糖，让你的代码更甜、更优雅、更美味。准备好大快朵颐了吗？

12.1 let与const - 变量声明的"精确导弹"

告别var的混乱时代，迎来块级作用域的新纪元：

// let - 可变的块级变量
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 0, 1, 2
}
// console.log(i); // 报错，i只在for块内有效

// const - 不可变的常量
const PI = 3.14159;
// PI = 3.14; // 报错！

// 注意：const只保证引用不变，对象属性可以改
const person = {name: "John"};
person.name = "Mike"; // 允许
// person = {}; // 报错

经典面试题解析：

function test() {
  console.log(a); // undefined (var变量提升)
  console.log(b); // 报错 (暂时性死区)
  
  var a = 1;
  let b = 2;
}

12.2 模板字符串 - 字符串的"瑞士军刀"

用反引号`解锁字符串的超能力：

let name = "张三";
let age = 25;

// 传统方式
let str1 = "我叫" + name + "，今年" + age + "岁";

// 模板字符串
let str2 = `我叫${name}，今年${age}岁`;

// 高级用法
function tag(strings, ...values) {
  console.log(strings); // ["", " + ", " = ", ""]
  console.log(values);  // [3, 5, 8]
  return "处理后的字符串";
}

let result = tag`${3} + ${5} = ${8}`;

实战应用 - HTML模板生成：

function createUserCard(user) {
  return `
    <div class="card">
      <img src="${user.avatar}" />
      <h3>${user.name}</h3>
      <p>${user.bio || '暂无简介'}</p>
      <button onclick="follow(${user.id})">关注</button>
    </div>
  `;
}

12.3 解构赋值 - 数据拆箱的"快捷方式"

像拆快递一样轻松提取数据：

// 数组解构
let [a, b, c] = [1, 2, 3];
console.log(a); // 1

// 跳过元素
let [first, , third] = ["苹果", "香蕉", "橙子"];

// 对象解构
let {name, age} = {name: "李四", age: 30};
console.log(name); // "李四"

// 重命名
let {name: userName} = {name: "王五"};

// 默认值
let {theme = "light"} = {};

函数参数解构：

function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 10}) {
  console.log(size, coords, radius);
}

drawChart({
  coords: {x: 18, y: 30},
  radius: 5
});

12.4 扩展运算符 - 数据的"复印机"

三个点...的魔法：

// 数组展开
let arr1 = [1, 2];
let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// 对象展开
let obj1 = {a: 1, b: 2};
let obj2 = {...obj1, c: 3}; // {a: 1, b: 2, c: 3}

// 函数参数展开
function sum(a, b, c) {
  return a + b + c;
}
let nums = [1, 2, 3];
console.log(sum(...nums)); // 6

实用技巧 - 数组去重：

let dupArr = [1, 2, 2, 3, 4, 4];
let uniqueArr = [...new Set(dupArr)]; // [1, 2, 3, 4]

12.5 模块化 - 代码的"乐高积木"

告别全局变量污染，拥抱模块化开发：

// math.js
export const PI = 3.14159;

export function sum(a, b) {
  return a + b;
}

export default class Calculator {
  // ...
}

// app.js
import { PI, sum } from './math.js';
import Calc from './math.js'; // 导入默认导出

console.log(PI);
console.log(sum(1, 2));
let calc = new Calc();

动态导入（按需加载）：

button.addEventListener('click', async () => {
  const module = await import('./dialog.js');
  module.openDialog();
});

本章总结：

1. let/const 提供块级作用域
2. 模板字符串简化字符串拼接
3. 解构赋值方便数据提取
4. 扩展运算符简化数据操作
5. 模块化组织代码结构

实战练习：

1. 使用解构交换两个变量的值
2. 用模板字符串实现一个简单的HTML模板引擎
3. 将以下代码改写为使用ES6模块的形式：

// 全局命名空间污染的例子
var Utils = {
  max: function(arr) { /*...*/ },
  min: function(arr) { /*...*/ }
};

甜品时间：

// 使用新特性重构旧代码
const formatUser = ({name: username, age, location = '未知'}) => 
  `用户：${username}，年龄：${age}，来自：${location}`;

const users = [
  {name: '张三', age: 25},
  {name: '李四', age: 30, location: '北京'}
];

const userCards = users.map(user => `
  <div class="card">
    ${formatUser(user)}
  </div>
`).join('');

document.body.innerHTML = userCards;

下一站我们将进入实战项目章节，把这些甜蜜的语法糖变成真正的美味应用！准备好大展身手了吗？