ECMAScript 6新特性有哪些

# ECMAScript 6新特性有哪些

## 目錄
1. [引言](#引言)
2. [塊級作用域與變量聲明](#塊級作用域與變量聲明)
   - [let與const](#let與const)
   - [暫時性死區](#暫時性死區)
3. [箭頭函數](#箭頭函數)
   - [語法簡化](#語法簡化)
   - [this綁定機制](#this綁定機制)
4. [模板字符串](#模板字符串)
   - [多行字符串](#多行字符串)
   - [表達式插值](#表達式插值)
5. [解構賦值](#解構賦值)
   - [數組解構](#數組解構)
   - [對象解構](#對象解構)
6. [函數參數擴展](#函數參數擴展)
   - [默認參數](#默認參數)
   - [剩余參數](#剩余參數)
7. [擴展運算符](#擴展運算符)
   - [數組展開](#數組展開)
   - [對象展開](#對象展開)
8. [Promise異步編程](#promise異步編程)
   - [基本用法](#基本用法)
   - [鏈式調用](#鏈式調用)
9. [模塊化系統](#模塊化系統)
   - [export與import](#export與import)
   - [動態導入](#動態導入)
10. [類與繼承](#類與繼承)
    - [class語法](#class語法)
    - [extends繼承](#extends繼承)
11. [Symbol類型](#symbol類型)
    - [唯一性特性](#唯一性特性)
    - [內置Symbol](#內置symbol)
12. [集合類型](#集合類型)
    - [Set與WeakSet](#set與weakset)
    - [Map與WeakMap](#map與weakmap)
13. [迭代器與生成器](#迭代器與生成器)
    - [for...of循環](#forof循環)
    - [Generator函數](#generator函數)
14. [Proxy與Reflect](#proxy與reflect)
    - [元編程能力](#元編程能力)
    - [攔截操作](#攔截操作)
15. [結語](#結語)

---

## 引言
ECMAScript 6（ES6/ES2015）是JavaScript語言的重大更新，引入了大量現代化編程特性。本文系統性地介紹20+核心新特性及其應用場景，幫助開發者全面掌握ES6的核心能力。

---

## 塊級作用域與變量聲明
### let與const
```javascript
// 塊級作用域示例
{
  let x = 10;
  const PI = 3.14;
}
console.log(x); // ReferenceError

特性對比表：

暫時性死區

console.log(a); // undefined
var a = 1;

console.log(b); // ReferenceError
let b = 2;

箭頭函數

語法簡化

// 傳統函數
[1,2,3].map(function(x) {
  return x * x;
});

// 箭頭函數
[1,2,3].map(x => x * x);

this綁定機制

function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++; // 正確綁定this
  }, 1000);
}

模板字符串

多行字符串

const html = `
  <div>
    <p>${user.name}</p>
  </div>
`;

表達式插值

const str = `1 + 1 = ${1 + 1}`; // "1 + 1 = 2"

解構賦值

數組解構

const [a, , b] = [1, 2, 3]; // a=1, b=3

對象解構

const { name, age } = user;
// 別名
const { name: userName } = user;

函數參數擴展

默認參數

function greet(name = 'Guest') {
  return `Hello ${name}`;
}

剩余參數

function sum(...numbers) {
  return numbers.reduce((a,b) => a+b);
}

擴展運算符

數組展開

const arr1 = [1, 2];
const arr2 = [...arr1, 3]; // [1,2,3]

對象展開

const obj = { ...defaults, ...options };

Promise異步編程

基本用法

fetch(url)
  .then(response => response.json())
  .catch(error => console.error(error));

鏈式調用

asyncTask()
  .then(step1)
  .then(step2)
  .then(finalStep);

模塊化系統

export與import

// math.js
export const PI = 3.14;

// app.js
import { PI } from './math.js';

動態導入

import('./module.js').then(module => {
  // 使用模塊
});

類與繼承

class語法

class Person {
  constructor(name) {
    this.name = name;
  }
  
  greet() {
    return `Hello ${this.name}`;
  }
}

extends繼承

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
}

Symbol類型

唯一性特性

const sym1 = Symbol('key');
const sym2 = Symbol('key');
sym1 === sym2; // false

內置Symbol

const iterable = {
  [Symbol.iterator]() { /*...*/ }
};

集合類型

Set與WeakSet

const set = new Set([1,2,3,3]);
set.size; // 3

Map與WeakMap

const map = new Map();
map.set('key', 'value');

迭代器與生成器

for…of循環

for (const item of iterable) {
  console.log(item);
}

Generator函數

function* gen() {
  yield 1;
  yield 2;
}

Proxy與Reflect

元編程能力

const proxy = new Proxy(target, {
  get(target, prop) {
    return Reflect.get(...arguments);
  }
});

攔截操作

支持13種可攔截操作： - get - set - apply - construct - …

結語

ES6的新特性顯著提升了JavaScript的開發體驗和工程化能力。建議開發者： 1. 優先使用const/let替代var 2. 善用解構和箭頭函數簡化代碼 3. 掌握Promise實現優雅的異步處理 4. 使用class構建清晰的面向對象架構

這些特性已被現代瀏覽器和Node.js廣泛支持，通過Babel等工具也可兼容舊環境。 “`

注：本文為精簡版示例，完整5000字版本需擴展以下內容： 1. 每個特性的詳細應用場景 2. 性能對比與最佳實踐 3. 與TypeScript的配合使用 4. 實際項目代碼示例 5. 各瀏覽器兼容性說明 6. Babel轉譯配置建議