ES6（ES2015）有什麼新特性？
2024年4月8日
在這篇文章你會知道
- ES6（ES2015）的 9 個重要新特性
在之前的文章 《什麼是 ECMAScript？與 JavaScript 有什麼關係？》 中，我們討論了 ECMAScript 的角色，它是用來制定 JavaScript 新功能和語法的標準。
除此之外，也帶到了 ES6（也稱為 ES2015）是一個里程碑式的版本，引入了許多期待已久的語法糖和新特性。這些新增功能大大提升了開發者的編程體驗和效率。
在本文中，我們將重點擺在介紹 ES6（ES2015） 的一些重要新特性。
ES6（ES2015）的 9 個重要新特性
1. let 和 const 關鍵字
ES6 引入了 let 和 const，提供了更好的變數聲明方式。let 允許聲明塊級作用域變數，而 const 用於聲明常數。
相關面試常考題
2. 箭頭函式（Arrow Functions）
箭頭函式提供了一種更簡潔的函式寫法，並自動綁定 this 關鍵字。
相關面試常考題
3. 樣板字面值（Template Literals）
樣板字面值是被反引號``所封閉，這種方式可以讓字串的拼接更加方便，用法可以參考下方程式碼。
const name = "ExplainThis";
// 不用樣板字面值（Template Literals）
console.log("Hello " + name + "!");
// 使用樣板字面值（Template Literals）
console.log(`Hello ${name}!`);
4. 解構賦值（Destructuring Assignment）
解構賦值（Destructuring Assignment）語法是一種 JavaScript 運算式，可以從陣列或物件中提取值，並將其賦給變數，用法可以參考下方程式碼。(MDN)
const obj = { product: "iphone", price: 20000 };
const { product, price } = obj;
console.log(product); // iphone
console.log(price); // 20000
const arr = ["iphone", 20000];
const [product, price] = arr;
console.log(product); // iphone
console.log(price); // 20000
5. 默認參數（Default Parameters）
默認參數（Default Parameters）也是現在在使用 JavaScript 上，很常使用到的方法。此語法可以為函式參數指定默認值，可以參考下方程式碼。
function add(a, b) {
return a + b;
}
// 在沒有預設值的情況下
// 當參數沒有傳入值且函式內部沒有其他判斷
// 容易導致預期外的回傳結果
console.log(add(1)); // NaN
// 透過默認參數，確保 a 和 b 有預設值
function add(a = 0, b = 0) {
return a + b;
}
console.log(add(1)); // 1
6. 展開運算符（Spread Operator）和其餘參數（Rest Parameters）
展開運算符（Spread Operator）可以將陣列或物件展開為個別元素; 而其餘參數（Rest Parameters）則允許將多個參數收集為一個陣列，可以參考此相關資料。(展開運算符 MDN, 其餘參數 MDN)
7. 類（Classes）
ES6 時引入了類（class）的概念，JavaScript 類（class）使用的語法，類似於其他 OOP 程式語言中的 class，但是本質上是一種語法糖，與其他程式語言的 class 實踐方式並不一樣，只是透過此語法糖可以用來模擬 class 的行為。
相關面試常考題
8. 模組化（Modules）
ES6 提供了官方的模組化支持，通過 import 和 export 關鍵字實現模組的導入和導出。
相關面試常考題
9. Promise
Promise 是一種處理異步操作的機制，可以避免回調地獄（callback hell），用來優化過去回調函式 callback 的寫法。
相關面試常考題