javascript - change - title css

¿Cuándo es útil el operador de coma?

Question

Leí this pregunta sobre el "operador de coma" en expresiones ( , ) y los documentos de MDN al respecto, pero no puedo pensar en un escenario donde sea útil.

Entonces, ¿cuándo es útil el operador de coma?

Answer 1

El operador de coma es frecuentemente útil al escribir código funcional en Javascript.

Considere este código que escribí hace un tiempo para un SPA que tenía algo así como el siguiente

const actions = _.chain(options)
                 .pairs() // 1
                 .filter(selectActions) // 2
                 .map(createActionPromise) // 3
                 .reduce((state, pair) => (state[pair[0]] = pair[1], state), {}) // 4
                 .value();

Este era un escenario bastante complejo, pero en el mundo real. Tenga paciencia conmigo mientras le explico lo que está sucediendo, y en el proceso defienda el caso del operador de coma.

Esto usa el encadenamiento de Underscore para

1. Desmonte todas las opciones pasadas a esta función usando pairs que convertirán { a: 1, b: 2} en [[''a'', 1], [''b'', 2]]

2. Esta matriz de pares de propiedades se filtra por los que se consideran como "acciones" en el sistema.

3. Luego, el segundo índice de la matriz se reemplaza con una función que devuelve una promesa que representa esa acción (usando el map )

4. Finalmente, la llamada a reduce fusionará cada "matriz de propiedades" ( [''a'', 1] ) de nuevo en un objeto final.

El resultado final es una versión transformada del argumento de options , que contiene solo las claves apropiadas y cuyos valores son consumibles por la función de llamada.

Mirando solo

.reduce((state, pair) => (state[pair[0]] = pair[1], state), {})

Puede ver que la función de reducción comienza con un estado de estado vacío, y para cada par que representa una clave y un valor, la función devuelve el mismo objeto de state después de agregar una propiedad al objeto correspondiente al par de clave / valor. Debido a la sintaxis de la función de flecha de ECMAScript 2015, el cuerpo de la función es una expresión, y como resultado, el operador de coma permite una función de "iteratee" conciso y útil "iteratee" .

Personalmente, he encontrado numerosos casos al escribir Javascript en un estilo más funcional con ECMAScript 2015 + Funciones de flecha. Habiendo dicho eso, antes de encontrar funciones de flecha (como en el momento de escribir la pregunta), nunca había usado el operador de coma de forma deliberada.

Answer 2

El operador de coma no es específico de JavaScript, está disponible en otros lenguajes como C y C ++ . Como operador binario, esto es útil cuando el primer operando, que generalmente es una expresión, tiene el efecto secundario deseado requerido por el segundo operando. Un ejemplo de wikipedia:

i = a += 2, a + b;

Obviamente, puede escribir dos líneas de códigos diferentes, pero usar la coma es otra opción y, a veces, más legible.

Answer 3

Hay algo "extraño" que se puede hacer en JavaScript llamando a una función indirectamente mediante el uso del operador de coma.

Hay una descripción larga aquí: Llamada de función indirecta en JavaScript

Al usar esta sintaxis:

(function() {
    "use strict";
  
    var global = (function () { return this || (1,eval)("this"); })();
    console.log(''Global === window should be true: '', global === window);
  
    var not_global = (function () { return this })();
    console.log(''not_global === window should be false: '', not_global === window);
  
  }());

Puede obtener acceso a la variable global porque eval funciona de manera diferente cuando se llama directamente frente a llamada indirecta.

Answer 4

Lo siguiente probablemente no sea muy útil ya que no lo escribe usted mismo, pero un minificador puede reducir el código usando el operador de coma. Por ejemplo:

if(x){foo();return bar()}else{return 1}

se convertiría:

return x?(foo(),bar()):1

El ? : ? : operador puede usarse ahora, ya que el operador de coma (hasta cierto punto) permite que dos enunciados se escriban como una sola declaración.

Esto es útil ya que permite una buena compresión (39 -> 24 bytes aquí).

Me gustaría enfatizar el hecho de que la coma en var a, b no es el operador de coma porque no existe dentro de una expresión . La coma tiene un significado especial en las declaraciones de var . a, b en una expresión se referiría a las dos variables y evaluaría a b , que no es el caso para var a, b .

Answer 5

No estoy de acuerdo con Flanagan y digo que esa coma es realmente útil y permite escribir un código más legible y elegante, especialmente cuando sabes lo que estás haciendo:

Aquí está el artículo muy detallado sobre el uso de la coma:

Varios ejemplos desde allí para la prueba de demostración:

function renderCurve() {
  for(var a = 1, b = 10; a*b; a++, b--) {
    console.log(new Array(a*b).join(''*''));
  }
}

Un generador de fibonacci:

for (
    var i=2, r=[0,1];
    i<15;
    r.push(r[i-1] + r[i-2]), i++
); 
// 0,1,1,2,3,5,8,13,21,34,55,89,144,233,377

Encuentre el primer elemento padre, análogo de la función jQuery .parent() :

function firstAncestor(el, tagName) {
    while(el = el.parentNode, el && (el.tagName != tagName.toUpperCase()));
    return el;
}

//element in http://ecma262-5.com/ELS5_HTML.htm
var a = $(''Section_15.1.1.2''); 

firstAncestor(a, ''div''); //<div class="page">

Answer 6

No he encontrado un uso práctico de eso más que eso, pero aquí hay un escenario en el que James Padolsey usa muy bien esta técnica para la detección de IE en un ciclo while:

var ie = (function(){

    var undef,
        v = 3,
        div = document.createElement(''div''),
        all = div.getElementsByTagName(''i'');

    while ( // <-- notice no while body here
        div.innerHTML = ''<!--[if gt IE '' + (++v) + '']><i></i><![endif]-->'',
        all[0]
    );

    return v > 4 ? v : undef;

}());

Estas dos líneas deben ejecutarse:

div.innerHTML = ''<!--[if gt IE '' + (++v) + '']><i></i><![endif]-->'',
all[0]

Y dentro del operador de coma, ambos son evaluados, aunque uno podría haberlos separado de algún modo.

Answer 7

Otra área donde se puede usar el operador de coma es la Ofuscación de código .

Digamos que un desarrollador escribe un código como este:

var foo = ''bar'';

Ahora, ella decide ofuscar el código. La herramienta utilizada puede cambiar el código de esta manera:

var Z0b=(45,87)>(195,3)?''bar'':(54,65)>(1,0)?'''':''baz'';// Z0b == ''bar''

Demostración: http://jsfiddle.net/uvDuE/

Answer 8

Otro uso para el operador de coma es ocultar los resultados que no te importan en la consola o repl, simplemente como una conveniencia.

Por ejemplo, si evalúa myVariable = aWholeLotOfText en el repl o en la consola, imprimirá todos los datos que acaba de asignar. Puede tratarse de páginas y páginas, y si prefiere no verlo, puede evaluar myVariable = aWholeLotOfText, ''done'' , y la repl / console simplemente imprimirá ''done''.

Oriel señala correctamente ^† que las funciones personalizadas de toString() o get() pueden incluso hacer que esto sea útil.

Answer 9

Un caso típico que termino usándolo es durante el análisis opcional de argumentos. Creo que lo hace más legible y más conciso para que el análisis de argumentos no domine el cuerpo de la función.

/**
 * @param {string} [str]
 * @param {object} [obj]
 * @param {Date} [date]
 */
function f(str, obj, date) {
  // handle optional arguments
  if (typeof str !== "string") date = obj, obj = str, str = "default";
  if (obj instanceof Date) date = obj, obj = {};
  if (!(date instanceof Date)) date = new Date();

  // ...
}

Answer 10

El operador de coma te permite poner múltiples expresiones en un lugar donde se espera una expresión. El valor resultante de múltiples expresiones separadas por una coma será el valor de la última expresión separada por comas.

No lo uso muy a menudo porque no hay muchas situaciones en las que se espera más de una expresión y no hay una forma menos confusa de escribir el código que usar el operador de coma. Una posibilidad interesante es al final de un bucle for cuando desea que se incremente más de una variable:

// j is initialized to some other value
// as the for loop executes both i and j are incremented
// because the comma operator allows two statements to be put in place of one
for (var i = 0; i < items.len; i++, j++) {
    // loop code here that operates on items[i] 
    // and sometimes uses j to access a different array
}

Aquí puede ver que i++, j++ se puede colocar en un lugar donde se permite una expresión. En este caso particular, las expresiones múltiples se usan para los efectos secundarios, por lo que no importa que las expresiones compuestas tomen el valor de la última, pero hay otros casos en los que realmente podría importar.