Moyens sûrs d'accéder aux données sur les objets

Évitez intelligemment les erreurs causées par les valeurs nulles des objets JavaScript

En JavaScript, un accès sécurisé aux données des objets est crucial pour garantir que les applications peuvent fonctionner correctement même si les données sont incomplètes. L’essentiel est d’éviter les erreurs causées par des valeurs nulles.

Attention !

Pour mieux comprendre cet article, vous devez comprendre les concepts de valeurs vraies et fausses en JavaScript.

Cas

Lors de l'écriture de code, nous avons souvent besoin d'accéder aux données des objets. Supposons que nous ayons un objet employé et que nous devions obtenir ses informations de statut.

Si les informations de statut existent, le statut sera affiché ; s'il n'existe pas, « Stage » sera affiché.

L'exemple de code est le suivant :

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

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

Résultat de sortie :

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

Problème et solution 1

Maintenant, on réduit les propriétés de l'objet :

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

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

Résultat de sortie :

<code>undefined adalah pegawai undefined</code>

Bien qu'aucune erreur ne soit signalée ici, les données sont affichées sous la forme undefined, ce qui n'a pas l'air joli.

Pour résoudre ce problème, nous pouvons ajouter la déclaration 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>

Résultat de sortie :

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

Nous fournissons une valeur par défaut pour les données, si les données n'existent pas, la valeur par défaut est utilisée.

Conseils supplémentaires

Pour simplifier le code, vous pouvez utiliser la méthode suivante :

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

Problème et solution 2

Que se passe-t-il si l'objet lui-même n'existe pas (comme null) ?

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

Cela entraînera une erreur comme celle-ci :

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

L'application est tombée en panne avec une erreur.

Pour résoudre ce problème, nous pouvons utiliser la méthode suivante :

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

De cette façon, aucune erreur ne sera signalée et le résultat de sortie est :

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

Conseils supplémentaires

De même, pour simplifier le code, vous pouvez utiliser ce qui suit :

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

ou :

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

Résumé

Grâce à la méthode ci-dessus, nous pouvons efficacement éviter le problème de la valeur nulle de l'objet, en particulier lorsqu'il s'agit d'objets provenant d'une entrée externe (telle qu'une entrée utilisateur, une base de données, des services tiers, etc.).

Merci d'avoir lu !

Bienvenue pour discuter et communiquer, et également bienvenue pour vous faire des amis ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!