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
Libérer: 2024-12-06 22:22:13
original
725 Les gens l'ont consulté

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"}];
Copier après la connexion

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);
}
Copier après la connexion

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);
}
Copier après la connexion

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);
Copier après la connexion

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));
Copier après la connexion

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

console.log(getSafe(() => obj.a.lot.of.properties, 'nothing'));
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal