JavaScript, étant l'un des langages de programmation les plus populaires, offre aux développeurs une gamme d'opérateurs pour gérer diverses opérations logiques. Parmi ceux-ci, les opérateurs Logical OR (||) et Nullish Coalescing (??) sont des outils fondamentaux pour gérer les valeurs par défaut et gérer les valeurs nulles. Cet article approfondira les différences entre ces deux opérateurs, leurs cas d'utilisation et des exemples pratiques et complexes pour illustrer leur utilisation.
L'opérateur OU logique (||) en JavaScript est largement utilisé pour renvoyer la première valeur véridique parmi ses opérandes ou la dernière valeur si aucune n'est véridique. Il est principalement utilisé pour définir les valeurs par défaut.
result = operand1 || operand2;
Le || l'opérateur évalue de gauche à droite, renvoyant le premier opérande s'il est véridique ; sinon, il évalue et renvoie le deuxième opérande.
let userInput = ''; let defaultText = 'Hello, World!'; let message = userInput || defaultText; console.log(message); // Output: 'Hello, World!'
Dans cet exemple, userInput est une chaîne vide (fausse), donc defaultText est renvoyé.
let firstName = null; let lastName = 'Doe'; let name = firstName || lastName || 'Anonymous'; console.log(name); // Output: 'Doe'
Ici, firstName est nul (faux), donc lastName est renvoyé tel qu'il est véridique.
La principale limitation du || L'opérateur est qu'il traite plusieurs valeurs comme fausses, telles que 0, NaN, '', false, null et indéfini. Cela peut conduire à des résultats inattendus lorsque ces valeurs sont censées être valides.
L'opérateur Nullish Coalescing (??) est un ajout plus récent à JavaScript, introduit dans ES2020. Il est conçu pour gérer les cas où null ou indéfini sont explicitement censés être les seules valeurs nulles prises en compte.
result = operand1 ?? operand2;
Le ?? L'opérateur renvoie l'opérande de droite lorsque l'opérande de gauche est nul ou indéfini. Sinon, il renvoie l'opérande de gauche.
let userInput = ''; let defaultText = 'Hello, World!'; let message = userInput ?? defaultText; console.log(message); // Output: ''
Dans cet exemple, userInput est une chaîne vide, qui n'est ni nulle ni indéfinie, elle est donc renvoyée.
let firstName = null; let lastName = 'Doe'; let name = firstName ?? lastName ?? 'Anonymous'; console.log(name); // Output: 'Doe'
Ici, firstName est nul, donc lastName est renvoyé car il n'est ni nul ni indéfini.
let value1 = 0; let value2 = ''; let resultOR = value1 || 'default'; let resultNullish = value1 ?? 'default'; console.log(resultOR); // Output: 'default' console.log(resultNullish); // Output: 0
Dans cet exemple, 0 est considéré comme faux par le || opérateur mais est-ce une valeur valide pour le ?? opérateur.
let userInput = null; let fallbackText = 'Default Text'; let message = (userInput ?? fallbackText) || 'Fallback Message'; console.log(message); // Output: 'Default Text'
Ici, userInput est nul, donc fallbackText est utilisé par le ?? opérateur. Ensuite, le résultat est vérifié par le || opérateur, mais comme fallbackText est véridique, il est renvoyé.
Envisagez un scénario dans lequel vous devez définir des valeurs par défaut pour les propriétés d'objets imbriqués.
let userSettings = { theme: { color: '', font: null } }; let defaultSettings = { theme: { color: 'blue', font: 'Arial' } }; let themeColor = userSettings.theme.color || defaultSettings.theme.color; let themeFont = userSettings.theme.font ?? defaultSettings.theme.font; console.log(themeColor); // Output: 'blue' console.log(themeFont); // Output: 'Arial'
Dans cet exemple, userSettings.theme.color est une chaîne vide, donc defaultSettings.theme.color est utilisé. userSettings.theme.font est nul, donc defaultSettings.theme.font est utilisé.
Lorsque vous traitez des paramètres de fonction, vous souhaiterez peut-être fournir des valeurs par défaut pour les arguments manquants.
function greet(name, greeting) { name = name ?? 'Guest'; greeting = greeting || 'Hello'; console.log(`${greeting}, ${name}!`); } greet(); // Output: 'Hello, Guest!' greet('Alice'); // Output: 'Hello, Alice!' greet('Bob', 'Hi'); // Output: 'Hi, Bob!' greet(null, 'Hey'); // Output: 'Hey, Guest!'
Dans cet exemple, le paramètre name utilise le ?? opérateur pour définir une valeur par défaut de « Invité » si le nom est nul ou non défini. Le paramètre de salutation utilise le || opérateur pour définir une valeur par défaut de « Bonjour » si le message d'accueil est une valeur fausse autre que null ou non définie.
Le chaînage facultatif (?.) peut être combiné avec || et ?? pour gérer en toute sécurité les propriétés des objets profondément imbriqués.
let user = { profile: { name: 'John Doe' } }; let userName = user?.profile?.name || 'Anonymous'; let userEmail = user?.contact?.email ?? 'No Email Provided'; console.log(userName); // Output: 'John Doe' console.log(userEmail); // Output: 'No Email Provided'
Dans cet exemple, le chaînage facultatif garantit que si une partie du chemin de propriété n'existe pas, elle renvoie undéfini, évitant ainsi les erreurs. Le || et ?? les opérateurs fournissent ensuite les valeurs par défaut appropriées.
Utiliser || pour les valeurs par défaut larges :
Utiliser ?? pour des contrôles nuls précis :
Combiner les deux :
Que fait l'opérateur OU logique (||) ?
L'opérateur OU logique (||) renvoie la première valeur véridique parmi ses opérandes ou le dernier opérande si aucun n'est véridique.
Quand dois-je utiliser l'opérateur Nullish Coalescing (??) ?
Utilisez l'opérateur Nullish Coalescing (??) lorsque vous devez gérer spécifiquement null ou undefined sans traiter d'autres valeurs fausses comme 0 ou des chaînes vides comme nulles.
Puis-je utiliser les deux opérateurs ensemble ?
Oui, vous pouvez utiliser les deux || et ?? ensemble pour gérer différents types de valeurs et garantir que la logique de votre code couvre efficacement différents cas.
Comment || gérer les chaînes vides ?
Le || L'opérateur traite les chaînes vides comme fausses, il renverra donc l'opérande suivant si le premier est une chaîne vide.
L'opérateur Nullish Coalescing (??) est-il pris en charge dans tous les navigateurs ?
Le ?? L’opérateur est pris en charge dans les navigateurs et environnements modernes prenant en charge ES2020. Pour les environnements plus anciens, vous devrez peut-être utiliser un transpilateur comme Babel.
Quelles sont les différences entre || et ?? opérateurs ?
La principale différence est que || considère plusieurs valeurs comme fausses (par exemple, 0, '', false), tandis que ?? ne traite que les valeurs nulles et indéfinies comme des valeurs nulles.
Comprendre les différences entre les opérateurs Logical OR (||) et Nullish Coalescing (??) en JavaScript est crucial pour écrire du code robuste et sans bug. Le || L'opérateur est idéal pour les grands scénarios de défaut, tandis que ?? est parfait pour gérer des valeurs nulles avec précision. En utilisant ces opérateurs de manière appropriée, vous pouvez vous assurer que votre code gère efficacement divers états de données, offrant ainsi une expérience utilisateur transparente.
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!