Maison > interface Web > js tutoriel > le corps du texte

Parlons de l'opérateur facultatif (?.) en JavaScript

青灯夜游
Libérer: 2021-06-16 09:43:03
avant
1787 Les gens l'ont consulté

Cet article vous présentera l'opérateur facultatif (?.) en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Parlons de l'opérateur facultatif (?.) en JavaScript

Comment vérifier les propriétés imbriquées de l'objet d'accès à l'aide de null (null et undefined) ?

Vous pouvez utiliser l'opérateur ternaire imbriqué :

const userName = response ? (response.data ? (response.data.user ? response.data.user.name : null) : null) : null;
Copier après la connexion

ou utiliser if pour la vérification nulle :

let userName = null;
if(response && response.data && response.data.user){
  userName = response.data.user.name;
}
Copier après la connexion

Ou mieux encore, en faire une && conditions pour un seul- des liens de ligne, comme ceci :

const userName = response && response.data && response.data.user && response.data.user.name;
Copier après la connexion

Ce que les codes ci-dessus ont en commun, c'est que les liens peuvent parfois être très verbeux et devenir plus difficiles à formater et à lire. C'est pourquoi l'opérateur ?. a été proposé Changeons ?. et reconstruisons le code ci-dessus :

const userName = response?.data?.user?.name;
Copier après la connexion

est très sympa.

Syntaxe

?. La syntaxe a été introduite dans ES2020 et son utilisation est la suivante :

obj.val?.pro  // 如果`val`存在,则返回`obj.val.prop`,否则返回 `undefined`。

obj.func?.(args) // 如果 obj.func 存在,则返回 `obj.func?.(args)`,否则返回 `undefined`。

obj.arr?.[index] // 如果 obj.arr 存在,则返回 `obj.arr?.[index]`,否则返回 `undefined`。
Copier après la connexion

Utilisez le ?. opérateur

Supposons que nous ayons un user objet :

const user = {
  name: "前端小智",
  age: 21,
  homeaddress: {
    country: "中国"
  },
  hobbies: [{name: "敲代码"}, {name: "洗碗"}],
  getFirstName: function(){
    return this.name;
  }
}
Copier après la connexion

Propriétés

Accès aux propriétés existantes :

console.log(user.homeaddress.country); 
// 中国
Copier après la connexion

Accéder aux attributs non existants :

console.log(user.officeaddress.country); 
// throws error "Uncaught TypeError: Cannot read property 'country' of undefined"
Copier après la connexion

Utilisez ?. à la place. Accédez aux attributs non existants :

console.log(user.officeaddress?.country); 
// undefined
Copier après la connexion

Méthodes

Accédez aux méthodes existantes :

console.log(user.getFirstName());
Copier après la connexion

Accéder aux méthodes inexistantes :

console.log(user.getLastName()); 
// throws error "Uncaught TypeError: user.getLastName is not a function";
Copier après la connexion

Utilisez ?. à la place. Accédez aux méthodes inexistantes :

console.log(user.getLastName?.()); 
// "undefined"
Copier après la connexion

Array

<🎜. >Accéder aux méthodes existantes Tableau :

console.log(user.hobbies[0].name); 
// "敲代码"
Copier après la connexion

Accédez à la méthode inexistante :

console.log(user.hobbies[3].name); 
// throws error "Uncaught TypeError: Cannot read property &#39;name&#39; of undefined"
Copier après la connexion

Utilisez

Accédez à un tableau inexistant : ?.

console.log(user.dislikes?.[0]?.name); 
// "undefined"
Copier après la connexion

<🎜. >??<h3 id="item-5"><strong>??</strong> opérateur Nous savons que le symbole de l'opérateur

renvoie simplement ?. si l'objet n'existe pas. Pendant le développement, il peut ne pas exister. renvoie undefined mais renvoie à la place une valeur par défaut, nous pouvons alors utiliser l'opérateur double question undefined. ??

est un peu abstrait, voici un exemple :

const country = user.officeaddress?.country;
console.log(country);
// undefined
Copier après la connexion

Besoin de renvoyer la valeur par défaut :

const country = user.officeaddress?.country ?? "中国";
console.log(country);
// 中国
Copier après la connexion
Adresse originale en anglais : https://codingncoepts. com/javascript/facultatif-chaining-opeator-javascript/

Auteur : Ashish Lahoti

Pour plus de connaissances sur la programmation, veuillez visiter :

Introduction à la programmation ! !

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!

Étiquettes associées:
source:segmentfault.com
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal