巧妙避免JavaScript物件空值引發的錯誤
在JavaScript中，安全地存取物件資料至關重要，這能確保應用在資料不完整的情況下也能正常運作。核心在於避免空值引發的錯誤。
為了更好地理解本文，您需要了解JavaScript中truthy和falsy值的概念。
編寫程式碼時，我們經常需要存取物件中的資料。假設我們有一個員工對象，需要取得其狀態資訊。
如果狀態資訊存在，則顯示該狀態；如果不存在，則顯示「實習」。
範例程式碼如下：
<code class="language-javascript">const pegawai = {
nama: 'Alex Under',
status: 'tetap',
};
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>輸出結果：
<code>Alex Under adalah pegawai tetap</code>
現在，我們減少物件的屬性：
<code class="language-javascript">const pegawai = {
};
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>輸出結果：
<code>undefined adalah pegawai undefined</code>
這裡雖然沒有報錯，但數據顯示為undefined，看起來不太美觀。
為了解決這個問題，我們可以加上if-else語句：
<code class="language-javascript">const pegawai = {
};
if (!pegawai.nama) {
pegawai.nama = 'Seorang Pegawai';
}
if (!pegawai.status) {
pegawai.status = 'magang';
}
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>輸出結果：
<code>Seorang Pegawai adalah pegawai magang</code>
我們為資料提供了預設值，如果資料不存在，則使用預設值。
為了簡化程式碼，可以使用以下方式：
<code class="language-javascript">const pegawai = {
};
pegawai.nama = pegawai.nama || 'Seorang Pegawai';
pegawai.status = pegawai.status || 'magang';
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>如果物件本身不存在（為null）會怎麼樣？
<code class="language-javascript">const pegawai = null; console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>
這將導致以下錯誤：
<code>Uncaught TypeError: Cannot read properties of null (reading 'nama')</code>
應用程式因錯誤而崩潰。
為了解決這個問題，我們可以使用以下方法：
<code class="language-javascript">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>這樣就不會報錯，輸出結果為：
<code>Seorang Pegawai adalah pegawai magang</code>
同樣，為了簡化程式碼，可以使用以下方式：
<code class="language-javascript">const pegawai = null;
const pegawaiSafe = {};
pegawaiSafe.nama = (pegawai || {}).nama || 'Seorang Pegawai';
pegawaiSafe.status = (pegawai || {}).status || 'magang';
console.log(pegawaiSafe.nama, 'adalah pegawai', pegawaiSafe.status);</code>或：
<code class="language-javascript">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);</code>透過上述方法，我們可以有效避免物件空值問題，尤其是在處理來自外部輸入（例如使用者輸入、資料庫、第三方服務等）的物件時。
感謝您的閱讀！
歡迎討論與交流，也歡迎交友 ?
以上是存取對象資料的安全方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
