Przypadek użycia

Przypadek użycia polega na przekształceniu tablicy obiektów w mapę skrótu na podstawie ciągu znaków lub funkcji przewidzianej do oceny i użycia jako klucza w mapie skrótu i ​​wartości jako samego obiektu. Częstym przypadkiem korzystania z tego jest konwertowanie tablicy obiektów na mapę obiektów mieszających.

Kod

Poniżej znajduje się niewielki fragment kodu JavaScript służący do konwersji tablicy obiektów na mapę skrótu, indeksowaną wartością atrybutu obiektu. Możesz zapewnić funkcję do dynamicznej oceny klucza mapy skrótu (czas działania). Mam nadzieję, że to pomoże komuś w przyszłości.

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;
};

Można znaleźć sedno tutaj: Konwertuje tablicę obiektów na HashMap .

Jest to dość trywialne w przypadku 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' }

Uwaga: Array.prototype.reduce() jest IE9 +, więc jeśli potrzebujesz obsługi starszych przeglądarek, musisz go wypełnić.

Korzystając z mapy ES6 ( całkiem dobrze obsługiwanej ), możesz spróbować:

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"}

W przypadku lodash można to zrobić za pomocą 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}

Za pomocą 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}

Za pomocą operatora rozprzestrzeniania:

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

Demonstracja fragmentu kodu w jsFiddle .

Możesz użyć Array.prototype.reduce () i rzeczywistej mapy JavaScript zamiast tylko obiektu 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);

Czym różni się mapa od obiektu?
Wcześniej, zanim mapa została zaimplementowana w JavaScript, obiekt był używany jako mapa ze względu na podobną strukturę.
W zależności od przypadku użycia, jeśli potrzebujesz mieć zamówione klucze, musisz uzyskać dostęp do rozmiaru mapy lub często dodawać i usuwać mapę, preferowana jest mapa.

Cytat z dokumentu MDN :
Obiekty są podobne do Map, ponieważ oba umożliwiają ustawianie kluczy na wartości, pobieranie tych wartości, usuwanie kluczy i wykrywanie, czy coś jest przechowywane pod kluczem. Z tego powodu (i ponieważ nie było wbudowanych alternatyw) Obiekty były historycznie używane jako Mapy; istnieją jednak ważne różnice, które sprawiają, że korzystanie z mapy jest lepsze w niektórych przypadkach:

• Kluczami obiektu są ciągi znaków i symbole, natomiast mogą mieć dowolną wartość dla mapy, w tym funkcje, obiekty i dowolne elementy pierwotne.
• Klucze w Mapie są uporządkowane, a klucze dodane do obiektu nie są. Zatem podczas iteracji nad nim obiekt Map zwraca klucze w kolejności wstawiania.
• Rozmiar mapy można łatwo uzyskać za pomocą właściwości size, a liczbę właściwości w obiekcie należy ustalić ręcznie.
• Mapa jest iterowalna i dlatego może być bezpośrednio iterowana, podczas gdy iteracja nad Obiektem wymaga uzyskania kluczy w pewien sposób i iteracji nad nimi.
• Obiekt ma prototyp, więc na mapie znajdują się domyślne klucze, które mogą kolidować z kluczami, jeśli nie będziesz ostrożny. Od wersji ES5 można to obejść, używając map = Object.create (null), ale rzadko tak się dzieje.
• Mapa może działać lepiej w scenariuszach obejmujących częste dodawanie i usuwanie kluczowych par.

Możesz użyć nowej Object.fromEntries()metody.

Przykład:

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}

wersja es2015:

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

To, co robię w TypeScript, mam małą bibliotekę utils, w której umieszczam takie rzeczy

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

stosowanie:

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

lub jeśli masz identyfikator inny niż „id”

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

Są lepsze sposoby na to, jak wyjaśniono w innych plakatach. Ale jeśli chcę trzymać się czystego stylu JS i staromodnego, oto:

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);

Jeśli chcesz przekonwertować na nową mapę ES6, wykonaj następujące czynności:

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

Dlaczego warto korzystać z tego typu mapy? Cóż, to zależy od ciebie. Spójrz na to .

Korzystanie z prostego Javascript

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

Z 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' }

Niewielka poprawa reduceużytkowania:

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' }

próbować

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) );

Poniżej znajduje się mały fragment, który utworzyłem w javascript, aby przekonwertować tablicę obiektów na mapę skrótu, indeksowaną według wartości atrybutu obiektu. Możesz zapewnić funkcję do dynamicznej oceny klucza mapy skrótu (czas działania).

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;
};

Możesz znaleźć sedno tutaj: https://gist.github.com/naveen-ithappu/c7cd5026f6002131c1fa