javascript - hacer - switch syntax js

Switch de Javascript vs. if... else si... else

Question

Chicos, tengo un par de preguntas:

1. ¿Hay una diferencia de rendimiento en JavaScript entre una instrucción switch y un if...else ?
2. Si es así, ¿por qué?
3. ¿El comportamiento del switch y if...else diferente en todos los navegadores? (Firefox, IE, Chrome, Opera, Safari)

El motivo para hacer esta pregunta es que parece que obtengo un mejor rendimiento en una declaración de switch con aproximadamente 1000 casos en Firefox.

Editado Desafortunadamente, este no es mi código, el Javascript se está produciendo en el servidor de una biblioteca compilada y no tengo acceso al código. El método que produce el javascript se llama

CreateConditionals(string name, string arrayofvalues, string arrayofActions)

note arrayofvalues es una lista separada por comas.

lo que produce es

function [name] (value) {
  if (value == [value from array index x]) {
     [action from array index x]
  }
}

Nota: donde [name] = el nombre pasó a la función de servidor

Ahora cambié la salida de la función para insertarla en un área de texto, escribí un código JavaScript para analizar a través de la función y lo convertí en un conjunto de declaraciones de case .

finalmente ejecuto la función y funciona bien, pero el rendimiento difiere en IE y Firefox.

Answer 1

¿Existe una diferencia de preformance en Javascript entre una instrucción switch y un if ... else if .... else?

No lo creo, el switch es útil / corto si quieres evitar múltiples condiciones if-else .

¿Es el comportamiento del switch y si ... else si ... else diferente en todos los navegadores? (Firefox, IE, Chrome, Opera, Safari)

El comportamiento es el mismo en todos los navegadores :)

Answer 2

1. El banco de trabajo puede dar lugar a algunas diferencias muy pequeñas en algunos casos, pero la forma de procesamiento depende del navegador de todos modos por lo que no vale la pena molestarse
2. Debido a las diferentes formas de procesamiento
3. No se puede llamar un navegador si el comportamiento sería diferente de todos modos

Answer 3

1. Si hay una diferencia, nunca será lo suficientemente grande como para ser notado.
2. N / A
3. No, todos funcionan de manera idéntica.

Básicamente, use lo que sea que haga que el código sea más legible. Definitivamente hay lugares donde uno u otro constructo lo hace más limpio, más legible y más fácil de mantener. Esto es mucho más importante que quizás guardar unos nanosegundos en código JavaScript.

Answer 4

A veces es mejor no usar ninguna de las dos cosas. Por ejemplo, en una situación de "despacho", Javascript te permite hacer las cosas de una manera completamente diferente:

function dispatch(funCode) {
  var map = {
    ''explode'': function() {
      prepExplosive();
      if (flammable()) issueWarning();
      doExplode();
    },

    ''hibernate'': function() {
      if (status() == ''sleeping'') return;
      // ... I can''t keep making this stuff up
    },
    // ...
  };

  var thisFun = map[funCode];
  if (thisFun) thisFun();
}

Configurar las ramificaciones de múltiples vías creando un objeto tiene muchas ventajas. Puede agregar y eliminar funcionalidades dinámicamente. Puede crear la tabla de envío a partir de los datos. Puedes examinarlo programáticamente. Puede construir los manejadores con otras funciones.

Existe la sobrecarga adicional de una llamada a función para llegar al equivalente de un "caso", pero la ventaja (cuando hay muchos casos) de una búsqueda de hash para encontrar la función para una tecla en particular.

Answer 5

Además de la sintaxis, un interruptor puede implementarse utilizando un árbol que lo convierte en O(log n) , mientras que un if / else debe implementarse con un enfoque de procedimiento O(n) . Con mayor frecuencia, ambos se procesan procesalmente y la única diferencia es la sintaxis, y además, ¿realmente importa ?, a menos que de todos modos estés escribiendo estáticamente 10k casos de if / else.

Answer 6

La diferencia de rendimiento entre un switch y if...else if...else es pequeño, básicamente hacen el mismo trabajo. Una diferencia entre ellos que puede hacer la diferencia es que la expresión para probar solo se evalúa una vez en un switch mientras se evalúa para cada if . Si es costoso evaluar la expresión, hacerlo una vez es, por supuesto, más rápido que hacerlo cien veces.

La diferencia en la implementación de esos comandos (y todos los scripts en general) difiere bastante entre los navegadores. Es común ver diferencias de rendimiento bastante grandes para el mismo código en diferentes navegadores.

Como casi no se puede evaluar el rendimiento de todos los códigos en todos los navegadores, debe elegir el código que mejor se adapte a sus actividades, y tratar de reducir la cantidad de trabajo realizado en lugar de optimizar la forma en que se realiza.

Answer 7

Respondiendo en generalidades:

1. Sí, por lo general.
2. Ver más información aquí
3. Sí, debido a que cada uno tiene un motor de procesamiento de JS diferente, sin embargo, al ejecutar una prueba en el sitio siguiente, el interruptor siempre realizó el if, elseif en una gran cantidad de iteraciones.

Sitio de prueba

Answer 8

Resulta que if-else si generalmente es más rápido que el interruptor

http://jsperf.com/switch-if-else/46

Answer 9

La respuesta de Pointy sugiere el uso de un objeto literal como una alternativa para switch o if / else . También me gusta este enfoque, pero el código en la respuesta crea un nuevo objeto de map cada vez que se llama a la función de dispatch :

function dispatch(funCode) {
  var map = {
    ''explode'': function() {
      prepExplosive();
      if (flammable()) issueWarning();
      doExplode();
    },

    ''hibernate'': function() {
      if (status() == ''sleeping'') return;
      // ... I can''t keep making this stuff up
    },
    // ...
  };

  var thisFun = map[funCode];
  if (thisFun) thisFun();
}

Si el map contiene una gran cantidad de entradas, esto puede generar una sobrecarga significativa. Es mejor configurar el mapa de acción solo una vez y luego usar el mapa ya creado cada vez, por ejemplo:

var actions = {
    ''explode'': function() {
        prepExplosive();
        if( flammable() ) issueWarning();
        doExplode();
    },

    ''hibernate'': function() {
        if( status() == ''sleeping'' ) return;
        // ... I can''t keep making this stuff up
    },
    // ...
};

function dispatch( name ) {
    var action = actions[name];
    if( action ) action();
}