---
# System prepended metadata

title: JavaScript ES6 與 ES5 之間的差別整理

---

> 
# JavaScript ES6
`JavaScript ES6`，也被稱為 ECMAScript 2015，是 JavaScript 語言的一個重要更新，於 2015 年 6 月被正式發布。
這些新特性使得 JavaScript 在開發效率和可讀性上都有了重大的提升。

以下是一些 ES6 的主要更新和新增的特性：

## JavaScript 的 ES5 和 ES6 之間的主要差異比對表格：

| 特性 | ES5 | ES6 |
| --- | --- | --- |
| `let` 和 `const` | 只有 `var`，只有函數級作用域 | 引入了 `let` 和 `const`，提供了區塊級作用域 |
| 箭頭函數 | 傳統的 `function` 語法 | 引入了箭頭函數，不綁定自己的 `this` |
| `import`/`export` | 使用 CommonJS（`require` 和 `module.exports`）或 AMD | 引入了 `import` 和 `export` 語法 |
| class | 需要直接操作原型來實現繼承 | 引入了 `class` 語法，更容易實現基於原型的繼承 |
| Promise | 使用回調函數來處理異步操作 | 引入了 `Promise` 對象，更容易處理異步操作 |
| 字串操作 | 使用 `+` 來連接字串和變量 | 引入了模板字串，更容易創建包含變量的字串 |
| 解構賦值 | 需要手動從對象或陣列中提取值 | 引入了解構賦值，更容易從對象或陣列中提取值 |


## 解釋

1. 變量宣告 **let 和 const**：
ES6 引入了 let 和 const 來宣告變量，提供了區塊級作用域。而在 ES5 中，我們只有 var 來宣告變量，它只有函數級作用域。

2. 箭頭函數 **=>**：
ES6 引入了箭頭函數，它提供了一種更簡潔的方式來寫函數，並且它不綁定自己的 this。

3. 模塊導入和導出 **import 和 export**：
ES6 引入了 import 和 export 語法，讓我們可以更容易地在不同的文件之間共享代碼。而在 ES5 中，我們通常會使用 CommonJS（require 和 module.exports）或 AMD。

4. **class 原型的繼承**：
ES6 引入了 class 語法，讓我們可以更容易地實現基於原型的繼承。而在 ES5 中，我們需要直接操作原型來實現繼承。

5. **Promise**
ES6 引入了 Promise 對象，讓我們可以更容易地處理異步操作。而在 ES5 中，我們通常會使用回調函數來處理異步操作。

6. 模板字串：
ES6 引入了模板字串，讓我們可以更容易地創建包含變量的字串。而在 ES5 中，我們需要使用 + 來連接字串和變量。

7. 解構賦
ES6 引入了解構賦值，讓我們可以更容易地從對象或陣列中提取值。而在 ES5 中，我們需要手動從對象或陣列中提取值。


## 讚讚的介紹 JS es6 文章：
很詳細，案例也非常好懂
https://www.fooish.com/javascript/ES6/


###### tags: `我與codpilor的合作時光`
