web-dev-qa-db-fra.com

Convertir ES6 Iterable en tableau

Supposons que vous ayez un Javascript ES6 Iterable de type tableau qui, à votre connaissance, sera de longueur limitée. Quel est le meilleur moyen de le convertir en un tableau Javascript?

La raison en est que beaucoup de bibliothèques js telles que underscore et lodash ne prennent en charge que les tableaux, donc si vous souhaitez utiliser l’une de leurs fonctions sur un Iterable, il faut d’abord le convertir en tableau.

En python, vous pouvez simplement utiliser la fonction list (). Existe-t-il un équivalent dans ES6?

javascriptarraysecmascript-6iterablebabeljs
61
Michael Bylstra

Vous pouvez utiliser Array.from ou l'opérateur spread .

Exemple:

let x = new Set([ 1, 2, 3, 4 ]);

let y = Array.from(x);
console.log(y); // = [ 1, 2, 3, 4 ]

let z = [ ...x ];
console.log(z); // = [ 1, 2, 3, 4 ]

105
XåpplI'-I0llwlg'I -

Vous pouvez utiliser la méthode Array.from , qui est ajoutée à ES6, mais ne prend en charge que les tableaux et les objets itérables tels que Cartes et ensembles (également dans ES6). Pour les objets ordinaires, vous pouvez utiliser la méthode toArray de Underscore ou la méthode toArray de lodash, car les deux bibliothèques prennent réellement en charge les objets, pas seulement les tableaux. Si vous utilisez déjà le trait de soulignement ou le lodash, ils peuvent heureusement gérer le problème pour vous, tout en ajoutant divers concepts fonctionnels tels que la carte et la réduction pour vos objets.

10
Colin Hartwig

Résumé:

  • Array.from(), il prend une valeur itérable comme en entrée et renvoie un tableau de la valeur itérable.
  • Opérateur Spread: ... en combinaison avec un littéral de tableau.

const map = new Map([[ 1, 'one' ],[ 2, 'two' ]]);

const newArr1  = [ ...map  ];  // create an Array literal and use the spread syntax on it
const newArr2 = Array.from( map );  // 

console.log(newArr1, newArr2);

Avertissement lors de la copie de tableaux:

Soyez conscient du fait que, via ces méthodes, ci-dessus, seule une copie superficielle est créée lorsque nous voulons copier un tableau. Un exemple permettra de clarifier le problème potentiel:

let arr = [1, 2, ['a', 'b']];

let newArr = [ ...arr ];

console.log(newArr);

arr[2][0] = 'change';

console.log(newArr);

Ici, à cause du tableau imbriqué, la référence est copiée et aucun nouveau tableau n'est créé. Par conséquent, si nous convertissons le tableau imbriqué de l'ancien tableau, cette modification sera reflétée dans le nouveau tableau (car ils font référence au même tableau, la référence a été copiée).

Solution de mise en garde:

Nous pouvons résoudre le problème des copies peu profondes en créant un clone profond du tableau en utilisant JSON.parse(JSON.stringify(array)). Par exemple:

let arr = [1, 2, ['a', 'b']]

let newArr = Array.from(arr);

let deepCloneArr = JSON.parse(JSON.stringify(arr));

arr[2][0] = 'change';

console.log(newArr, deepCloneArr)

4
Willem van der Veen

L'approche suivante est testée pour les cartes:

const MyMap = new Map([
  ['a', 1],
  ['b', 2],
  ['c', 3]
]);

const MyArray = [...MyMap].map(item => {
  return {[item[0]]: item[1]}
});

console.info( MyArray ); //[{"a", 1}, {"b", 2}, {"c": 3}]
0
Roman