什麼是可選串連？

JavaScript 可選串連（Optional Chaining）是現代 JavaScript 的一個強大特性，它讓我們更好的處理可能為 null 或 undefined 的值，同時減少冗長的條件判斷。這個功能在處理各種情境中非常實用，包括處理 API 請求、物件屬性存取以及函數返回值等等。可選串連運算子使用問號 ? 表示。

程式碼範例

使用傳統方式處理可能為 null 或 undefined 的情況：

const data: unknown = fetchData();
if (data !== null && data !== undefined) {
  console.log(data);
}

使用可選串連：

const data: unknown = fetchData();
console.log(data?.property);

如何使用可選串連？

使用可選串連非常簡單。只需在可能為 null 或 undefined 的值之後加上 ?，就可以安全地訪問其屬性或調用其方法。這樣可以減少不必要的錯誤，提高代碼的可讀性。

程式碼範例

使用傳統方式處理可能為 null 或 undefined 的情況：

const user: unknown = {
  name: '肉鬆',
  address: {
    street: '某條街',
    city: '某縣市',
  },
};

const city = user.address ? user.address.city : 'Unknown';
console.log(city); // 如果 user.address 存在，輸出城市名稱；否則輸出 'Unknown'

使用可選串連：

const user: unknown = {
  name: '肉鬆',
  address: {
    street: '某條街',
    city: '某縣市',
  },
};

const city = user.address?.city ?? 'Unknown';
console.log(city); // 如果 user.address 存在，輸出城市名稱；否則輸出 'Unknown'

其他可選串連的應用情境

可選串連不僅限於屬性存取，還可以應用於函數調用、陣列存取等多種情境。這種語法能夠幫助你簡化代碼並減少錯誤。

函式調用

function calculateTotal(
  price: number,
  taxRate: { value: number } | undefined | null
): number {
  return price * (1 + (taxRate?.value || 0));
}

const total: number = calculateTotal(30, { value: 0.1 });
console.log(total);
// 如果 taxRate 的 value 存在，返回 value 的值，否則返回 0

陣列存取

const ary: number[] = [1, 2, 3];
const index: number = 5;
const data: string = ary[index]?.toString() ?? 'Unknown';
console.log(data); // 如果 data[index] 存在，輸出該數字並轉成字串，否則輸出 Unknown

本日重點

1. 可選串連運算子使用問號 ? 表示，允許我們安全存取可能不存在的屬性或方法，而不會引發錯誤。
2. 擅用可選串連可以更好的處理 null 或 undefined 的值。

參考

• 可選串連