Maison >interface Web >js tutoriel >Comment puis-je accéder en toute sécurité aux propriétés imbriquées dans JavaScript pour éviter les erreurs « Impossible de lire la propriété non définie » ?

Comment puis-je accéder en toute sécurité aux propriétés imbriquées dans JavaScript pour éviter les erreurs « Impossible de lire la propriété non définie » ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-06 22:22:13711parcourir

How Can I Safely Access Nested Properties in JavaScript to Avoid

Résolution des erreurs de propriété non définie

Lorsque vous traitez des structures de données imbriquées en JavaScript, rencontrer des erreurs « Impossible de lire la propriété d'un défini » peut être frustrant. Cela se produit lorsque des tentatives sont faites pour accéder aux propriétés de valeurs non définies ou nulles. Considérons le tableau suivant :

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

Parcourir ce tableau et tenter de consigner la propriété c, comme ceci :

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

entraînerait une erreur sur la deuxième entrée où a.b est indéfini. Pour éviter cette erreur, une approche courante consiste à vérifier chaque niveau de la chaîne de propriétés :

if (a && a.b) {
    console.log(a.b.c);
}

Cependant, cela peut devenir fastidieux lorsqu'il s'agit de structures de données profondément imbriquées. Heureusement, il existe des solutions alternatives.

Chaînage facultatif (ES2020 et TypeScript 3.7)

Si vous utilisez JavaScript selon ECMAScript 2020 ou version ultérieure, ou TypeScript version 3.7 ou supérieur, vous pouvez tirer parti du chaînage facultatif. Cet opérateur, ?., accède en toute sécurité aux propriétés imbriquées sans générer d'erreurs.

console.log(obj?.a?.lot?.of?.properties);

Solution de contournement de la fonction d'assistance (versions JavaScript antérieures)

Pour les versions antérieures de JavaScript, un La fonction d'assistance try/catch avec les fonctions fléchées ES6 peut fournir une solution.

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

console.log(getSafe(() => obj.a.lot.of.properties));

Vous pouvez également fournir une valeur par défaut facultative valeur :

console.log(getSafe(() => obj.a.lot.of.properties, 'nothing'));

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn