Javascript 初心者必讀：ES6 語法入門

在 ES6 之前，JavaScript 只有 var 一種方式來宣告變數，這會引發許多作用域及重複宣告的問題。ES6 引入了 let 和 const，讓變數在區域範圍內更易管理。

使用 let 宣告的變數僅作用於當前區域，其作用域是塊級，而 const 宣告的變數則必須在宣告時指定初始值，且一旦設定後無法改變。

let count = 1;
count = 2; // 合法賦值

const PI = 3.14;
// PI = 3.15; // 此行會導致錯誤

這些新特性的引入，幫助開發者有效避免過去使用 var 所導致的多數問題。

JavaScript 的 ES6 引入了箭頭函數（Arrow Functions），這讓函數的撰寫更加簡潔，且自動綁定 this。

舉例來說，傳統函數的寫法如下：

function add(a, b) {
  return a + b;
}

使用箭頭函數可以這樣表示：

const add = (a, b) => a + b;

箭頭函數不僅語法更簡單，而且在處理迭代與回呼函數時，讓語意更加明確，特別是在當前上下文不易理解時，自動綁定 this 顯得尤其重要。

在 ES6 中，模板字面值（Template Literals）使得字符串操作更加靈活。使用反引號 ` 包裹字符串，可以輕鬆插入變數或表達式。

範例：

const user = '小明';
const message = `你好, ${user}! 歡迎使用 ES6 語法。`;
console.log(message); // 輸出：你好, 小明! 歡迎使用 ES6 語法。

除了插值之外，模板字面值也支援多行字符串，這讓處理多行文本時簡化不少。

解構賦值（Destructuring）讓你從陣列或物件中提取值時寫法更加簡便及具可讀性。

陣列解構：

const numbers = [1, 2, 3];
const [one, two, three] = numbers;
console.log(one, two, three); // 輸出：1 2 3

物件解構：

const person = { name: '小紅', age: 25 };
const { name, age } = person;
console.log(name, age); // 輸出：小紅 25

這樣的語法改善了代碼的可讀性，特別是在需從對象中擷取多個資料時。

擴展運算子（Spread Operator）可以讓你在函數調用、陣列合併以及複製物件時更靈活地操作數據集合。

例如，在函數調用中應用擴展運算子：

const numbers = [4, 5, 6];
function sum(a, b, c) {
  return a + b + c;
}
console.log(sum(...numbers)); // 輸出：15

陣列合併與複製：

const fruits = ['蘋果', '香蕉'];
const moreFruits = ['芒果', ...fruits, '鳳梨'];
console.log(moreFruits); // 輸出：['芒果', '蘋果', '香蕉', '鳳梨']

透過擴展運算子，我們能將代碼寫得更清晰簡潔，且減少了冗餘的寫法。

在 ES6 中，你可以為函數定義默認參數值，這樣更方便處理參數在調用時未傳入的情況。

範例：

function greet(name = '訪客') {
  return `Hello, ${name}!`;
}

console.log(greet('小明')); // 輸出：Hello, 小明!
console.log(greet()); // 輸出：Hello, 訪客!

默認參數是在調用函數時，如果某參數未提供，則會使用在函數定義中指定的默認值。這使得函數調用時更加靈活，也提升了代碼的可靠性。

ES6 提供了 for...of 迴圈，用於遍歷陣列及可迭代對象。相比 for...in，for...of 更適合用在數據的遍歷，因為它可以直接取得值，而非索引。

範例：

const colors = ['紅色', '綠色', '藍色'];
for (const color of colors) {
  console.log(color);
}
// 輸出：紅色 綠色 藍色

for...of 的引入，讓遍歷集合的寫法更具直觀性，減少了通過索引手動提取數據的麻煩。

模組化是現代開發中不可或缺的一部分，ES6 在語法中內建了模組（Module）功能，讓開發者能夠更有效地組織與重用代碼。

範例，假設有個計算模組：

// math.js
export function add(a, b) {
  return a + b;
}
export function subtract(a, b) {
  return a - b;
}

在其他文件中引用這些函數：

import { add, subtract } from './math';
console.log(add(5, 3)); // 輸出：8
console.log(subtract(5, 3)); // 輸出：2

模組化讓代碼維護更方便，並提升代碼的清晰度，同時避免命名衝突。

ES6 中的 Promise 提供了一種更簡潔的方式來處理非同步操作，讓代碼避免 callback hell 的困擾，並提升可讀性與維護性。

範例：

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve('數據已取得'), 2000);
  });
};

fetchData().then(data => {
  console.log(data);
}).catch(error => {
  console.error('發生錯誤:', error);
});

Promise 的引入，不僅讓處理非同步工作更具結構，更支持链式調用，提升代碼的優雅度。

ES6 引入了 class 語法糖，雖然 JavaScript 一直具備物件導向的特性，但 class 使得在 JavaScript 中實作物件導向編程變得更直觀。

範例：

class Dog {
  constructor(name) {
    this.name = name;
  }
  bark() {
    return `${this.name} 說：汪汪!`;
  }
}

const myDog = new Dog('小黃');
console.log(myDog.bark()); // 輸出：小黃 說：汪汪!

class 讓定義與繼承更加清晰，也讓新手更容易上手物件導向編程。