JavaScript中?.?和??指的是什么意思

JavaScript中?. 和??指的是什么意思

在JavaScript中，?. 和 ?? 是兩個相對較新的操作符，它們分別用于簡化代碼中的條件判斷和默認值處理。這兩個操作符在ES2020（即ES11）中被引入，極大地提升了代碼的可讀性和簡潔性。本文將詳細介紹它們的用法和適用場景。

1. 可選鏈操作符 ?.

1.1 什么是可選鏈操作符？

可選鏈操作符（Optional Chaining Operator）?. 允許你在訪問對象的屬性或調用方法時，如果對象是 null 或 undefined，則不會拋出錯誤，而是返回 undefined。這個操作符的主要目的是簡化對深層嵌套對象的訪問，避免因為某個中間屬性不存在而導致代碼崩潰。

1.2 使用場景

假設我們有一個嵌套的對象結構：

const user = {
  name: 'Alice',
  address: {
    city: 'Wonderland',
    zipcode: '12345'
  }
};

如果我們想要訪問 user.address.city，通常的寫法是：

const city = user.address.city;

但如果 user 或 user.address 是 null 或 undefined，這段代碼就會拋出錯誤：

const user = null;
const city = user.address.city; // TypeError: Cannot read property 'city' of null

為了避免這種情況，我們通常會使用條件判斷：

const city = user && user.address && user.address.city;

這種寫法雖然安全，但代碼顯得冗長且不易讀。使用可選鏈操作符 ?.，我們可以簡化這段代碼：

const city = user?.address?.city;

如果 user 或 user.address 是 null 或 undefined，city 將會是 undefined，而不會拋出錯誤。

1.3 可選鏈操作符的其他用法

可選鏈操作符不僅可以用于屬性訪問，還可以用于函數調用：

const user = {
  name: 'Alice',
  greet() {
    console.log(`Hello, ${this.name}`);
  }
};

user.greet?.(); // 如果 user.greet 存在，則調用它

如果 user.greet 不存在，調用 user.greet?.() 不會拋出錯誤，而是靜默地返回 undefined。

2. 空值合并操作符 ??

2.1 什么是空值合并操作符？

空值合并操作符（Nullish Coalescing Operator）?? 用于在左側的表達式為 null 或 undefined 時，返回右側的默認值。與邏輯或操作符 || 不同，?? 只會在左側的值為 null 或 undefined 時才會返回右側的值，而 || 會在左側的值為假值（如 0、''、false 等）時也返回右側的值。

2.2 使用場景

假設我們有一個變量 count，我們希望在其為 null 或 undefined 時，使用默認值 0：

const count = null;
const result = count ?? 0; // result 將會是 0

如果使用邏輯或操作符 ||，情況會有所不同：

const count = 0;
const result = count || 10; // result 將會是 10

在這個例子中，count 是 0，雖然它是一個有效的值，但 || 會將其視為假值，并返回右側的 10。而使用 ?? 時，count 是 0，因此 result 將會是 0。

2.3 空值合并操作符的適用場景

空值合并操作符特別適用于需要區分 null/undefined 和其他假值的場景。例如，在處理表單輸入時，用戶可能輸入了 0 或空字符串 ''，這些值在某些情況下是有效的，不應該被替換為默認值。

const input = document.querySelector('input').value;
const value = input ?? 'default';

在這個例子中，如果用戶沒有輸入任何內容，input 將會是 ''（空字符串），?? 不會將其替換為 'default'，而 || 會。

3. ?. 和 ?? 的結合使用

?. 和 ?? 可以結合使用，以處理更復雜的場景。例如，假設我們有一個嵌套的對象，我們希望訪問某個屬性，并在其為 null 或 undefined 時返回一個默認值：

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

const city = user?.address?.city ?? 'Unknown';

在這個例子中，如果 user 或 user.address 是 null 或 undefined，city 將會是 'Unknown'。

4. 總結

• 可選鏈操作符 ?.：用于簡化對深層嵌套對象的訪問，避免因為某個中間屬性不存在而導致代碼崩潰。
• 空值合并操作符 ??：用于在左側的值為 null 或 undefined 時，返回右側的默認值，與 || 不同，它不會將其他假值（如 0、'' 等）視為無效。

這兩個操作符的引入使得JavaScript代碼更加簡潔、易讀，尤其是在處理復雜的對象結構和默認值時，能夠顯著減少代碼量并提高代碼的健壯性。