Comment convertir des clés de carte en tableau?

237

Disons que j'ai la carte suivante:

let myMap = new Map().set('a', 1).set('b', 2);

Et je veux obtenir ['a', 'b'] sur la base de ce qui précède. Ma solution actuelle semble si longue et horrible.

let myMap = new Map().set('a', 1).set('b', 2);
let keys = [];
for (let key of myMap)
  keys.push(key);
console.log(keys);

Il doit y avoir une meilleure façon, non?

Lilleman
la source
17
Peut-être Array.from(Map.keys()).
Dan D.
5
@gK. Cela ne fonctionne pas avec Map.
pawel
@pawel Oh désolé alors!
hamnix
Array.from(Map.values())- si au cas où, vous avez besoin de valeurs, au lieu de clés.
Manohar Reddy Poreddy

Réponses:

436

Map.keys()renvoie un MapIteratorobjet qui peut être converti en Arrayutilisant Array.from:

let keys = Array.from( myMap.keys() );
// ["a", "b"]

EDIT: vous pouvez également convertir un objet itérable en tableau en utilisant la syntaxe étalée

let keys =[ ...myMap.keys() ];
// ["a", "b"]
pawel
la source
6
J'aime l'utilisation de l'opérateur Spread, cependant, mon transpilateur TypeScript lance this.map.values().slice is not a function. Je devrais peut-être mettre à jour.
Cody
4
@Cody, c'est parce que votre slice()invocation est exécutée avant l'opérateur de propagation. Essayez[ ... Array.from(map.values()).slice(0) ]
mgthomas99
5
TypeScript 2.7.2 dit ceci: const fooMap = new Map<number, string>(); const fooArray = [...fooMap.keys()];le texte suivant: TS2461: Le type 'IterableIterator <numéro>' n'est pas un type de tableau. Ce n'est donc pas autorisé dans TypeScript. Array.from fonctionne comme prévu.
Stefan Rein
L'opérateur de propagation @StefanRein Typescript a la même apparence, mais n'est pas équivalent à la propagation ES6, car il ne fonctionne qu'avec les types Array et Object, tandis qu'ES6 fonctionne avec n'importe quel itérable. Vous pouvez par exemple faire ..."abc"pour entrer ["a","b","c"]dans ES6, ce qui n'est pas possible dans TS.
pawel
@pawel ..."abc"ne fonctionne pas non plus ...("abc")dans la console Chrome, qui prend en charge ES6?
Stefan Rein
15

Vous pouvez utiliser l'opérateur d'étalement pour convertir l' itérateur Map.keys () dans un tableau.

let myMap = new Map().set('a', 1).set('b', 2).set(983, true)
let keys = [...myMap.keys()]
console.log(keys)

Fernando Carvajal
la source
6

Array.from(myMap.keys()) ne fonctionne pas dans les scripts d'application google.

Essayer de l'utiliser entraîne l'erreur TypeError: Cannot find function from in object function Array() { [native code for Array.Array, arity=1] }.

Pour obtenir une liste de clés dans GAS, procédez comme suit:

var keysList = Object.keys(myMap);
Joman68
la source
Celui-ci fonctionne pour moi, et la première réponse n'a pas fonctionné. Je n'utilise pas Google ... mais j'ai continué à recevoir une erreur disant que la map.keys()valeur de retour n'est pas itérable.
Azurespot
5

J'ai besoin de quelque chose de similaire avec la forme réactive angulaire:

let myMap = new Map().set(0, {status: 'VALID'}).set(1, {status: 'INVALID'});
let mapToArray = Array.from(myMap.values());
let isValid = mapToArray.every(x => x.status === 'VALID');
linfluX
la source
2

Pas exactement la meilleure réponse à la question, mais cette astuce new Array(...someMap)m'a sauvé quelques fois lorsque j'ai besoin de la clé et de la valeur pour générer le tableau nécessaire. Par exemple, lorsqu'il est nécessaire de créer des composants réactifs à partir d'un objet Map en fonction des valeurs de clé et de valeur.

  let map = new Map();
  map.set("1", 1);
  map.set("2", 2);
  console.log(new Array(...map).map(pairs => pairs[0])); -> ["1", "2"]
Tkoma
la source
1

OK, allons un peu plus loin et commençons par ce qui est Map pour ceux qui ne connaissent pas cette fonctionnalité en JavaScript ... MDN dit:

L'objet Map contient des paires clé-valeur et se souvient de l'ordre d'insertion d'origine des clés.
Toute valeur (à la fois objets et valeurs primitives) peut être utilisée comme clé ou comme valeur.

Comme vous l'avez mentionné, vous pouvez facilement créer une instance de Map en utilisant un nouveau mot-clé ... Dans votre cas:

let myMap = new Map().set('a', 1).set('b', 2);

Voyons donc ...

La façon dont vous avez mentionné est une bonne façon de le faire, mais oui, il existe des moyens plus concis de le faire ...

La carte a de nombreuses méthodes que vous pouvez utiliser, comme celle set()que vous avez déjà utilisée pour attribuer les valeurs clés ...

L'un d'eux est celui keys()qui retourne toutes les clés ...

Dans votre cas, il renverra:

MapIterator {"a", "b"}

et vous les convertissez facilement en tableau en utilisant des méthodes ES6 , comme l'opérateur de propagation ...

const b = [...myMap.keys()];
Alireza
la source