Comprensiones de arreglo

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

This is an experimental technology, part of the ECMAScript 2016 (ES7) proposal.
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future version of browsers as the spec changes.

La sintaxis comprensión de arreglo es una expresión JavaScript, la cual permite ensamblar rápidamente un nuevo arreglo basado en otro existente. Comprensiones de arreglo o listas (o arreglos/listas por comprensión) existen en muchos lenguajes de programación y el próximo ECMAScript 7 estándar define comprensiones de arreglo para JavaScript.
 

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:

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

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico Not supported 30 (30) Not supported Not supported Not supported
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico Not supported Not supported 30.0 (30) Not supported Not supported Not supported

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

Etiquetas y colaboradores del documento

 Colaboradores en esta página: maurocarrero
 Última actualización por: maurocarrero,