Как я могу отобразить объект карты JavaScript ES6 на консоли?

Я использую repl.it/languages/javascript.

Должен ли я преобразовать его в объект, прежде чем распечатать?

я пытался

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

Результат всегда пустой объект.

Когда я использую

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

Он выводит формат массива.


person newguy    schedule 08.08.2017    source источник
comment
console.log(mapObject) отлично работает в последних версиях Chrome и node7. Какая у вас платформа?   -  person georg    schedule 08.08.2017
comment
@georg repl.it/languages/javascript   -  person newguy    schedule 08.08.2017
comment
Используйте console.dir вместо .log и без строк.   -  person Teemu    schedule 08.08.2017
comment
@newguy: ну, как насчет того, чтобы написать им и попросить исправить это?   -  person georg    schedule 08.08.2017
comment
@georg Я все еще вижу пустые объекты в своем браузере после вашего редактирования.   -  person newguy    schedule 08.08.2017
comment
@newguy: да, это потому, что фрагменты SO тоже ошиблись. Эмулировать консоль сложно...   -  person georg    schedule 08.08.2017
comment
@georg :( так это не моя проблема? Я рад это знать. Но это действительно раздражает.   -  person newguy    schedule 08.08.2017


Ответы (5)


Примечание. Этот ответ относится только к среде песочницы 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
)
*/
person user3297291    schedule 08.08.2017
comment
Хороший. Я только что закончил что-то подобное, но вместо этого решил разрушить их console.log :) repl.it/KBdU - person Dave Salomon; 08.08.2017
comment
@DaveSalomon Хорошо! Такое ощущение, что мы находимся в онлайн-среде песочницы; давайте сломаем все нативные прототипы и реализации по умолчанию! ;) Тем не менее, оба подхода могут помочь в процессе отладки, так что приятно посмотреть, что можно сделать. - person user3297291; 08.08.2017

есть более простое решение, которое вы можете попробовать.

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

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

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

 console.log([...mapObject.values()]);
 // ["hello"]
person samehanwar    schedule 06.09.2020

вы можете использовать console.log(mapObject.values())

person omer    schedule 08.06.2020
comment
Все, что я вижу, это [object Map Iterator] {}, во всяком случае, в консоли CodePen. - person Noumenon; 08.01.2021
comment
Можете ли вы добавить ссылку на codepen? - person omer; 08.01.2021

Для простых карт с глубиной 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));

person ggorlen    schedule 16.09.2020
comment
Лучше использовать instanceof Map, а не .constructor.name == 'Map'. - person Bergi; 16.09.2020

Я понимаю, что это, скорее всего, предназначено для консоли браузера, но это также происходит в 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);
person Schmeedty    schedule 01.11.2020