什麼是 ES6 (ECMAScript 2015)?
ES6,也稱為 ECMAScript 2015,是 ECMAScript 標準的第六個版本,於 2015 年正式發布。它是 JavaScript 語言的一個重大更新,因為 ECMAScript 是 JavaScript 的標準規範,而 JavaScript 則是這個標準的具體實現。ES6 的推出為 JavaScript 帶來了許多新的特性,使其語法更簡潔並解決了一些過去開發中的常見問題。
ES6 為什麼重要?
提升開發效率:ES6 引入了如箭頭函數、模板字串等語法糖,簡化了開發過程,使代碼更簡潔、可讀性更高。
非同步處理的提升:使用 Promise 和 async/await,JavaScript 中的非同步處理變得更加優雅,避免了回調地獄。
模組化支持:ES6 提供了內建的模組系統,讓開發者能夠更方便地組織和維護大型應用程式。
擴展了語言功能:例如 Set、Map 等新數據結構以及類別(class)的引入,豐富了 JavaScript 的編程範式,支持更多的面向對象開發。
ES6 主要特性概述
ES6 引入了多個新特性,以下是其中幾個最重要的特性:
(1)let 和 const:新的變數宣告方式
let 是用來宣告變數的新方式,具有區塊作用域,變數只在 {} 內部生效,解決了 var 的提升問題。
const 用來宣告常量,一旦賦值後不能再改變。但對於物件或陣列,內容依然可以被修改。
範例:
javascript
複製程式碼
let x = 10;
const y = 20;
x = 15; // 允許修改
// y = 30; // 會報錯,因為 y 是常量
(2)箭頭函數 (Arrow Functions)
箭頭函數 (=>) 提供了一種更簡潔的函數寫法,特別是在回調函數中,能解決 this 綁定的問題。
當函數體只有一個表達式時,可以省略 {} 和 return。
範例:
javascript
複製程式碼
// 傳統函數
function add(a, b) {
return a + b;
}
// 箭頭函數
const add = (a, b) => a + b;
(3)模板字串 (Template Literals)
模板字串使用反引號(),允許嵌入變數或表達式,並且支持多行字串,讓字串處理更靈活。 使用 ${} 來嵌入 JavaScript 表達式。 範例: javascript 複製程式碼 let name = "John"; let age = 25; console.log(My name is ${name} and I am ${age} years old.`);
(4)解構賦值 (Destructuring Assignment)
解構賦值讓開發者可以快速從物件或陣列中提取值,並賦值給變數,簡化了操作複雜數據結構的過程。
陣列解構:按照順序提取值。
物件解構:通過屬性名稱提取對應值。
範例:
javascript
複製程式碼
// 陣列解構
let [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
// 物件解構
let {name, age} = {name: "Alice", age: 30};
console.log(name); // Alice
console.log(age); // 30