Comment éviter les erreurs « Impossible de lire la propriété non définie » en JavaScript ?

Comment éviter les erreurs de propriété non définies

En JavaScript, il est courant de rencontrer des tableaux contenant un mélange d'objets avec différents niveaux d'imbrication. Cela peut entraîner des erreurs lors de l'itération sur le tableau si tous les objets n'ont pas la même profondeur.

Le problème :

Lorsque vous essayez d'accéder aux propriétés imbriquées d'un objet, JavaScript générera une erreur si le chemin d'accès à cette propriété n'existe pas. Par exemple, dans le code suivant :

var test = [{'a':{'b':{'c':"foo"}}}, {'a': "bar"}];

for (i=0; i<test.length; i++) {
    console.log(a.b.c);
}

La boucle générera une erreur "Impossible de lire la propriété non définie" lorsque i vaut 1, puisque le deuxième élément du tableau de test n'a qu'une seule propriété a, pas une propriété b imbriquée.

La solution :

Une façon d'éviter ces erreurs est d'utiliser l'opérateur conditionnel pour vérifier si chaque propriété existe avant d'y accéder :

for (i=0; i<test.length; i++) {
    if (a.b) {
        console.log(a.b.c);
    }
}

Cependant, cette approche peut devenir fastidieuse si vous avez des objets profondément imbriqués ou plusieurs propriétés à vérifier.

Chaînage facultatif (ES2020) :

Pour les versions JavaScript ultérieures à ES2020, le chaînage facultatif (?.) offre un moyen plus concis de vérifier pour l'existence de la propriété avant d'y accéder. Par exemple :

for (i=0; i<test.length; i++) {
    console.log(a?.b?.c);
}

Si a ou b n'existe pour aucun objet du tableau, l'opérateur de chaînage facultatif renverra undéfini au lieu de générer une erreur.

getSafe () Fonction d'assistance (pré-ES2020) :

Pour les versions JavaScript antérieures à ES2020, vous pouvez définir une fonction d'assistance qui utilise un bloc try/catch pour accéder en toute sécurité aux propriétés :

function getSafe(fn, defaultVal) {
  try {
    return fn();
  } catch (e) {
    return defaultVal;
  }
}

for (i=0; i<test.length; i++) {
    console.log(getSafe(() => a.b.c));
}

Cette fonction renverra la valeur de la propriété si elle existe, ou une valeur par défaut si la propriété n'existe pas.

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!