Per què hauríeu de deixar d'utilitzar la paraula clau 'else' a JavaScript

Bloc

Per què hauríeu de deixar d'utilitzar la paraula clau 'else' a JavaScript

If-else Les paraules clau integrades en gairebé tots els llenguatges de programació i la lògica condicional simple són fàcils d’entendre per tothom. Si sou programador, ja sabeu else paraula clau. Però si sou un bon programador, no utilitzeu aquesta paraula clau. Un dels errors més grans en què vaig caure quan vaig començar va ser un ús excessiu de la paraula clau else en escriure condicionals. Deixa'm explicar!



Per què

Penseu en què significa més, vol dir si A llavors això, si no A llavors això ;. Això no és un problema si A és binari: l'espai del problema només és de 2 casos. Però si A és una combinació de variables binàries o conté variables més grans, l’espai negatiu del problema pot ser inesperadament gran i difícil d’entendre, provar i mantenir. Per evitar if / else if, utilitzar només les sentències if, passar el temps per assegurar que els criteris d’entrada del vostre grup de if s’excloguin mútuament perquè les respostes no depenguin de l’ordre d’execució.






  • Promou el carril principal d’execució, amb alguns casos especials.
  • Ens obliga a escriure totes les condicions necessàries per processar les dades al principi de cada funció.
  • Utilitzeu un switch — case declaració.
  • Utilitzeu el polimorfisme per manejar casos condicionals complexos, fent que el codi sigui més clar com Patró d'estat .

Exemple

El nostre exemple és un semàfor (és a dir, un objecte TrafficLight) amb 3 estats diferents: vermell, groc i verd, cadascun amb el seu propi conjunt de regles. Les regles són així:



  • Digueu que el semàfor és vermell. Després d'un retard, l'estat Vermell canvia a l'estat Verd.
  • Després, després d’un altre retard, l’estat Verd canvia a l’estat Groc.
  • Després d'un breu retard, l'estat Groc canvia a Vermell.
  • I sense parar.

No utilitzeu paraules clau if-else

const LightState = { GREEN: 0, YELLOW: 1, RED: 2 } var TrafficLight = function () { var count = 0 // default state = red var currentState = 0; this.change = function(state) { if (count++ >= 10 ) return currentState = state this.go(currentState) } this.go = function(state) { if (currentState == LightState.GREEN) { console.log('Green --> for 1 minute') this.change(LightState.YELLOW) } else if (currentState == LightState.YELLOW) { console.log('Yellow --> for 10 seconds') this.change(LightState.RED) } else if (currentState == LightState.RED) { console.log('Red --> for 1 minute'); this.change(LightState.GREEN) } else { throw Error('Invalid State') } } this.start = function() { this.change(LightState.GREEN) } }

La forma senzilla

Només eliminem altres paraules clau i tornem a escriure totes les condicions.



this.go = function (state) { if (currentState == LightState.GREEN) { console.log('Green --> for 1 minute') this.change(LightState.YELLOW) } if (currentState == LightState.YELLOW) { console.log('Yellow --> for 10 seconds') this.change(LightState.RED) } if (currentState == LightState.RED) { console.log('Red --> for 1 minute'); this.change(LightState.GREEN) } if (currentState != LightState.GREEN && currentState != LightState.RED && currentState != LightState.YELLOW) { throw Error('Invalid State') } }

O podem utilitzar un switch en lloc de if-else. A switch sembla molt més net quan has de combinar casos. A if-else ràpidament es descontrolarà.






this.go = function (state) { switch (state) { case LightState.GREEN: console.log('Green --> for 1 minute') this.change(LightState.YELLOW) break case LightState.YELLOW: console.log('Yellow --> for 10 seconds') this.change(LightState.RED) break case LightState.RED: console.log('Red --> for 1 minute'); this.change(LightState.GREEN) break default: throw Error('Invalid State') } }

Podem utilitzar el patró d’estat per eliminar totes les paraules clau if-else d’aquests codis

Aquí introduïm moltes instruccions de blocs / commutadors if-else per protegir les diverses condicions. El patró d’estat¹ s’adapta a aquest context. Permet que els vostres objectes es comportin de manera diferent en funció de l'estat actual i podeu definir comportaments específics de l'estat. En aquest patró, comencem a pensar en termes dels possibles estats del nostre semàfor i segregueu el codi en conseqüència.

  • Per a un comportament específic de l’estat, teniu objectes separats.
  • Les operacions definides al semàfor deleguen el comportament a l'objecte de l'estat actual.
  • Els estats estan desencadenant ells mateixos transicions estatals.

Semàfor: Green (1 minute) → Yellow (10 seconds)→ Red (1 minute)

var TrafficLight = function () { var count = 0 // default state = green var currentState = new Green(this); this.change = function (state) { // limits number of changes if (count++ >= 10) return; currentState = state; currentState.go(); } this.start = function () { currentState.go(); } } var Red = function (light) { this.light = light this.go = function () { console.log(('Red --> for 1 minute')) light.change(new Green(light)); } } var Yellow = function (light) { this.light = light; this.go = function () { console.log('Yellow --> for 10 seconds') light.change(new Red(light)); } }; var Green = function (light) { this.light = light; this.go = function () { console.log('Green --> for 1 minute'); light.change(new Yellow(light)); } };

Imprimeixen la mateixa sortida que la següent

Green → for 1 minute Yellow → for 10 seconds Red → for 1 minute Green → for 1 minute Yellow → for 10 seconds Red → for 1 minute Green → for 1 minute Yellow → for 10 seconds Red → for 1 minute Green → for 1 minute Yellow → for 10 seconds

Són aquests exemples de codis dolents i codis bons. Finalment, gràcies per llegir i espero que ho hagi cobert tot.

#javascript #javascript tips #coding #programming