Cas d'utilisation

Le cas d'utilisation consiste à convertir un tableau d'objets en une carte de hachage basée sur une chaîne ou une fonction fournie pour évaluer et utiliser comme clé dans la carte de hachage et la valeur en tant qu'objet lui-même. Un cas courant d'utilisation est la conversion d'un tableau d'objets en une carte de hachage d'objets.

Code

Voici un petit extrait en JavaScript pour convertir un tableau d'objets en une carte de hachage, indexé par la valeur d'attribut de l'objet. Vous pouvez fournir une fonction pour évaluer dynamiquement la clé de la carte de hachage (au moment de l'exécution). J'espère que cela aidera quelqu'un à l'avenir.

function isFunction(func) {
    return Object.prototype.toString.call(func) === '[object Function]';
}

/**
 * This function converts an array to hash map
 * @param {String | function} key describes the key to be evaluated in each object to use as key for hashmap
 * @returns Object
 * @Example 
 *      [{id:123, name:'naveen'}, {id:345, name:"kumar"}].toHashMap("id")
 *      Returns :- Object {123: Object, 345: Object}
 *
 *      [{id:123, name:'naveen'}, {id:345, name:"kumar"}].toHashMap(function(obj){return obj.id+1})
 *      Returns :- Object {124: Object, 346: Object}
 */
Array.prototype.toHashMap = function(key) {
    var _hashMap = {}, getKey = isFunction(key)?key: function(_obj){return _obj[key];};
    this.forEach(function (obj){
        _hashMap[getKey(obj)] = obj;
    });
    return _hashMap;
};

Vous pouvez trouver l'essentiel ici: Convertit le tableau d'objets en HashMap .

C'est assez banal à voir avec Array.prototype.reduce:

var arr = [
    { key: 'foo', val: 'bar' },
    { key: 'hello', val: 'world' }
];

var result = arr.reduce(function(map, obj) {
    map[obj.key] = obj.val;
    return map;
}, {});

console.log(result);
// { foo:'bar', hello:'world' }

Remarque: Array.prototype.reduce() est IE9 +, donc si vous devez prendre en charge des navigateurs plus anciens, vous devrez le remplir.

En utilisant ES6 Map ( assez bien pris en charge ), vous pouvez essayer ceci:

var arr = [
    { key: 'foo', val: 'bar' },
    { key: 'hello', val: 'world' }
];

var result = new Map(arr.map(i => [i.key, i.val]));

// When using TypeScript, need to specify type:
// var result = arr.map((i): [string, string] => [i.key, i.val])

// Unfortunately maps don't stringify well.  This is the contents in array form.
console.log("Result is: " + JSON.stringify([...result])); 
// Map {"foo" => "bar", "hello" => "world"}

Avec lodash , cela peut être fait en utilisant keyBy :

var arr = [
    { key: 'foo', val: 'bar' },
    { key: 'hello', val: 'world' }
];

var result = _.keyBy(arr, o => o.key);

console.log(result);
// Object {foo: Object, hello: Object}

Utilisation d'ES6 spread + Object.assign:

array = [{key: 'a', value: 'b', redundant: 'aaa'}, {key: 'x', value: 'y', redundant: 'zzz'}]

const hash = Object.assign({}, ...array.map(s => ({[s.key]: s.value})));

console.log(hash) // {a: b, x: y}

Utilisation de l'opérateur d'étalement:

const result = arr.reduce(
    (accumulator, target) => ({ ...accumulator, [target.key]: target.val }),
    {});

Démonstration de l'extrait de code sur jsFiddle .

Vous pouvez utiliser Array.prototype.reduce () et la carte JavaScript réelle à la place juste un objet JavaScript .

let keyValueObjArray = [
  { key: 'key1', val: 'val1' },
  { key: 'key2', val: 'val2' },
  { key: 'key3', val: 'val3' }
];

let keyValueMap = keyValueObjArray.reduce((mapAccumulator, obj) => {
  // either one of the following syntax works
  // mapAccumulator[obj.key] = obj.val;
  mapAccumulator.set(obj.key, obj.val);

  return mapAccumulator;
}, new Map());

console.log(keyValueMap);
console.log(keyValueMap.size);

Quelle est la différence entre Map And Object?
Auparavant, avant l'implémentation de Map en JavaScript, Object était utilisé comme Map en raison de leur structure similaire.
Selon votre cas d'utilisation, si vous devez avoir commandé des clés, avoir besoin d'accéder à la taille de la carte ou avoir des ajouts et des suppressions fréquents de la carte, une carte est préférable.

Citation du document MDN : les
objets sont similaires aux cartes dans la mesure où ils vous permettent de définir des clés pour des valeurs, de récupérer ces valeurs, de supprimer des clés et de détecter si quelque chose est stocké sur une clé. Pour cette raison (et parce qu'il n'y avait pas d'alternatives intégrées), les objets ont été utilisés comme cartes historiquement; cependant, il existe des différences importantes qui rendent préférable l'utilisation d'une carte dans certains cas:

• Les clés d'un objet sont des chaînes et des symboles, alors qu'elles peuvent être n'importe quelle valeur pour une carte, y compris les fonctions, les objets et toute primitive.
• Les clés de la carte sont ordonnées tandis que les clés ajoutées à l'objet ne le sont pas. Ainsi, lors de son itération, un objet Map renvoie les clés par ordre d'insertion.
• Vous pouvez facilement obtenir la taille d'une carte avec la propriété size, tandis que le nombre de propriétés dans un objet doit être déterminé manuellement.
• Une carte est un itérable et peut donc être directement itéré, alors que l'itération sur un objet nécessite d'obtenir ses clés d'une certaine manière et de les itérer.
• Un objet a un prototype, il y a donc des clés par défaut dans la carte qui pourraient entrer en collision avec vos clés si vous ne faites pas attention. Depuis ES5, cela peut être contourné en utilisant map = Object.create (null), mais cela est rarement fait.
• Une carte peut mieux fonctionner dans les scénarios impliquant l'ajout et la suppression fréquents de paires de clés.

Vous pouvez utiliser la nouvelle Object.fromEntries()méthode.

Exemple:

const array = [
   {key: 'a', value: 'b', redundant: 'aaa'},
   {key: 'x', value: 'y', redundant: 'zzz'}
]

const hash = Object.fromEntries(
   array.map(e => [e.key, e.value])
)

console.log(hash) // {a: b, x: y}

Version es2015:

const myMap = new Map(objArray.map(obj => [ obj.key, obj.val ]));

C'est ce que je fais en TypeScript j'ai une petite bibliothèque d'utils où je mets des choses comme ça

export const arrayToHash = (array: any[], id: string = 'id') => 
         array.reduce((obj, item) =>  (obj[item[id]] = item , obj), {})

usage:

const hash = arrayToHash([{id:1,data:'data'},{id:2,data:'data'}])

ou si vous avez un identifiant autre que 'id'

const hash = arrayToHash([{key:1,data:'data'},{key:2,data:'data'}], 'key')

Il existe de meilleures façons de le faire, comme expliqué par d'autres affiches. Mais si je veux m'en tenir à JS pur et à l'ancienne, alors voici:

var arr = [
    { key: 'foo', val: 'bar' },
    { key: 'hello', val: 'world' },
    { key: 'hello', val: 'universe' }
];

var map = {};
for (var i = 0; i < arr.length; i++) {
    var key = arr[i].key;
    var value = arr[i].val;

    if (key in map) {
        map[key].push(value);
    } else {
        map[key] = [value];
    }
}

console.log(map);

Si vous voulez convertir à la nouvelle ES6 Map faire:

var kvArray = [['key1', 'value1'], ['key2', 'value2']];
var myMap = new Map(kvArray);

Pourquoi devriez-vous utiliser ce type de carte? Cela dépend de vous. Jetez un oeil à cela .

Utilisation de Javascript simple

var createMapFromList = function(objectList, property) {
    var objMap = {};
    objectList.forEach(function(obj) {
      objMap[obj[property]] = obj;
    });
    return objMap;
  };
// objectList - the array  ;  property - property as the key

Avec lodash:

const items = [
    { key: 'foo', value: 'bar' },
    { key: 'hello', value: 'world' }
];

const map = _.fromPairs(items.map(item => [item.key, item.value]));

console.log(map); // { foo: 'bar', hello: 'world' }

Une petite amélioration sur l' reduceutilisation:

var arr = [
    { key: 'foo', val: 'bar' },
    { key: 'hello', val: 'world' }
];

var result = arr.reduce((map, obj) => ({
    ...map,
    [obj.key] = obj.val
}), {});

console.log(result);
// { foo: 'bar', hello: 'world' }

essayer

let toHashMap = (a,f) => a.reduce((a,c)=> (a[f(c)]=c,a),{});

let arr=[
  {id:123, name:'naveen'}, 
  {id:345, name:"kumar"}
];

let fkey = o => o.id; // function changing object to string (key)

let toHashMap = (a,f) => a.reduce((a,c)=> (a[f(c)]=c,a),{});

console.log( toHashMap(arr,fkey) );

// Adding to prototype is NOT recommented:
//
// Array.prototype.toHashMap = function(f) { return toHashMap(this,f) };
// console.log( arr.toHashMap(fkey) );

Voici un petit extrait que j'ai créé en javascript pour convertir un tableau d'objets en carte de hachage, indexé par la valeur d'attribut de l'objet. Vous pouvez fournir une fonction pour évaluer dynamiquement la clé de la carte de hachage (au moment de l'exécution).

function isFunction(func){
    return Object.prototype.toString.call(func) === '[object Function]';
}

/**
 * This function converts an array to hash map
 * @param {String | function} key describes the key to be evaluated in each object to use as key for hasmap
 * @returns Object
 * @Example 
 *      [{id:123, name:'naveen'}, {id:345, name:"kumar"}].toHashMap("id")
        Returns :- Object {123: Object, 345: Object}

        [{id:123, name:'naveen'}, {id:345, name:"kumar"}].toHashMap(function(obj){return obj.id+1})
        Returns :- Object {124: Object, 346: Object}
 */
Array.prototype.toHashMap = function(key){
    var _hashMap = {}, getKey = isFunction(key)?key: function(_obj){return _obj[key];};
    this.forEach(function (obj){
        _hashMap[getKey(obj)] = obj;
    });
    return _hashMap;
};

Vous pouvez trouver l'essentiel ici: https://gist.github.com/naveen-ithappu/c7cd5026f6002131c1fa