javascript - infinito - forma funcional de iterar sobre el rango(ES6/7)

do while javascript ejemplo

Question

Esta pregunta ya tiene respuestas aquí :

Cerrado hace 4 años .

¿Existe un mecanismo para repetir x veces en ES6 (ECMAScript 6) sin variables mutables? (15 respuestas)

¿Cuál es la mejor manera de hacer lo siguiente de una manera más funcional (con ES6 / ES7)

let cols = [];
for (let i =0; i <= 7; i++) {
   cols.push(i * i);
}
return cols;

Lo intenté como

return [ ...7 ].map(i => {
  return i * i;
});

pero eso se tradujo en

[].concat(7).map(function (n) {
  return n * n;
});

que no es lo que esperaba

EDITAR:

@pavlo. De hecho, eso fue un error. Estaba usando JSX, y por ejemplo, quiero 7 divs, (sin probar)

let cols = [];
    for (let i =0; i <= 7; i++) {
       cols.push(<div id={i}> ...  </div>)
    }
    return cols;

Por lo tanto, la idea era reducir el número de variables temporales y la sensación de procedimiento.

Answer 1

Propuesta ES7

Advertencia: Desafortunadamente, creo que las plataformas más populares han dejado de admitir la comprensión. Vea a continuación el método ES6 bien soportado

Siempre puedes usar algo como:

[for (i of Array(7).keys()) i*i];

Ejecutando este código en Firefox:

[0, 1, 4, 9, 16, 25, 36]

Esto funciona en Firefox (era una característica propuesta de ES7), pero se ha eliminado de la especificación. IIRC, Babel 5 con "experimental" habilitado lo admite.

Esta es su mejor opción, ya que la comprensión de matriz se usa solo para este propósito. Incluso puede escribir una función de rango para acompañar esto:

var range = (u, l = 0) => [ for( i of Array(u - l).keys() ) i + l ]

Entonces puedes hacer:

[for (i of range(5)) i*i] // 0, 1, 4, 9, 16, 25
[for (i of range(5,3)) i*i] // 9, 16, 25

ES6

Una buena manera de hacer esto:

[...Array(7).keys()].map(i => i * i);
Array(7).fill().map((_,i) => i*i);
[...Array(7)].map((_,i) => i*i);

Esto generará:

[0, 1, 4, 9, 16, 25, 36]

Answer 2

Aquí hay un enfoque usando generadores:

function* square(n) {
    for (var i = 0; i < n; i++ ) yield i*i;
}

Entonces puedes escribir

console.log(...square(7));

Otra idea es:

[...Array(5)].map((_, i) => i*i)

Array(5) crea una matriz de cinco elementos sin llenar. Así es como funciona Array cuando se le da un único argumento. Usamos el operador de propagación para crear una matriz con cinco elementos indefinidos. Que luego podemos mapear. Ver http://ariya.ofilabs.com/2013/07/sequences-using-javascript-array.html .

Alternativamente, podríamos escribir

Array.from(Array(5)).map((_, i) => i*i)

o podríamos aprovechar el segundo argumento de Array#from para omitir el map y escribir

Array.from(Array(5), (_, i) => i*i)

Un truco horrible que vi recientemente, que no recomiendo que uses, es

[...1e4+''''].map((_, i) => i*i)

Answer 3

Se puede crear una matriz vacía, llenarla (de lo contrario, el mapa lo omitirá) y luego asignar índices a valores:

Array(8).fill().map((_, i) => i * i);