React 相較於其他前端框架，它的機制仰賴於對 JavaScript 的理解，因此，掌握 ES6 語法變得尤為重要，接著讓我們來了解一下常用的 ES6 語法。

解構賦值（Destructuring assignment）

從物件或陣列中提取值，並賦予給變數，使程式碼更簡潔。

假設有一個 person 物件，需要將其內部的屬性 firstName、lastName、age 取出並賦予到變數上，如果不使用解構，可能會導致程式碼十分冗長。

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

const firstName = person.firstName;
const lastName = person.lastName;
const age = person.age;

物件解構

const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30,
};

// 從 person 物件中一次性取出 firstName、lastName、age 這三個值，並分別賦予到變數上
const { firstName, lastName, age } = person;
console.log(firstName); // John
console.log(lastName);  // Doe
console.log(age);       // 30

// 自定義變數名稱
const {
  firstName: personFirstName,
  lastName: personLastName,
  age: personAge,
} = person;
console.log(personFirstName); // John
console.log(personLastName);  // Doe
console.log(personAge);       // 30

陣列解構

const person = ['John', 'Doe', 30];

// 從 person 陣列中一次取出，並自定義變數名稱為 firstName、lastName、age
const [firstName, lastName, age] = person;

展開 / 其餘運算符（Spread and Rest Operators）

展開運算符（...）可以用於將陣列或物件展開為元素或鍵值對的列表。其餘運算符也使用相同的語法，但它用於將剩餘的元素或鍵值對收集到一個陣列中。

展開運算符

const numbers = [1, 2, 3];
const moreNumbers = [4, 5, 6];

// 透過展開運算符合併兩個陣列
const combined = [...numbers, ...moreNumbers];
console.log(combined); // [1, 2, 3, 4, 5, 6]

其餘運算符

// 透過其餘運算符將剩餘的值收集到一個陣列中
const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first);  // 1
console.log(second); // 2
console.log(rest);   // [3, 4, 5]

樣板字面值（Template Literals）

樣板字面值讓我們擺脫了複雜的字串相加，它允許插入變數和表達式到字串中，讓字串插值更加簡單和易讀。

const name = 'John';
const age = 30;

// 一般的字串組合
const message = 'Hello, my name is ' + name + ' and I am ' + age + ' years old.';

// 樣板字面值，使用反引號 ``
const message = `Hello, my name is ${name} and I am ${age} years old.`;

三元運算子（Ternary Operator）

三元運算子通常用於簡潔的條件賦值，當處理簡單的 if-else 邏輯時，可以使程式碼更加簡潔。

以下是三元運算式的基本語法：

條件 ? 條件為 truthy 時的表達式 : 條件為 falsy 時的表達式;

• 如果「條件」為 truthy，則執行「條件為 truthy 時的表達式」。
• 如果「條件」為 falsy，則執行「條件為 falsy 時的表達式」。

const age = 25;

const check = age >= 18 ? '已成年' : '未成年';
console.log(check); // '已成年'

在此範例中，三元運算子會檢查條件 age >= 18 。如果條件為 truthy，將字串 “已成年” 賦予給 check 變數，反之，將字串 “未成年” 賦予給 check 變數。

箭頭函式（Arrow Functions）

箭頭函式是一種簡潔的函式語法，尤其適用於匿名函式或回調函式。

// 一般函式
function sum(a, b) {
  return a + b;
}

// 箭頭函式，將 function() {} 簡化成 () => {} 的形式
const sum = (a, b) => {
  return a + b
};

// 如果程式碼只有一行 return，甚至可以省略大括號跟 return
const sum = (a, b) => a + b;

邏輯運算符（Logical Operators）

邏輯運算符包括 ||（或）、&&（且）和 ??（空值合併運算符），它們用於處理邏輯表達式。

const a = 0;
const b = 1;

// 當 a > 0 可以被轉換為 true，回傳 a > 0 的結果，反之，回傳 b > 0 的結果
const c = a > 0 || b > 0;

// 當 a > 0 可以被轉換為 false，回傳 a > 0 的結果，反之，回傳 b > 0 的結果
const d = a > 0 && b > 0;

// 當 ?? 前面的值為 null 或 undefined，回傳 ?? 後面的值
const e = null ?? 'Hello World!';

可選串聯（Optional Chaining）

可選串聯是一個新的操作符 ?.，它允許我們安全地訪問可能不存在的屬性或方法。

const user = {
  name: 'John',
  address: {
    city: 'New York',
  },
};

const city = user.address?.city; // 'New York'
const phoneNumber = user.contact?.phoneNumber; // undefined，而不是錯誤

可選串聯有助於減少因未定義值而引起的錯誤。

結語

ES6 功能使 JavaScript 程式碼更簡潔、可讀性更高，並提高 React 開發的效率。