Cara Selamat untuk Mengakses Data pada Objek

Elakkan ralat yang disebabkan oleh nilai nol objek JavaScript dengan bijak

Dalam JavaScript, akses selamat kepada data objek adalah penting untuk memastikan aplikasi boleh berfungsi dengan baik walaupun data tidak lengkap. Intinya adalah untuk mengelakkan ralat yang disebabkan oleh nilai nol.

Perhatian!

Untuk lebih memahami artikel ini, anda perlu memahami konsep nilai kebenaran dan palsu dalam JavaScript.

Kes

Apabila menulis kod, kita selalunya perlu mengakses data dalam objek. Katakan kita mempunyai objek pekerja dan perlu mendapatkan maklumat statusnya.

Jika maklumat status wujud, status akan dipaparkan jika ia tidak wujud, "Magang" akan dipaparkan.

Kod sampel adalah seperti berikut:

<code class="language-javascript">const pegawai = {
  nama: 'Alex Under',
  status: 'tetap',
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>

Hasil keluaran:

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

Masalah dan Penyelesaian 1

Sekarang, kami mengurangkan sifat objek:

<code class="language-javascript">const pegawai = {
};

console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>

Hasil keluaran:

<code>undefined adalah pegawai undefined</code>

Walaupun tiada ralat dilaporkan di sini, data dipaparkan sebagai undefined, yang tidak kelihatan cantik.

Untuk menyelesaikan masalah ini, kita boleh menambah pernyataan 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>

Hasil keluaran:

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

Kami menyediakan nilai lalai untuk data, jika data tidak wujud, nilai lalai digunakan.

Petua Tambahan

Untuk memudahkan kod, anda boleh menggunakan kaedah berikut:

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

Masalah dan Penyelesaian 2

Apakah yang berlaku jika objek itu sendiri tidak wujud (sebagai null)?

<code class="language-javascript">const pegawai = null;
console.log(pegawai.nama, 'adalah pegawai', pegawai.status);</code>

Ini akan mengakibatkan ralat seperti ini:

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

Apl ranap kerana ralat.

Untuk menyelesaikan masalah ini, kita boleh menggunakan kaedah berikut:

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

Dengan cara ini, tiada ralat akan dilaporkan, dan hasil output ialah:

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

Petua Tambahan

Begitu juga, untuk memudahkan kod, anda boleh menggunakan yang berikut:

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

atau:

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

Ringkasan

Melalui kaedah di atas, kami boleh mengelakkan masalah nilai nol objek dengan berkesan, terutamanya apabila berurusan dengan objek daripada input luaran (seperti input pengguna, pangkalan data, perkhidmatan pihak ketiga, dll.).

Terima kasih kerana membaca!

Selamat datang untuk berbincang dan berkomunikasi, dan juga dialu-alukan untuk berkawan?

Atas ialah kandungan terperinci Cara Selamat untuk Mengakses Data pada Objek. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!