快捷導(dǎo)航

JS使用可選鏈操作符 (?.) 進(jìn)行空值檢查的操作

更新時間：2024年12月06日 11:19:16 作者：aloha_

在 JavaScript 中,處理嵌套對象或數(shù)組時,經(jīng)常會遇到空值檢查的問題,傳統(tǒng)的空值檢查通常比較繁瑣,容易導(dǎo)致代碼冗長且難以閱讀,ES2020 引入了可選鏈操作符 (?.),極大地簡化了這些檢查過程,本文介紹了JS使用可選鏈操作符 (?.) 進(jìn)行空值檢查的操作

傳統(tǒng)空值檢

假設(shè)我們有一個嵌套的對象結(jié)構(gòu)，想要訪問 user.address.city，但不確定 user、address 或 city 是否存在。傳統(tǒng)的空值檢查方法如下：

let city = null;
if (user && user.address && user.address.city) {
  city = user.address.city;
}

// let city = user ? (user.address ? user.address.city : null) : null;

這些方法不僅冗長，而且容易出錯.

使用可選鏈操作符 (?.)

可選鏈操作符 (?.) 提供了一種更簡潔的方式來處理這些情況。它允許我們在訪問對象屬性之前檢查對象是否存在，從而避免運行時錯誤。

基本用法

let city = user?.address?.city;

如果 user 或 address 為 null 或 undefined，整個表達(dá)式會短路并返回 undefined，而不會拋出錯誤。

示例

假設(shè)我們有以下對象結(jié)構(gòu)：

const user = {
  name: "Alice",
  address: {
    street: "123 Main St",
    city: "Wonderland"
  }
};

使用可選鏈操作符訪問 city：

let city = user?.address?.city; // "Wonderland"
let country = user?.address?.country; // undefined

處理數(shù)組

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 }
];

let secondUserAge = users[1]?.age; // 30
let thirdUserAge = users[2]?.age; // undefined

結(jié)合函數(shù)調(diào)用

const obj = {
  method: function() {
    return "Hello";
  }
};

let result = obj?.method(); // "Hello"
let nonExistentResult = obj?.nonExistentMethod(); // undefined