快捷導(dǎo)航

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

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

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

傳統(tǒng)空值檢

假設(shè)我們有一個(gè)嵌套的對(duì)象結(jié)構(gòu)，想要訪問(wèn) 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;

這些方法不僅冗長(zhǎng)，而且容易出錯(cuò).

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

可選鏈操作符 (?.) 提供了一種更簡(jiǎn)潔的方式來(lái)處理這些情況。它允許我們?cè)谠L問(wèn)對(duì)象屬性之前檢查對(duì)象是否存在，從而避免運(yùn)行時(shí)錯(cuò)誤。

基本用法

let city = user?.address?.city;

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

示例

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

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

使用可選鏈操作符訪問(wèn) 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

優(yōu)點(diǎn)

簡(jiǎn)潔性: 減少了代碼量，提高了可讀性。
安全性: 避免了因訪問(wèn)不存在的屬性而導(dǎo)致的運(yùn)行時(shí)錯(cuò)誤。
靈活性: 可以方便地處理復(fù)雜的嵌套結(jié)構(gòu)

總結(jié)

可選鏈操作符 (?.) 是 ES2020 引入的一個(gè)強(qiáng)大特性，它簡(jiǎn)化了空值檢查的過(guò)程，提高了代碼的安全性和可讀性。在現(xiàn)代 JavaScript 開(kāi)發(fā)中，合理使用可選鏈操作符可以顯著減少潛在的錯(cuò)誤，并使代碼更加簡(jiǎn)潔優(yōu)雅。