如何在控制台中显示javascript ES6地图对象?

时间:2017-08-08 14:30:13

标签: javascript ecmascript-6

我正在使用repl.it/languages/javascript

在打印出来之前,我是否必须将其转换为对象?

我试过

    const mapObject = new Map();
    
    mapObject.set(1, 'hello');
    
    console.log(JSON.stringify(mapObject));
    console.log(mapObject);

结果总是空的对象。

当我使用

console.log([...mapObject]);

打印出一种数组格式。

5 个答案:

答案 0 :(得分:2)

注意:此答案仅与OP正在使用的repl.it沙箱环境相关

由于您在评论中说过您正在使用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支持 here

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

答案 1 :(得分: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"]

答案 2 :(得分:0)

您可以使用console.log(mapObject.values())

答案 3 :(得分:0)

对于深度为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]));

但是,这对于复杂的嵌套映射失败。为此,我们可以将任何Map递归转换为对象,然后将其正常记录下来。这是结合了普通对象,Map,数组和基元的复杂结构的概念证明。不要指望它能涵盖所有现成的情况,但请随时指出改进之处。

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

答案 4 :(得分:0)

我意识到这很可能是针对浏览器控制台的,但这也发生在Node中。因此,您可以在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);