ฉันจะแสดง JavaScript ES6 Map Object ไปยังคอนโซลได้อย่างไร

หมายเหตุ: คำตอบนี้เกี่ยวข้องกับสภาพแวดล้อมแซนด์บ็อกซ์ repl.it ที่ OP ใช้อยู่เท่านั้น

เนื่องจากคุณพูดในความคิดเห็นว่าคุณกำลังใช้ repl.it จึงมีเคล็ดลับที่คุณสามารถใช้เพื่อเขียน "กลยุทธ์การบันทึก" ของคุณเอง

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

แนวคิดคือการสร้างเมธอด inspect สำหรับ Map ที่วนซ้ำบน entries:

Map.prototype.inspect = function() {
  return `Map(${mapEntriesToString(this.entries())})`
}

function mapEntriesToString(entries) {
  return Array
    .from(entries, ([k, v]) => `\n  ${k}: ${v}`)
    .join("") + "\n";
}

คุณจะเห็นว่า repl.it รองรับได้ที่นี่

console.log(new Map([["a", 1], ["b", 2]]));
// Logs:
/*
Map(
  a: 1
  b: 2
)
*/

มีวิธีแก้ไขปัญหาที่ง่ายกว่าที่คุณสามารถลองได้

 const mapObject = new Map();   
 mapObject.set(1, 'hello');

 console.log([...mapObject.entries()]);
 // [[1, "hello"]]

 console.log([...mapObject.keys()]);
 // [1]

 console.log([...mapObject.values()]);
 // ["hello"]

คุณสามารถใช้ console.log(mapObject.values())

สำหรับแผนที่ธรรมดาที่มีความลึก 1 เพียงใช้ Object.fromEntries([...map]) เพื่อแปลงอาร์เรย์รายการวัตถุของคุณกลับไปเป็นวัตถุที่บันทึกได้ของคอนโซล:

const simpleObj = {
  a: [1, 2, 3],
  b: {c: {d: 42}}
};
const map = new Map(Object.entries(simpleObj));
console.log(Object.fromEntries([...map]));

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

const convertMapToObjDeeply = o => {
  const recurseOnEntries = a => Object.fromEntries(
    a.map(([k, v]) => [k, convertMapToObjDeeply(v)])
  );
  
  if (o instanceof Map) {
    return recurseOnEntries([...o]);
  }
  else if (Array.isArray(o)) {
    return o.map(convertMapToObjDeeply);
  }
  else if (typeof o === "object" && o !== null) {
    return recurseOnEntries(Object.entries(o));
  }
  
  return o;
};

const mkMap = o => new Map(Object.entries(o));

const map = mkMap({
  a: 42, 
  b: [1, 2, 3, mkMap({d: mkMap({ff: 55})})],
  c: mkMap({
    e: [4, 5, 6, {f: 5, x: y => y}, mkMap({g: z => 1})]
  }),
  h: {i: mkMap({j: 46, jj: new Map([[[1, 6], 2]])})},
  k: mkMap({l: mkMap({m: [2, 5, x => x, 99]})})
});

console.log(convertMapToObjDeeply(map));

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

import * as util from "util";

const map: Map<string, string> = new Map();
map.set("test", "test");

const inspected: string = util.inspect(map);

console.log(inspected);