Comment convertir un objet simple en une carte ES6?

Pour une raison quelconque, je ne trouve pas cette chose simple dans la documentation MDN (peut-être que je la manque).

Je m'attendais à ce que cela fonctionne:

const map = new Map({foo: 'bar'});

map.get('foo'); // 'bar'

... mais la première ligne jette TypeError: (var)[Symbol.iterator] is not a function

Comment créer une carte à partir d'un objet ordinaire? Dois-je vraiment d'abord le convertir en un tableau de tableaux de paires clé-valeur?

Oui, le Mapconstructeur prend un tableau de paires clé-valeur.

Object.entriesest une nouvelle méthode statique d'objets disponible dans ES2017 (19.1.2.5) .

const map = new Map(Object.entries({foo: 'bar'}));

map.get('foo'); // 'bar'

Il est actuellement implémenté dans Firefox 46+ et Edge 14+ et les versions plus récentes de Chrome

Si vous avez besoin de prendre en charge des environnements plus anciens et que la transpilation n'est pas une option pour vous, utilisez un polyfill, tel que celui recommandé par georg:

Object.entries = typeof Object.entries === 'function' ? Object.entries : obj => Object.keys(obj).map(k => [k, obj[k]]);

Veuillez voir la réponse de nils en utilisantObject.entries et / ou la réponse de bergi en utilisant une fonction de générateur . Bien que Object.entriesn'étant pas encore dans les spécifications lorsque la question a été posée, elle était à l'étape 4 , donc sûr à polyfill et à utiliser même en avril 2016 (juste). (Plus d'informations sur les étapes ici .) Et les fonctions du générateur étaient dans ES2015. L'OP a spécifiquement demandé d'éviter les intermédiaires, et bien que le générateur n'évite pas complètement cela, il fait un meilleur travail que le ci-dessous ou (légèrement) Object.enties.

FWIW, en utilisant Object.entries:

• Crée un tableau de [name, value]tableaux à passernew Map
• Le Mapconstructeur appelle une fonction sur le tableau pour obtenir un itérateur; le tableau crée et renvoie un objet interateur de tableau.
• Le Mapconstructeur utilise cet objet itérateur pour obtenir les entrées (les [name, value]tableaux) et construire la carte

Utilisation du générateur:

• Crée un objet générateur à la suite de l'appel de la fonction générateur
• Le Mapconstructeur appelle une fonction sur cet objet générateur pour en obtenir un itérateur; le rendement de l' objet générateur lui - même
• Le Mapconstructeur utilise l'objet générateur (comme itérateur) pour récupérer les entrées (les [name, value]tableaux) et construire la carte

Donc: un intermédiaire en moins (le tableau de Object.entries).

Cependant, l'utilisation Object.entriesest plus simple et la création de ce tableau n'est pas un problème 99,999% du temps. Alors vraiment, l'un ou l'autre. Mais ils sont tous les deux meilleurs que ceux ci-dessous. :-)

Réponse originale:

Pour initialiser a Map, vous pouvez utiliser n'importe quel itérateur qui renvoie des paires clé / valeur sous forme de tableaux, comme un tableau de tableaux:

const map = new Map([
    ['foo', 'bar']
]);

Il n'y a pas de conversion intégrée d'objet en carte, mais c'est facile à faire avec Object.keys:

const map = new Map();
let obj = {foo: 'bar'};
Object.keys(obj).forEach(key => {
    map.set(key, obj[key]);
});

Vous pouvez, bien sûr, vous donner une fonction de travailleur pour gérer cela:

function buildMap(obj) {
    let map = new Map();
    Object.keys(obj).forEach(key => {
        map.set(key, obj[key]);
    });
    return map;
}

ensuite

const map = buildMap({foo: 'bar'});

Ou voici une version plus l33t (est-ce toujours une chose?):

function buildMap(obj) {
    return Object.keys(obj).reduce((map, key) => map.set(key, obj[key]), new Map());
}

(Oui, Map#setrenvoie la référence de la carte. Certains diront qu'il s'agit d'un abus de reduce.)

Ou nous pouvons vraiment exagérer sur l'obscurité:

const buildMap = o => Object.keys(o).reduce((m, k) => m.set(k, o[k]), new Map());

Non, je ne ferais jamais ça pour de vrai. :-)

Dois-je vraiment d'abord le convertir en un tableau de tableaux de paires clé-valeur?

Non, un itérateur de tableaux de paires clé-valeur suffit. Vous pouvez utiliser ce qui suit pour éviter de créer le tableau intermédiaire:

function* entries(obj) {
    for (let key in obj)
        yield [key, obj[key]];
}

const map = new Map(entries({foo: 'bar'}));
map.get('foo'); // 'bar'

La réponse de Nils décrit comment convertir des objets en cartes, ce que j'ai trouvé très utile. Cependant, l'OP se demandait également où se trouvaient ces informations dans la documentation MDN. Bien qu'il ne soit peut-être pas là lorsque la question a été initialement posée, elle se trouve maintenant sur la page MDN pour Object.entries () sous l'en-tête Conversion d'un objet en carte qui indique:

Conversion d'un objet en carte

Le new Map()constructeur accepte un itérable de entries. Avec Object.entries, vous pouvez facilement convertir de Objecten Map:

const obj = { foo: 'bar', baz: 42 }; 
const map = new Map(Object.entries(obj));
console.log(map); // Map { foo: "bar", baz: 42 }

const myMap = new Map(
    Object
        .keys(myObj)
        .map(
            key => [key, myObj[key]]
        )
)

Vous pouvez également utiliser la méthode lodash toPairs :

const _ = require('lodash');
const map = new Map(_.toPairs({foo: 'bar'}));

ES6

convertir un objet en carte:

const objToMap = (o) => new Map(Object.entries(o));

convertir la carte en objet:

const mapToObj = (m) => [...m].reduce( (o,v)=>{ o[v[0]] = v[1]; return o; },{} )

Remarque: la fonction mapToObj suppose que les clés de mappage sont des chaînes (échoueront sinon)

Avec l'aide de quelques JQuery,

const myMap = new Map();
$.each( obj, function( key, value ) {
myMap[key] = value;
});