ES6 新特性全面详解

ES6（ECMAScript 2015）是 JavaScript 语言的一次重大更新，引入了许多新特性，使得 JavaScript 更加现代化、强大和易用。本文将全面、详细地介绍 ES6 的新特性，并通过代码示例讲解其用法。

---

1. 块级作用域与 let 和 const

1.1 let 和 const 的作用

• let 和 const 是 ES6 引入的新的变量声明方式，用于替代 var。
• let 声明的变量是块级作用域，只在当前代码块内有效。
• const 用于声明常量，一旦赋值不可更改。

1.2 代码示例

{
  let a = 10;
  const b = 20;
  console.log(a); // 10
  console.log(b); // 20
}
console.log(a); // ReferenceError: a is not defined
console.log(b); // ReferenceError: b is not defined

1.3 特点

• 避免了 var 的变量提升问题。
• const 声明的常量必须初始化，且不能重新赋值。

---

2. 箭头函数（Arrow Functions）

2.1 箭头函数的语法

箭头函数是 ES6 引入的一种简洁的函数写法，使用 => 定义。

2.2 代码示例

// 传统函数
function add(a, b) {
  return a + b;
}

// 箭头函数
const add = (a, b) => a + b;

// 无参数
const greet = () => console.log("Hello!");

// 单个参数
const square = x => x * x;

2.3 特点

• 箭头函数没有自己的 this，它的 this 继承自外层作用域。
• 不能用作构造函数，不能使用 new 调用。
• 没有 arguments 对象。

---

3. 模板字符串（Template Literals）

3.1 模板字符串的语法

模板字符串使用反引号（`）包裹，支持多行字符串和嵌入表达式。

3.2 代码示例

const name = "Alice";
const age = 25;

// 传统字符串拼接
console.log("My name is " + name + " and I am " + age + " years old.");

// 模板字符串
console.log(`My name is ${name} and I am ${age} years old.`);

// 多行字符串
const message = `
  Hello,
  This is a multi-line string.
`;

3.3 特点

• 支持嵌入变量和表达式。
• 支持多行字符串，无需使用 \n。

---

4. 解构赋值（Destructuring Assignment）

4.1 解构赋值的语法

解构赋值允许从数组或对象中提取值并赋值给变量。

4.2 代码示例

// 数组解构
const [x, y, z] = [1, 2, 3];
console.log(x); // 1
console.log(y); // 2

// 对象解构
const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name); // Alice
console.log(age); // 25

// 默认值
const { name = "Unknown", gender = "Female" } = { name: "Bob" };
console.log(name); // Bob
console.log(gender); // Female

4.3 特点

• 简化了从数组或对象中提取数据的代码。
• 支持默认值。

---

5. 默认参数（Default Parameters）

5.1 默认参数的语法

ES6 允许为函数参数设置默认值。

5.2 代码示例

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet(); // Hello, Guest!
greet("Alice"); // Hello, Alice!

5.3 特点

• 简化了函数参数的处理逻辑。
• 默认值可以是表达式。

---

6. 扩展运算符（Spread Operator）

6.1 扩展运算符的语法

扩展运算符（...）用于展开数组或对象。

6.2 代码示例

// 数组展开
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

// 对象展开
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

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

6.3 特点

• 简化了数组和对象的合并操作。
• 可以用于函数参数传递。

---

7. 剩余参数（Rest Parameters）

7.1 剩余参数的语法

剩余参数（...）用于将多余的参数收集到一个数组中。

7.2 代码示例

function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(1, 2, 3, 4, 5)); // 15

7.3 特点

• 替代了 arguments 对象。
• 只能作为最后一个参数使用。

---

8. 类（Class）

8.1 类的语法

ES6 引入了 class 关键字，用于定义类。

8.2 代码示例

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const alice = new Person("Alice", 25);
alice.greet(); // Hello, my name is Alice

8.3 特点

• 提供了更接近传统面向对象语言的语法。
• 支持继承（extends）和方法重写。

---

9. 模块化（Modules）

9.1 模块化的语法

ES6 引入了 import 和 export 关键字，支持模块化开发。

9.2 代码示例

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';
console.log(add(1, 2)); // 3
console.log(subtract(5, 3)); // 2

9.3 特点

• 支持静态加载，提升性能。
• 提供了更好的代码组织和复用能力。

---

10. Promise

10.1 Promise 的语法

Promise 用于处理异步操作，避免了回调地狱。

10.2 代码示例

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Data fetched!");
    }, 1000);
  });
};

fetchData()
  .then(data => console.log(data)) // Data fetched!
  .catch(error => console.error(error));

10.3 特点

• 提供了更清晰的异步编程模型。
• 支持链式调用（then 和 catch）。

---

11. Symbol

11.1 Symbol 的语法

Symbol 是一种新的原始数据类型，用于创建唯一的标识符。

11.2 代码示例

const id = Symbol("id");
const user = {
  [id]: 123,
  name: "Alice"
};

console.log(user[id]); // 123

11.3 特点

• 每个 Symbol 都是唯一的，即使描述相同。
• 常用于对象属性的键，避免命名冲突。

---

12. 迭代器与生成器（Iterators and Generators）

12.1 迭代器与生成器的语法

• 迭代器是一个对象，实现了 next() 方法。
• 生成器是一个函数，使用 function* 定义。

12.2 代码示例

// 迭代器
const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
console.log(iterator.next()); // { value: 1, done: false }

// 生成器
function* generateNumbers() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generateNumbers();
console.log(gen.next()); // { value: 1, done: false }

12.3 特点

• 提供了更灵活的迭代控制。
• 生成器可以暂停和恢复执行。

---

13. Map 和 Set

13.1 Map 和 Set 的语法

• Map 是键值对的集合，键可以是任意类型。
• Set 是值的集合，值唯一。

13.2 代码示例

// Map
const map = new Map();
map.set("name", "Alice");
map.set("age", 25);
console.log(map.get("name")); // Alice

// Set
const set = new Set([1, 2, 3, 3]);
console.log(set); // Set { 1, 2, 3 }

13.3 特点

• Map 和 Set 提供了更高效的数据存储和检索。

---

14. Proxy 和 Reflect

14.1 Proxy 和 Reflect 的语法

• Proxy 用于拦截对象操作。
• Reflect 提供了操作对象的方法。

14.2 代码示例

const target = { name: "Alice" };
const handler = {
  get(obj, prop) {
    return prop in obj ? obj[prop] : "Unknown";
  }
};

const proxy = new Proxy(target, handler);
console.log(proxy.name); // Alice
console.log(proxy.age); // Unknown

14.3 特点

• 提供了更强大的元编程能力。

---

总结

ES6 引入了许多新特性，极大地提升了 JavaScript 的表达能力和开发效率。本文详细介绍了这些特性及其用法，希望对你理解和掌握 ES6 有所帮助。

---

参考文献：

• MDN Web Docs - ES6
• ECMAScript 6 入门