存取對象資料的安全方法

巧妙避免JavaScript物件空值引發的錯誤

在JavaScript中，安全地存取物件資料至關重要，這能確保應用在資料不完整的情況下也能正常運作。核心在於避免空值引發的錯誤。

注意！

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

案例

編寫程式碼時，我們經常需要存取物件中的資料。假設我們有一個員工對象，需要取得其狀態資訊。

如果狀態資訊存在，則顯示該狀態；如果不存在，則顯示「實習」。

範例程式碼如下：

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

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

輸出結果：

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

問題及解決方案一

現在，我們減少物件的屬性：

const pegawai = {
};

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

輸出結果：

<code>undefined adalah pegawai undefined</code>

這裡雖然沒有報錯，但數據顯示為undefined，看起來不太美觀。

為了解決這個問題，我們可以加上if-else語句：

const pegawai = {
};

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

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

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

輸出結果：

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

我們為資料提供了預設值，如果資料不存在，則使用預設值。

附加技巧

為了簡化程式碼，可以使用以下方式：

const pegawai = {
};

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

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

問題及解決方案二

如果物件本身不存在（為null）會怎麼樣？

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

這將導致以下錯誤：

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

應用程式因錯誤而崩潰。

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

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);

這樣就不會報錯，輸出結果為：

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

附加技巧

同樣，為了簡化程式碼，可以使用以下方式：

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);

總結

透過上述方法，我們可以有效避免物件空值問題，尤其是在處理來自外部輸入（例如使用者輸入、資料庫、第三方服務等）的物件時。

感謝您的閱讀！

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

以上是存取對象資料的安全方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！