将对象数组转换为哈希映射，由对象的属性值索引

Question

用例

用例是将对象数组转换为基于提供的字符串或函数的哈希映射，以评估并用作哈希映射中的键，并将值用作对象本身。使用它的一个常见情况是将对象数组转换为对象的哈希映射。

代码

以下是JavaScript中的一个小sn-p，用于将对象数组转换为哈希映射，由对象的属性值索引。您可以提供一个函数来动态评估哈希映射的键（运行时）。

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

您可以在这里找到要点：Converts Array of Objects to HashMap。

Answer 1

这对于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' }

注意：Array.prototype.reduce() 是 IE9+，所以如果您需要支持旧版浏览器，则需要对其进行 polyfill。

Answer 2

使用 ES6 Map (pretty well supported)，你可以试试这个：

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

Answer 3

您可以使用新的Object.fromEntries() 方法。

例子：

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}

Answer 4

使用 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}

Answer 5

使用lodash，这可以使用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}

Answer 6

使用扩展运算符：

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

jsFiddle 上的代码 sn-p 演示。

Answer 7

您可以使用 Array.prototype.reduce() 和实际的 JavaScript Map，而不是仅使用 JavaScript Object。

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

地图和对象有什么不同？
以前，在 JavaScript 中实现 Map 之前，由于结构相似，Object 一直被用作 Map。
根据您的用例，如果您需要有序的键、需要访问地图的大小或经常从地图中添加和删除，则最好使用地图。

引用MDN document:
对象与 Maps 类似，都允许您将键设置为值、检索这些值、删除键以及检测是否在键中存储了某些内容。正因为如此（并且因为没有内置的替代品），对象在历史上一直被用作地图；但是，在某些情况下，使用地图有一些重要的区别：

• 对象的键是字符串和符号，而它们可以是 Map 的任何值，包括函数、对象和任何原语。
• Map 中的键是有序的，而添加到对象的键不是。因此，在对其进行迭代时，Map 对象会按插入顺序返回键。
• 您可以使用 size 属性轻松获取 Map 的大小，而 Object 中的属性数量必须手动确定。
• Map 是可迭代对象，因此可以直接迭代，而对 Object 进行迭代则需要以某种方式获取其键并对其进行迭代。
• 一个对象有一个原型，所以如果你不小心的话，映射中的默认键可能会与你的键发生冲突。从 ES5 开始，这可以通过使用 map = Object.create(null) 绕过，但很少这样做。
• 在涉及频繁添加和删除密钥对的场景中，Map 的性能可能会更好。

Answer 8

es2015版本：

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

Answer 9

正如其他海报所解释的，有更好的方法来做到这一点。但如果我想坚持纯 JS 和老式的方式，那就是：

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

Answer 10

如果您想转换为新的 ES6 Map，请执行以下操作：

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

为什么要使用这种类型的地图？这取决于你。看看this。

Answer 11

这就是我在 TypeScript 中所做的事情

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

用法：

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

或者如果您有除“id”以外的标识符

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

Answer 12

? 最糟糕的

list.reduce((obj, item) => (obj[item.name] = item.value, obj), {})

const list = [
  { name: 'abc', value: 123 },
  { name: 'xyz', value: 789 },
  { name: 'she', value: 'her' },
  { name: 'he', value: 'him'}
]
  
console.log(
  // ? last item in comma evaluation is always returned
  list.reduce((obj, item) => (obj[item.name] = item.value, obj), {})
)

Answer 13

reduce 用法的小改进：

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

Answer 14

使用简单的 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

Answer 15

与lodash:

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

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

// OR: if you want to index the whole item by key:
// const map = _.fromPairs(items.map(item => [item.key, item]));

lodash fromPairs 函数让我想起了zip function in Python

链接到lodash

Answer 16

reduce 版本似乎不起作用。我跟着去。

   let map = {};
    items.forEach(v=>{
      map [v.xxx] = v;
    });

Answer 17

试试

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

Answer 18

对我来说，我不喜欢使用任何map 或reduce，而是坚持使用简单的for 循环。

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

const hash = {};

for (const item of array) {
    hash[item.key] = item;
}

console.log(hash);

Answer 19

以下是我在 javascript 中创建的小 sn-p，用于将对象数组转换为哈希映射，由对象的属性值索引。您可以提供一个函数来动态评估哈希映射的键（运行时）。

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

你可以在这里找到要点：https://gist.github.com/naveen-ithappu/c7cd5026f6002131c1fa

Answer 20

像这样映射数组：

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

let [k,v] = items.map(item => [item.key, item.value])   
console.log([k,v]) 

//Output: [ [ 'foo', 'bar' ], [ 'hello', 'world' ] ]