const count = 0;
const total = count || 10;
console.log(total); // 輸出 10，而不是預(yù)期的 0

const count = 0;
const total = count ?? 10;
console.log(total); // 輸出 0，正確！

const name = null;
const displayName = name ?? 'Anonymous';
console.log(displayName); // 輸出 'Anonymous'

const age = undefined;
const userAge = age ?? 18;
console.log(userAge); // 輸出 18

// 錯(cuò)誤寫法 - 會拋出 SyntaxError
const invalid = null || undefined ?? 'default';

// 正確寫法 - 使用括號明確優(yōu)先級
const valid1 = (null || undefined) ?? 'default';
const valid2 = null || (undefined ?? 'default');

const user = {
  name: 'Alice',
  address: {
    city: 'Beijing'
  }
};

// 傳統(tǒng)寫法 - 需要先判斷每一層
const city1 = user && user.address && user.address.city;

// 使用可選鏈 - 簡潔安全
const city2 = user?.address?.city;
console.log(city2); // 輸出 'Beijing'

// 訪問不存在的屬性
const country = user?.address?.country;
console.log(country); // 輸出 undefined，不會報(bào)錯(cuò)

// 方法調(diào)用
const result = obj?.method?.();

// 數(shù)組索引
const firstItem = arr?.[0];

// 動(dòng)態(tài)屬性名
const value = obj?.[key];

// 1. 處理表單數(shù)據(jù)
const formData = {
  user: {
    profile: {
      name: 'Bob'
    }
  }
};

// 安全獲取用戶名，即使中間某層不存在
const userName = formData?.user?.profile?.name ?? 'Guest';

// 2. 處理 API 響應(yīng)
async function fetchUser() {
  const response = await fetch('/api/user');
  const data = await response.json();
  
  // 安全訪問嵌套數(shù)據(jù)
  const email = data?.user?.contact?.email ?? 'no-email';
  const avatar = data?.user?.profile?.avatar ?? '/default-avatar.png';
  
  return { email, avatar };
}

// 3. 處理可選的回調(diào)函數(shù)
function handleClick(event) {
  // 某些情況下 onClick 可能未定義
  event?.preventDefault?.();
  callback?.(event);
}

const obj = null;
let count = 0;

// 不會執(zhí)行，因?yàn)?obj 為 null
const result = obj?.method(() => count++);

console.log(count); // 輸出 0，callback 沒有被執(zhí)行

const config = {
  database: {
    host: null,
    port: 5432
  }
};

// 安全獲取數(shù)據(jù)庫配置，主機(jī)為空時(shí)使用默認(rèn)值
const dbHost = config?.database?.host ?? 'localhost';
const dbPort = config?.database?.port ?? 3306;

console.log(dbHost); // 輸出 'localhost'
console.log(dbPort); // 輸出 5432

// 處理深層嵌套的配置對象
const settings = {
  ui: {
    theme: {
      colors: null
    }
  }
};

const primaryColor = settings?.ui?.theme?.colors?.primary ?? '#1890ff';
console.log(primaryColor); // 輸出 '#1890ff'

interface User {
  name: string;
  address?: {
    city: string;
    zipCode?: string;
  };
}

const user: User = {
  name: 'Alice'
};

// 可選鏈返回 undefined 或 string，類型為 string | undefined
const city = user.address?.city;

// 空值合并確保最終類型為 string
const zipCode = user.address?.zipCode ?? '000000';

// .babelrc 或 babel.config.js
{
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}