Résumer les compétences d'utilisation du jugement conditionnel JavaScript

Cet article vous apporte des connaissances pertinentes sur javascript. Il vous présente principalement l'explication détaillée des techniques d'utilisation du jugement conditionnel JavaScript. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile. tout le monde. .

[Recommandations associées : tutoriel vidéo javascript, front-end web]

Cet article prend peu de temps pour présenter comment écrire des jugements conditionnels plus simples en JavaScript, vous aidant à écrire un code plus concis et plus lisible. code.

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.

Utiliser 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 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 chose. En utilisant cette technique, nous pouvons éliminer beaucoup d’autres choses dans notre code.

Utiliser Map avec Object

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, 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.

【Recommandations associées : tutoriel vidéo javascript, front-end web】

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!