巧妙避免JavaScript對(duì)象空值引發(fā)的錯(cuò)誤

在JavaScript中，安全地訪問對(duì)象數(shù)據(jù)至關(guān)重要，這能確保應(yīng)用在數(shù)據(jù)不完整的情況下也能正常運(yùn)行。核心在于避免空值引發(fā)的錯(cuò)誤。

注意！

為了更好地理解本文，您需要了解JavaScript中truthy和falsy值的概念。

案例

編寫代碼時(shí)，我們經(jīng)常需要訪問對(duì)象中的數(shù)據(jù)。假設(shè)我們有一個(gè)員工對(duì)象，需要獲取其狀態(tài)信息。

如果狀態(tài)信息存在，則顯示該狀態(tài)；如果不存在，則顯示“實(shí)習(xí)”。

示例代碼如下：

const pegawai = {
  nama: 'Alex Under',
  status: 'tetap',
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

輸出結(jié)果：

<code>Alex Under adalah pegawai tetap</code>

問題及解決方案一

現(xiàn)在，我們減少對(duì)象的屬性：

const pegawai = {
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

輸出結(jié)果：

<code>undefined adalah pegawai undefined</code>

這里雖然沒有報(bào)錯(cuò)，但數(shù)據(jù)顯示為undefined，看起來(lái)不太美觀。

為了解決這個(gè)問題，我們可以添加if-else語(yǔ)句：

const pegawai = {
};

if (!pegawai.nama) {
  pegawai.nama = 'Seorang Pegawai';
}

if (!pegawai.status) {
  pegawai.status = 'magang';
}

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

輸出結(jié)果：

<code>Seorang Pegawai adalah pegawai magang</code>

我們?yōu)閿?shù)據(jù)提供了默認(rèn)值，如果數(shù)據(jù)不存在，則使用默認(rèn)值。

附加技巧

為了簡(jiǎn)化代碼，可以使用如下方式：

const pegawai = {
};

pegawai.nama = pegawai.nama || 'Seorang Pegawai';
pegawai.status = pegawai.status || 'magang';

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

問題及解決方案二

如果對(duì)象本身不存在（為null）會(huì)怎樣？

const pegawai = null;
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);

這將導(dǎo)致如下錯(cuò)誤：

<code>Uncaught TypeError: Cannot read properties of null (reading 'nama')</code>

應(yīng)用程序因錯(cuò)誤而崩潰。

為了解決這個(gè)問題，我們可以使用以下方法：

const pegawai = null;
const pegawaiSafe = pegawai || {};

if (!pegawaiSafe.nama) {
  pegawaiSafe.nama = 'Seorang Pegawai';
}

if (!pegawaiSafe.status) {
  pegawaiSafe.status = 'magang';
}

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);

這樣就不會(huì)報(bào)錯(cuò)，輸出結(jié)果為：

<code>Seorang Pegawai adalah pegawai magang</code>

附加技巧

同樣，為了簡(jiǎn)化代碼，可以使用以下方式：

const pegawai = null;

const pegawaiSafe = {};
pegawaiSafe.nama = (pegawai || {}).nama || 'Seorang Pegawai';
pegawaiSafe.status = (pegawai || {}).status || 'magang';

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);

或者：

const pegawai = null;

const pegawaiSafe = pegawai || {};
pegawaiSafe.nama = pegawaiSafe.nama || 'Seorang Pegawai';
pegawaiSafe.status = pegawaiSafe.status || 'magang';

console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);

總結(jié)

通過(guò)以上方法，我們可以有效避免對(duì)象空值問題，尤其是在處理來(lái)自外部輸入（例如用戶輸入、數(shù)據(jù)庫(kù)、第三方服務(wù)等）的對(duì)象時(shí)。

感謝您的閱讀！

歡迎討論和交流，也歡迎交友 ?

以上是訪問對(duì)象數(shù)據(jù)的安全方法的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！