Parlons des compétences d'utilisation du jugement conditionnel JavaScript

Cet article vous apporte des connaissances pertinentes sur JavaScript. Il parle principalement des compétences d'utilisation du jugement conditionnel JavaScript. Les amis intéressés peuvent jeter un œil ci-dessous.

Cet article explique comment écrire des jugements conditionnels plus simples en JavaScript pour vous aider à écrire un code plus concis. Adresse du code source

Supposons que nous ayons une fonction qui convertit les valeurs de couleur en codage hexadécimal.

function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === 'slate') {
      return '#64748b'
    } else if (color === 'gray') {
      return '#6b7280'
    } else if (color === 'red') {
      return '#ef4444'
    } else if (color === 'orange') {
      return '#f97316'
    } else if (color === 'yellow') {
      return '#eab308'
    } else if (color === 'green') {
      return '#22c55e'
    } else {
      return '#ffffff'
    }
  } else {
    return '#ffffff'
  }
}

La fonction de cette fonction est très simple, elle consiste à transmettre la chaîne de couleur puis à renvoyer l'hexadécimal correspondant. Si le transmis n'est pas une chaîne, ou si rien n'est transmis, alors l'hexadécimal blanc est renvoyé.

Ensuite, nous commencerons à optimiser ce code.

Évitez d'utiliser des chaînes directement comme conditions

Il y a un problème avec l'utilisation de chaînes directement comme conditions, c'est-à-dire que ce sera embarrassant lorsque nous ferons des fautes d'orthographe.

convertToHex("salte")

Pour éviter cette erreur, nous pouvons utiliser des constantes.

const Colors = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
function convertToHex(color) {
  if (typeof color === 'string') {
    if (color === Colors.SLATE) {
      return '#64748b'
    } else if (color === Color.GRAY) {
      return '#6b7280'
    }
    // ...
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

Si vous utilisez du texte dactylographié, vous pouvez utiliser directement les énumérations.

Utilisation d'un objet

En fait, il n'est pas difficile de trouver à partir du code ci-dessus que nous pouvons directement stocker la valeur hexadécimale dans la valeur de l'objet.

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (color in Colors) {
    return Colors[color]
  } else {
    return '#ffffff'
  }
}
convertToHex(Colors.SLATE)

De cette façon, le code sera plus concis et plus facile à lire.

Si cela ne répond pas aux attentes, revenez à l'avance

Une autre bonne pratique est que nous pouvons écrire la situation qui ne répond pas aux attentes au début de la fonction et revenir à l'avance pour éviter d'oublier de revenir. const Couleurs = { ARDOISE : '#64748b', GRIS : '#6b7280', //... } fonction convertToHex (couleur) { if (!color dans les couleurs) { renvoyer '#ffffff' } retourner les couleurs[couleur] } convertToHex(Colors.SLATE)

const Colors = {
	SLATE: '#64748b',
  GRAY: '#6b7280',
  // ...
}
function convertToHex(color) {
  if (!color in Colors) {
    return '#ffffff'
  }
  return Colors[color]
}
convertToHex(Colors.SLATE)

De cette façon, il n'y a pas besoin d'autre. En utilisant cette technique, nous pouvons éliminer beaucoup d’autres choses dans notre code.

Utiliser Map avec un objet

L'utilisation de map est plus professionnelle, car map peut stocker tout type de clé, et elle hérite de Map.prototype et possède des méthodes et des propriétés plus pratiques.

Et Object est plus pratique pour accéder aux propriétés. Nous pouvons continuer à utiliser Object pour implémenter l'énumération.

const ColorsEnum = {
	SLATE: 'slate',
  GRAY: 'gray',
  // ...
}
const Colors = new Map()
Colors.set(ColorsEnum.SLATE, '#64748b')
Colors.set(ColorsEnum.GRAY, '#6b7280')
// ...
Colors.set('DEFAULT', '#ffffff')
function convertToHex(color) {
  if (!Colors.has(color)) {
    return Colors.get('DEFAULT')
  }
  return Colors.get(color)
}
convertToHex(Colors.SLATE)

La carte peut également stocker des fonctions

Supposons que nous stockions beaucoup de couleurs, jusqu'à des milliers de couleurs, et que nous devions également prendre en charge la configuration back-end, et que les résultats puissent être obtenus grâce à une sorte de processus de calcul.

Ensuite, nous pouvons utiliser Map pour stocker des fonctions.

return Colors.get(color)()

Essayez d'éviter les expressions ternaires et les commutateurs

Bien que les expressions ternaires soient brèves, leur lisibilité est considérablement réduite s'il s'agit d'une condition à plusieurs niveaux, elle sera très difficile à lire.

switch n'a aucun avantage évident par rapport à if. Au lieu de cela, il est parfois facile de revenir, ce qui empêche le code de s'exécuter comme prévu.

Ce qui précède est une explication détaillée des techniques d'utilisation du jugement conditionnel JavaScript.

Apprentissage recommandé : "Tutoriel vidéo JavaScript"