ใช้ Case

กรณีการใช้งานคือการแปลงอาร์เรย์ของวัตถุให้เป็นแผนที่แฮชตามสตริงหรือฟังก์ชั่นที่มีให้เพื่อประเมินและใช้เป็นกุญแจสำคัญในแผนที่แฮชและค่าเป็นวัตถุเอง กรณีทั่วไปของการใช้สิ่งนี้กำลังแปลงอาเรย์ของวัตถุเป็นแผนที่แฮชของวัตถุ

รหัส

ต่อไปนี้เป็นข้อมูลโค้ดขนาดเล็กใน JavaScript เพื่อแปลงอาร์เรย์ของวัตถุเป็นแผนที่แฮชซึ่งจัดทำดัชนีโดยค่าแอตทริบิวต์ของวัตถุ คุณสามารถจัดเตรียมฟังก์ชั่นเพื่อประเมินคีย์ของแฮชแม็พ (เวลารัน) หวังว่าสิ่งนี้จะช่วยให้ใครบางคนในอนาคต

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

คุณสามารถหาเค้าที่นี่: อาร์เรย์แปลงของวัตถุที่จะ HashMap

นี่เป็นเรื่องเล็กน้อยที่เกี่ยวข้องกับ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 + ดังนั้นหากคุณต้องการสนับสนุนเบราว์เซอร์รุ่นเก่าคุณจะต้องทำการเติมข้อมูล

ใช้ ES6 Map ( สนับสนุนค่อนข้างดี ) คุณสามารถลอง:

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

ด้วย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}

ใช้การแพร่กระจาย ES6 + 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}

การใช้ตัวดำเนินการสเปรด:

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

การสาธิตของข้อมูลโค้ดบนjsFiddle

คุณสามารถใช้Array.prototype.reduce ()และที่เกิดขึ้นจริง JavaScript แผนที่แทนเพียง 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);

แผนที่และวัตถุต่างกันอย่างไร
ก่อนหน้านี้ก่อนที่แผนที่จะนำไปใช้ใน JavaScript วัตถุจะถูกใช้เป็นแผนที่เนื่องจากโครงสร้างที่คล้ายกัน
ขึ้นอยู่กับกรณีการใช้งานของคุณหากคุณจำเป็นต้องสั่งแป้นจำเป็นต้องเข้าถึงขนาดของแผนที่หรือมีการเพิ่มและการลบออกจากแผนที่บ่อยครั้งแผนที่จะดีกว่า

อ้างจากเอกสาร MDN :
วัตถุคล้ายกับแผนที่ซึ่งทั้งสองอย่างให้คุณตั้งค่าคีย์เป็นค่าดึงค่าเหล่านั้นลบคีย์และตรวจสอบว่ามีการจัดเก็บบางอย่างไว้ที่คีย์หรือไม่ ด้วยเหตุนี้ (และเนื่องจากไม่มีตัวเลือกในตัว) วัตถุจึงถูกใช้เป็นแผนที่ในอดีต อย่างไรก็ตามมีความแตกต่างที่สำคัญที่ทำให้การใช้แผนที่เป็นที่นิยมในบางกรณี:

• กุญแจของวัตถุคือสตริงและสัญลักษณ์ในขณะที่พวกเขาสามารถเป็นค่าใด ๆ สำหรับแผนที่รวมถึงฟังก์ชั่นวัตถุและดั้งเดิมใด ๆ
• คีย์ในแผนที่จะถูกจัดเรียงในขณะที่ปุ่มที่เพิ่มให้กับวัตถุนั้นไม่ได้จัดทำ ดังนั้นเมื่อวนซ้ำวัตถุแผนที่จะส่งคืนคีย์ตามลำดับการแทรก
• คุณสามารถรับขนาดของแผนที่ได้อย่างง่ายดายด้วยคุณสมบัติขนาดในขณะที่ต้องกำหนดจำนวนคุณสมบัติในวัตถุด้วยตนเอง
• แผนที่คือการทำซ้ำและสามารถทำซ้ำได้โดยตรงในขณะที่การวนซ้ำวัตถุต้องได้รับกุญแจในบางแบบและวนซ้ำมัน
• วัตถุมีต้นแบบดังนั้นจึงมีปุ่มเริ่มต้นในแผนที่ที่สามารถชนกับปุ่มของคุณได้หากคุณไม่ระวัง ในฐานะของ ES5 นี้สามารถข้ามได้โดยใช้ map = Object.create (null) แต่สิ่งนี้ทำได้ยาก
• แผนที่อาจทำงานได้ดีขึ้นในสถานการณ์ที่เกี่ยวข้องกับการเพิ่มและการลบคู่กุญแจบ่อยครั้ง

คุณสามารถใช้ใหม่ 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}

รุ่น es2015:

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

นี่คือสิ่งที่ฉันทำใน 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')

มีวิธีที่ดีกว่าในการทำเช่นนี้ตามที่อธิบายโดยผู้โพสต์อื่น ๆ แต่ถ้าฉันต้องการที่จะยึดมั่นกับวิธีที่บริสุทธิ์ 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);

หากคุณต้องการแปลงเป็น ES6 Mapใหม่ให้ทำดังนี้

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

ทำไมคุณควรใช้แผนที่ประเภทนี้? นั่นขึ้นอยู่กับคุณ ลองดูที่นี้

ใช้ 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

ด้วย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' }

การปรับปรุงเล็กน้อยในการ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' }

ลอง

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

ต่อไปนี้เป็นตัวอย่างเล็ก ๆ ที่ฉันสร้างขึ้นในจาวาสคริปต์เพื่อแปลงอาร์เรย์ของวัตถุเป็นแผนที่แฮชดัชนีโดยค่าแอตทริบิวต์ของวัตถุ คุณสามารถจัดเตรียมฟังก์ชั่นเพื่อประเมินคีย์ของแฮชแม็พ (เวลารัน)

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