.map () แผนที่ Javascript ES6?

คุณจะทำอย่างไร โดยสัญชาตญาณฉันต้องการทำ:

var myMap = new Map([["thing1", 1], ["thing2", 2], ["thing3", 3]]);

// wishful, ignorant thinking
var newMap = myMap.map((key, value) => value + 1); // Map { 'thing1' => 2, 'thing2' => 3, 'thing3' => 4 }

ฉันยังไม่ได้รวบรวมมากจากเอกสารเกี่ยวกับโพรโทคอซ้ำใหม่

ฉันรู้wu.jsแต่ฉันทำงานBabelโครงการและไม่ต้องการที่จะรวมTraceurซึ่งดูเหมือนว่ามันกำลังจะขึ้นอยู่กับ

ฉันยังไม่รู้ว่าจะแยกวิธีการที่ fitzgen / wu.js ทำอย่างไรในโครงการของฉัน

ชอบคำอธิบายที่ชัดเจนและกระชับเกี่ยวกับสิ่งที่ฉันพลาดที่นี่ ขอบคุณ!

เอกสารสำหรับแผนที่ ES6 , FYI

ดังนั้น.mapตัวมันเองจึงให้คุณค่าเพียงอย่างเดียวที่คุณสนใจ ... ที่กล่าวว่ามีสองสามวิธีในการแก้ไขปัญหานี้:

// instantiation
const myMap = new Map([
  [ "A", 1 ],
  [ "B", 2 ]
]);

// what's built into Map for you
myMap.forEach( (val, key) => console.log(key, val) ); // "A 1", "B 2"

// what Array can do for you
Array.from( myMap ).map(([key, value]) => ({ key, value })); // [{key:"A", value: 1}, ... ]

// less awesome iteration
let entries = myMap.entries( );
for (let entry of entries) {
  console.log(entry);
}

โปรดทราบว่าฉันกำลังใช้สิ่งใหม่ ๆ มากมายในตัวอย่างที่สองนั้น ... ... Array.fromใช้เวลาทำซ้ำได้ (ทุกครั้งที่คุณใช้[].slice.call( )รวมทั้งชุดและแผนที่) และเปลี่ยนเป็นอาร์เรย์ ... ... แผนที่ เมื่อบังคับให้เป็นอาร์เรย์ให้เปลี่ยนเป็นอาร์เรย์อาร์เรย์โดยที่el[0] === key && el[1] === value;(โดยทั่วไปเป็นรูปแบบเดียวกับที่ฉันเติมแผนที่ตัวอย่างไว้ล่วงหน้าด้วยด้านบน)

ฉันใช้การทำลายโครงสร้างอาร์เรย์ในตำแหน่งอาร์กิวเมนต์ของแลมบ์ดาเพื่อกำหนดจุดอาร์เรย์เหล่านั้นให้กับค่าก่อนที่จะส่งคืนวัตถุสำหรับแต่ละ el

หากคุณใช้ Babel ในการผลิตคุณจะต้องใช้ polyfill เบราว์เซอร์ของ Babel (ซึ่งรวมถึง "core-js" และ "regenerator" ของ Facebook)
Array.fromผมค่อนข้างแน่ใจว่ามันมี

คุณควรใช้ตัวดำเนินการ Spread :

var myMap = new Map([["thing1", 1], ["thing2", 2], ["thing3", 3]]);

var newArr = [...myMap].map(value => value[1] + 1);
console.log(newArr); //[2, 3, 4]

var newArr2 = [for(value of myMap) value = value[1] + 1];
console.log(newArr2); //[2, 3, 4]

เพียงแค่ใช้Array.from(iterable, [mapFn]).

var myMap = new Map([["thing1", 1], ["thing2", 2], ["thing3", 3]]);

var newArr = Array.from(myMap.values(), value => value + 1);

คุณสามารถใช้ฟังก์ชันนี้:

function mapMap(map, fn) {
  return new Map(Array.from(map, ([key, value]) => [key, fn(value, key, map)]));
}

การใช้งาน:

var map1 = new Map([["A", 2], ["B", 3], ["C", 4]]);

var map2 = mapMap(map1, v => v * v);

console.log(map1, map2);
/*
Map { A → 2, B → 3, C → 4 }
Map { A → 4, B → 9, C → 16 }
*/

การใช้Array.fromฉันเขียนฟังก์ชัน typescript ที่แมปค่า:

function mapKeys<T, V, U>(m: Map<T, V>, fn: (this: void, v: V) => U): Map<T, U> {
  function transformPair([k, v]: [T, V]): [T, U] {
    return [k, fn(v)]
  }
  return new Map(Array.from(m.entries(), transformPair));
}

const m = new Map([[1, 2], [3, 4]]);
console.log(mapKeys(m, i => i + 1));
// Map { 1 => 3, 3 => 5 }

ที่จริงคุณยังสามารถมีด้วยปุ่มเดิมหลังจากการแปลงไปยังอาร์เรย์ด้วยMap Array.fromนั่นเป็นไปได้โดยการส่งคืนอาร์เรย์ที่รายการแรกเป็นและที่สองคือการเปลี่ยนkeyvalue

const originalMap = new Map([
  ["thing1", 1], ["thing2", 2], ["thing3", 3]
]);

const arrayMap = Array.from(originalMap, ([key, value]) => {
    return [key, value + 1]; // return an array
});

const alteredMap = new Map(arrayMap);

console.log(originalMap); // Map { 'thing1' => 1, 'thing2' => 2, 'thing3' => 3 }
console.log(alteredMap);  // Map { 'thing1' => 2, 'thing2' => 3, 'thing3' => 4 }

หากคุณไม่ส่งคืนคีย์นั้นเป็นรายการอาร์เรย์แรกแสดงว่าคุณหลวมMapคีย์

ฉันชอบที่จะขยายแผนที่

export class UtilMap extends Map {  
  constructor(...args) { super(args); }  
  public map(supplier) {
      const mapped = new UtilMap();
      this.forEach(((value, key) => mapped.set(key, supplier(value, key)) ));
      return mapped;
  };
}

คุณสามารถใช้ myMap.forEach และในแต่ละลูปโดยใช้ map.set เพื่อเปลี่ยนค่า

myMap = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3]
]);

for (var [key, value] of myMap.entries()) {
  console.log(key + ' = ' + value);
}


myMap.forEach((value, key, map) => {
  map.set(key, value+1)
})

for (var [key, value] of myMap.entries()) {
  console.log(key + ' = ' + value);
}

หากคุณไม่ต้องการแปลงแผนที่ทั้งหมดเป็นอาร์เรย์ล่วงหน้าและ / หรือทำลายโครงสร้างอาร์เรย์คีย์ - ค่าคุณสามารถใช้ฟังก์ชันโง่ ๆ นี้:

/**
 * Map over an ES6 Map.
 *
 * @param {Map} map
 * @param {Function} cb Callback. Receives two arguments: key, value.
 * @returns {Array}
 */
function mapMap(map, cb) {
  let out = new Array(map.size);
  let i = 0;
  map.forEach((val, key) => {
    out[i++] = cb(key, val);
  });
  return out;
}

let map = new Map([
  ["a", 1],
  ["b", 2],
  ["c", 3]
]);

console.log(
  mapMap(map, (k, v) => `${k}-${v}`).join(', ')
); // a-1, b-2, c-3

Map.prototype.map = function(callback) {
  const output = new Map()
  this.forEach((element, key)=>{
    output.set(key, callback(element, key))
  })
  return output
}

const myMap = new Map([["thing1", 1], ["thing2", 2], ["thing3", 3]])
// no longer wishful thinking
const newMap = myMap.map((value, key) => value + 1)
console.info(myMap, newMap)

ขึ้นอยู่กับความร้อนแรงทางศาสนาของคุณในการหลีกเลี่ยงการแก้ไขต้นแบบ แต่ฉันพบว่าสิ่งนี้ทำให้ฉันใช้งานง่าย

คุณสามารถแมป () อาร์เรย์ แต่ไม่มีการดำเนินการดังกล่าวสำหรับ Maps วิธีแก้ปัญหาจากดร. Axel Rauschmayer :

• แปลงแผนที่เป็นอาร์เรย์ของคู่ [คีย์ค่า]
• แมปหรือกรองอาร์เรย์
• แปลงผลลัพธ์กลับเป็นแผนที่

ตัวอย่าง:

let map0 = new Map([
  [1, "a"],
  [2, "b"],
  [3, "c"]
]);

const map1 = new Map(
  [...map0]
  .map(([k, v]) => [k * 2, '_' + v])
);

ส่งผลให้

{2 => '_a', 4 => '_b', 6 => '_c'}

อาจเป็นวิธีนี้:

const m = new Map([["a", 1], ["b", 2], ["c", 3]]);
m.map((k, v) => [k, v * 2]); // Map { 'a' => 2, 'b' => 4, 'c' => 6 }

คุณจะต้องลิงแพทช์Mapก่อนเท่านั้น:

Map.prototype.map = function(func){
    return new Map(Array.from(this, ([k, v]) => func(k, v)));
}

เราสามารถเขียนรูปแบบที่ง่ายกว่าของโปรแกรมแก้ไขนี้:

Map.prototype.map = function(func){
    return new Map(Array.from(this, func));
}

แต่เราคงจะบังคับให้เราเขียนแล้ว m.map(([k, v]) => [k, v * 2]);ซึ่งดูเหมือนจะเจ็บปวดและน่าเกลียดกว่าสำหรับฉัน

การแมปค่าเท่านั้น

นอกจากนี้เรายังสามารถจับคู่ค่าได้เท่านั้น แต่ฉันจะไม่แนะนำให้ใช้วิธีแก้ปัญหานั้นเพราะมันเจาะจงเกินไป อย่างไรก็ตามสามารถทำได้และเราจะมี API ต่อไปนี้:

const m = new Map([["a", 1], ["b", 2], ["c", 3]]);
m.map(v => v * 2); // Map { 'a' => 2, 'b' => 4, 'c' => 6 }

เช่นเดียวกับก่อนการแก้ไขด้วยวิธีนี้:

Map.prototype.map = function(func){
    return new Map(Array.from(this, ([k, v]) => [k, func(v)]));
}

บางทีคุณอาจมีทั้งสองอย่างโดยตั้งชื่อวินาทีmapValuesเพื่อให้ชัดเจนว่าคุณไม่ได้ทำแผนที่วัตถุอย่างที่คาดไว้