你知道js的可選鏈是什麼嗎？說說你對它的理解，它有什麼應用場景？

王铁柱6發表於2024-12-01
JS

我知道 JavaScript 的可選鏈運算子。它用 ?. 表示，允許開發者安全地訪問巢狀物件的屬性，而無需顯式地檢查每個級別的屬性是否存在。如果鏈中的任何屬性為 null 或 undefined，表示式將短路並返回 undefined，而不是丟擲錯誤。

理解：

可選鏈運算子本質上是一系列短路求值的條件判斷的簡寫。 它會依次檢查鏈中的每個屬性是否存在。如果某個屬性不存在（null 或 undefined），則整個表示式的求值停止，並返回 undefined。如果所有屬性都存在，則返回最終屬性的值。

應用場景：

  1. 處理可能不存在的巢狀物件屬性： 這是最常見的應用場景。例如，從 API 獲取的資料可能包含巢狀物件，而某些屬性可能並非總是存在。使用可選鏈可以避免繁瑣的 if 語句或三元運算子。

    const user = {
  address: {
    street: '123 Main St',
    // city: 'Anytown',  // city 屬性可能不存在
  }
};

// 傳統方法
let city = user && user.address && user.address.city;

// 使用可選鏈
let city = user?.address?.city; 

console.log(city); // undefined (如果 city 不存在)

  2. 簡化程式碼，提高可讀性： 可選鏈可以顯著減少程式碼量，使程式碼更簡潔易懂，尤其是在處理深層巢狀物件時。

  3. 與函式呼叫結合： 可選鏈不僅可以用於訪問屬性，還可以用於呼叫函式。如果函式不存在，則不會執行呼叫。

    const user = {
  profile: {
    // update: (info) => { ... } // update 函式可能不存在
  }
};

user?.profile?.update?.({ name: 'John' }); // 如果 update 不存在，不會報錯

  4. 陣列訪問： 可選鏈也可以用於訪問陣列元素，如果索引無效，則返回 undefined。

    const arr = [1, 2, 3];

console.log(arr?.[3]); // undefined (索引 3 超出範圍)

  5. 動態屬性訪問： 結合中括號語法，可選鏈可以用於訪問動態屬性。

    const propName = 'city';
console.log(user?.address?.[propName]);

總之，可選鏈運算子提供了一種優雅而簡潔的方式來處理可能不存在的資料，提高了程式碼的健壯性和可讀性，是現代 JavaScript 開發中非常有用的特性。

相關文章