web-dev-qa-db-fra.com

moyen fonctionnel d'itérer sur la plage (ES6 / 7)

Quelle est la meilleure façon de faire ce qui suit ci-dessous de manière plus fonctionnelle (avec ES6/ES7)

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

J'ai essayé comme,

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

mais que traduit à

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

ce qui n'est pas ce à quoi je m'attendais.

MODIFIER:

@pavlo. En effet, c'était une erreur. J'utilisais JSX, et par exemple, je veux 7 divs (non testé)

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

l’idée était donc bien de réduire le nombre de variables de temp et la sensation procédurale.

javascriptfunctional-programmingecmascript-6ecmascript-harmony
101
bsr

On peut créer un tableau vide, le remplir (sinon, map sera ignoré), puis mapper les index sur les valeurs:

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

ES7 Proposition

Avertissement: Malheureusement, je pense que la plupart des plates-formes populaires ont cessé de prendre en charge la compréhension. Voir ci-dessous pour la méthode ES6 bien supportée

Vous pouvez toujours utiliser quelque chose comme:

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

Exécuter ce code sur Firefox:

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

Cela fonctionne sur Firefox (c'était une fonctionnalité ES7 proposée), mais il a été supprimé de la spécification. IIRC, Babel 5 avec la fonction "expérimental" le supporte.

C’est votre meilleur atout, car la compréhension du tableau est utilisée à cette fin. Vous pouvez même écrire une fonction de plage pour aller avec ceci:

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

Ensuite, vous pouvez faire:

[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

Une bonne façon de faire ceci:

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

Cela produira:

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

60
Downgoat

Voici une approche utilisant des générateurs:

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

Ensuite, vous pouvez écrire

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

Une autre idée est:

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

Array(5) crée un tableau de cinq éléments non rempli. C'est ainsi que Array fonctionne quand un seul argument est donné. Nous utilisons l'opérateur de propagation pour créer un tableau avec cinq éléments non définis. Que nous pouvons ensuite cartographier. Voir http://ariya.ofilabs.com/2013/07/sequences-using-javascript-array.html .

Alternativement, nous pourrions écrire

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

ou, nous pourrions tirer parti du second argument de Array#from pour ignorer le map et écrire

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

Un bidouillage horrible que j'ai vu récemment, que je ne vous recommande pas ,

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