🌟 ECMAScript 6.0 趣味学习手册 🌟🌟 ECMAScript 6.0 趣味学习手册 🌟 📌 为什

🌟 ECMAScript 6.0 趣味学习手册 🌟

📌 为什么学习 ES6？

ES6 是 JavaScript 的“超进化版”！它让代码更简洁、更强大，还能写出更优雅的程序。比如，用箭头函数代替复杂的 function，用解构赋值拆快递一样取出数据，用 Promise 告别“回调地狱”……学完 ES6，你就是代码界的魔法师！✨

🧙 基础篇：变量与作用域

1. `let` 和 `const`：告别“变量乱飞”

var 的痛点：变量会“飞”到全局（没有块级作用域），比如：
```
if (true) { var a = 10; }
console.log(a); // 10（本应是错误！）
```

let 和 const 的魔法：

if (true) { 
  let b = 20; 
  const PI = 3.14; 
}
console.log(b); // 报错！b 被关在块级作用域里
PI = 3.1415;    // 报错！const 是常量，不可修改

类比：var 是“淘气的气球”，会飘到空中；let 和 const 是“关在房间里的宠物”，只在块内活动。

2. 解构赋值：拆快递的快乐

数组解构：像拆快递盒一样取出值。

const [苹果, 香蕉, 西瓜] = ["🍎", "🍌", "🍉"];
console.log(苹果); // 🍎

对象解构：按名字拿快递。

const { name, age } = { name: "小明", age: 18 };
console.log(name); // 小明

实战场景：交换变量值只需一行！

let a = 100, b = 200;
[a, b] = [b, a]; // a=200, b=100

🎨 字符串与模板字符串

1. 模板字符串：拼接字符串的终极奥义

传统写法："今天妈妈给了我" + num + "元"（又长又丑）。

模板字符串：用反引号 ` 和 ${} 插入变量。

const num = 100;
console.log(`今天爸爸给了我${num}元💰`); 
// 输出：今天爸爸给了我100元💰

支持多行和运算：

const str = `
  你好，${name}！
  你今年 ${age + 1} 岁了！
`;

🎯 数组与对象的扩展

1. 数组的“超能力”方法

forEach：遍历数组。

["🍎", "🍌", "🍉"].forEach((水果, 下标) => {
  console.log(`第${下标}个水果是${水果}`);
});

map：映射新数组（加工厂）。

const 价格翻倍 = [10, 20, 30].map(钱 => 钱 * 2); // [20, 40, 60]

filter：过滤数据（筛子）。

const 偶数 = [1, 2, 3, 4].filter(数字 => 数字 % 2 === 0); // [2, 4]

2. 对象的简写与动态键

简写：属性名和变量名相同时，直接写变量。

const name = "小明";
const obj = { name, age: 18 }; // { name: "小明", age: 18 }

动态键：用 [] 包裹变量作为键。

const 动态键 = "身高";
const 小明 = { [动态键]: 180 }; // { 身高: 180 }

⚡ 函数进阶：箭头函数与默认参数

1. 箭头函数：简洁到飞起

传统函数：
```
function sum(a, b) { return a + b; }
```
箭头函数：
```
const sum = (a, b) => a + b;
```

上下文绑定：箭头函数的 this 是定义时的上下文，不会变！

const obj = {
  name: "小明",
  sayHi: () => console.log(this.name) // this 指向 window！
};

2. 默认参数：再也不怕漏传参数

function 点餐(菜品 = "🍔", 饮料 = "🥤") {
  console.log(`您点了${菜品}和${饮料}`);
}
点餐(); // 您点了🍔和🥤

🚀 异步编程：Promise 与 async/await

1. Promise：告别“回调地狱”

回调地狱：多层嵌套，难以维护。

readFile("A.txt", () => {
  readFile("B.txt", () => {
    readFile("C.txt", () => { /* ... */ });
  });
});

Promise 链式调用：

readFile("A.txt")
  .then(内容A => readFile("B.txt"))
  .then(内容B => readFile("C.txt"))
  .catch(错误 => console.log("出错啦！"));

2. async/await：异步代码同步写

终极优雅方案：

async function 读取文件() {
  const 内容A = await readFile("A.txt");
  const 内容B = await readFile("B.txt");
  console.log(内容A, 内容B);
}

🧩 高级特性：Set、Map、Symbol

1. Set：自动去重的数组

const 水果篮 = new Set(["🍎", "🍌", "🍎"]);
console.log(水果篮); // Set { "🍎", "🍌" }

2. Map：键可以是任意类型

const 地图 = new Map();
地图.set({ name: "小明" }, "成绩单");
console.log(地图.get({ name: "小明" })); // undefined（需用同一对象引用）

3. Symbol：独一无二的标识

const 秘钥 = Symbol("保险箱密码");
const 小明 = { [秘钥]: "123456" };
console.log(小明[秘钥]); // 123456（只有用秘钥才能打开）

🎮 动手练习：巩固知识

用解构赋值交换两个变量：let a = 10, b = 20; → 交换后 a=20, b=10。
用 filter 过滤数组中的偶数：[1, 2, 3, 4] → [2, 4]。
用 async/await 模拟读取三个文件：依次输出“文件A”、“文件B”、“文件C”。

🌈 总结

ES6 是 JavaScript 的“现代武器库”，掌握它能让代码更高效、更优雅！从变量作用域到异步编程，从数据结构到高级语法，每一步都充满乐趣。现在，打开编辑器，动手写代码吧！🚀

记住：代码不是魔法，但学完 ES6，你会成为魔法师！ 🧙✨

附：学习资源

🌟 ECMAScript 6.0 趣味学习手册 🌟