六個 ES6+ 語法，
讓你看懂所有 React 程式碼

// 傳統函式寫法
function add(a, b) {
  return a + b;
}

// 箭頭函式（完全等價）
const add = (a, b) => {
  return a + b;
};

// 進階省略：只有一行 return 時，可以拿掉 {} 和 return
const add = (a, b) => a + b;

// 只有一個參數時，小括號也可以省略
const double = n => n * 2;

// 沒有參數：小括號不能省
const greet = () => 'Hello!';

// React 裡最常見的箭頭函式用法

// 1. .map() 的回呼
const names = ['Alice', 'Bob', 'Charlie'];
const upper = names.map(name => name.toUpperCase());
// ['ALICE', 'BOB', 'CHARLIE']

// 2. 事件處理（onClick、onChange 等）
function MyButton() {
  return (
    <button onClick={() => console.log('被點了！')}>
      點我
    </button>
  );
}

// 3. Component 本身也可以用箭頭函式定義（跟 function 宣告等價）
const Greeting = ({ name }) => (
  <h1>你好，{name}！</h1>
);

// 複製陣列（產生全新陣列，不影響原本的）
const original = [1, 2, 3];
const copy = [...original];         // [1, 2, 3]
const added = [...original, 4, 5];  // [1, 2, 3, 4, 5]

// 合併兩個陣列
const a = [1, 2, 3];
const b = [4, 5, 6];
const merged = [...a, ...b];  // [1, 2, 3, 4, 5, 6]

// 複製物件（產生全新物件）
const user = { name: 'Joseph', age: 26 };
const copy = { ...user };                   // { name: 'Joseph', age: 26 }
const updated = { ...user, age: 27 };       // { name: 'Joseph', age: 27 }
// 後面的屬性會覆蓋前面的 ↑

// 合併兩個物件
const extra = { city: '高雄', role: 'admin' };
const full = { ...user, ...extra };
// { name: 'Joseph', age: 26, city: '高雄', role: 'admin' }

const name = 'Joseph';
const age = 26;

// 舊方法（字串拼接）：容易出錯，又難讀
const greeting = '你好，' + name + '！你今年 ' + age + ' 歲。';

// 模板字串：直覺多了
const greeting = `你好，${name}！你今年 ${age} 歲。`;
// 你好，Joseph！你今年 26 歲。

// ${}  裡面可以放任何 JavaScript 運算式
const price = 100;
const qty = 3;
console.log(`總計：${price * qty} 元`);   // 總計：300 元
console.log(`明年：${age + 1} 歲`);        // 明年：27 歲

// 多行字串（舊方法要 \n，模板字串直接換行）
const message = `
  親愛的 ${name}，
  您的訂單已確認。
  總計：NT$${price * qty}
`;

// 在 React 裡：動態 className
const isActive = true;
const className = `btn ${isActive ? 'btn-active' : 'btn-default'}`;
// 'btn btn-active'

// Named Export：可以有多個，用名字區分
export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

export const PI = 3.14159;

// Default Export：每個檔案只能有一個 default
export default function divide(a, b) {
  return a / b;
}

// Named Import：用大括號，名字要對應
import { add, multiply, PI } from './math.js';

// Default Import：沒有大括號，可以取任何名字
import divide from './math.js';
import myDivide from './math.js';  // 名字隨便取，都對應那個 default

// 兩種一起 import
import divide, { add, multiply } from './math.js';

// 重新命名（避免名字衝突）
import { add as plus } from './math.js';

// 全部 named export 放到一個物件
import * as MathUtils from './math.js';
MathUtils.add(1, 2);  // 3

// 問題：直接存取 null 物件的屬性會噴錯
const user = null;
console.log(user.name);  // ❌ TypeError: Cannot read properties of null

// 舊方法（很囉嗦）
const name = user && user.address && user.address.city;

// 選用鏈 ?.：如果 ? 前面是 null/undefined，直接回傳 undefined，不噴錯
console.log(user?.name);                  // undefined（不噴錯）
console.log(user?.address?.city);         // undefined（巢狀也安全）
console.log(user?.getAge?.());            // undefined（函式呼叫也能用）

// 空值合併 ??：左邊是 null 或 undefined 時，回傳右邊的預設值
const displayName = user?.name ?? '訪客'; // '訪客'
const age = user?.age ?? 0;              // 0

// 注意 ?? 和 || 的差異：
// || 把 0、''、false 也視為假值
// ?? 只把 null 和 undefined 視為「沒有值」
const count = 0;
console.log(count || 10);  // 10（因為 0 是 falsy）
console.log(count ?? 10);  // 0（0 不是 null/undefined，所以用 0）