Comprensiones de arreglo

Ver debajo las diferencias con la vieja sintaxis de comprensión de arreglo en SpiderMonkey, basada en proposiciones para ECMAScript 4.

Sintaxis

[for (x of iterable) x]
[for (x of iterable) if (condition) x]
[for (x of iterable) for (y of iterable) x + y]

Descripción

Dentro de las comprensiones de arreglo son permitidos estos dos tipos de componentes:

• for...of
• if

La iteración for-of es siempre el primer componente. Son permitidas múltiples iteraciones for-of o sentencias if.

Ejemplos

Comprensiones de arreglo simples

[for (i of [ 1, 2, 3 ]) i*i ]; 
// [ 1, 4, 9 ]

var abc = [ "A", "B", "C" ];
[for (letters of abc) letters.toLowerCase()];
// [ "a", "b", "c" ]

Comprensiones de arreglo con sentencia if

var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ];
[for (year of years) if (year > 2000) year];
// [ 2006, 2010, 2014 ]
[for (year of years) if (year > 2000) if(year < 2010) year];
// [ 2006], lo mismo de arriba:
[for (year of years) if (year > 2000 && year < 2010) year];
// [ 2006] 

Comprensiones de arreglo comparado a map y filter

Una manera sencilla de entender la sintaxis de comprensión de arreglo, es compararla con los métodos de Array map y filter:

var numbers = [ 1, 2, 3 ];

numbers.map(function (i) { return i * i });
numbers.map(i => i*i);
[for (i of numbers) i*i ];
// todos son [ 1, 4, 9 ]

numbers.filter(function (i) { return i < 3 });
numbers.filter(i => i < 3);
[for (i of numbers) if (i < 3) i];
// todos son [ 1, 2 ]

Comprensiones de arreglo con dos arreglos

Utilizando dos iteraciones for-of para trabajar con dos arreglos:

var numbers = [ 1, 2, 3 ];
var letters = [ "a", "b", "c" ];

var cross = [for (i of numbers) for (j of letters) i+j];
// [ "1a", "1b", "1c", "2a", "2b", "2c", "3a", "3b", "3c" ]

var grid = [for (i of numbers) [for (j of letters) i+j]];
// [
//  ["1a", "1b", "1c"],
//  ["2a", "2b", "2c"],
//  ["3a", "3b", "3c"]
// ]

[for (i of numbers) if (i > 1) for (j of letters) if(j > "a") i+j]
// ["2b", "2c", "3b", "3c"], lo mismo de arriba:

[for (i of numbers) for (j of letters) if (i > 1) if(j > "a") i+j]
// ["2b", "2c", "3b", "3c"]

[for (i of numbers) if (i > 1) [for (j of letters) if(j > "a") i+j]]
// [["2b", "2c"], ["3b", "3c"]], no lo mismo de arriba:

[for (i of numbers) [for (j of letters) if (i > 1) if(j > "a") i+j]]
// [[], ["2b", "2c"], ["3b", "3c"]]

Especificaciones

Estuvo inicialmente en el borrador de ECMAScript 6, pero se eliminó en la revisión 27 (Agosto 2014). Por favor ver revisiones mas viejas de ES6 para semánticas de especificación. Se espera que haya una versión actualizada en un nuevo borrador de ES2016 / ES7.

Compatibilidad con navegadores

Notas de implementación específicas de SpiderMonkey

• let como identificador no es soportado ya que let solo está disponible actualmente en la versión 1.7 de JS y etiquetas de rutinas XUL.
• Desestructurar en comprensiones todavía no está soportado (bug 980828).

Diferencias con las comprensiones de los viejos JS1.7/JS1.8

• Las comprensiones de ES7 crean un ámbito por nodo "for" en lugar de tomar la comprensión como un todo.
  • Viejo: [()=>x for (x of [0, 1, 2])][1]() // 2
  • Nuevo: [for (x of [0, 1, 2]) ()=>x][1]() // 1, cada iteración crea un enlace fresco para x.
  • Las comprensiones de ES7 empiezan con "for" en lugar de la expresión de asignación.
    • Viejo: [i * 2 for (i of numbers)]
    • Nuevo: [for (i of numbers) i * 2]
• Las comprensiones de ES7 pueden tener múltiples componentes if y for.
• Las comprensiones de ES7 solo trabajan con for...of y no con iteraciones for...in.

Ver también

• for...of
• Generator comprehensions