Ich möchte ES6 Map anstelle von JS-Objekten verwenden, werde jedoch zurückgehalten, da ich nicht herausfinden kann, wie eine Map mit JSON.stringify () erstellt wird. Meine Schlüssel sind garantiert Zeichenfolgen und meine Werte werden immer aufgelistet. Muss ich wirklich eine Wrapper-Methode schreiben, um zu serialisieren?

Das kannst du nicht.

Die Schlüssel einer Karte können alles sein, einschließlich Objekte. Die JSON-Syntax erlaubt jedoch nur Zeichenfolgen als Schlüssel. Im Allgemeinen ist das also unmöglich.

Meine Schlüssel sind garantiert Zeichenfolgen und meine Werte sind immer Listen

In diesem Fall können Sie ein einfaches Objekt verwenden. Es wird diese Vorteile haben:

• Es kann mit JSON verknüpft werden.
• Es funktioniert in älteren Browsern.
• Es könnte schneller sein.

Sie können die MapInstanz nicht direkt stringifizieren, da sie keine Eigenschaften hat, aber Sie können sie in ein Array von Tupeln konvertieren:

jsonText = JSON.stringify(Array.from(map.entries()));

Verwenden Sie für die Umkehrung

map = new Map(JSON.parse(jsonText));

Beides JSON.stringifyund JSON.parseunterstützen ein zweites Argument. replacerund reviverjeweils. Mit Ersetzer und Reviver unten ist es möglich, Unterstützung für native Map-Objekte hinzuzufügen, einschließlich tief verschachtelter Werte

function replacer(key, value) {
  const originalObject = this[key];
  if(originalObject instanceof Map) {
    return {
      dataType: 'Map',
      value: Array.from(originalObject.entries()), // or with spread: value: [...originalObject]
    };
  } else {
    return value;
  }
}

function reviver(key, value) {
  if(typeof value === 'object' && value !== null) {
    if (value.dataType === 'Map') {
      return new Map(value.value);
    }
  }
  return value;
}

Verwendung :

const originalValue = new Map([['a', 1]]);
const str = JSON.stringify(originalValue, replacer);
const newValue = JSON.parse(str, reviver);
console.log(originalValue, newValue);

Tiefes Verschachteln mit einer Kombination aus Arrays, Objekten und Karten

const originalValue = [
  new Map([['a', {
    b: {
      c: new Map([['d', 'text']])
    }
  }]])
];
const str = JSON.stringify(originalValue, replacer);
const newValue = JSON.parse(str, reviver);
console.log(originalValue, newValue);

Obwohl Ecmascript noch keine Methode bereitstellt, kann dies dennoch verwendet werden, JSON.stingifywenn Sie das Mapeinem JavaScript- Grundelement zuordnen . Hier ist das Beispiel, das Mapwir verwenden werden.

const map = new Map();
map.set('foo', 'bar');
map.set('baz', 'quz');

Wechseln zu einem JavaScript-Objekt

Sie können mit der folgenden Hilfsfunktion in ein JavaScript-Objektliteral konvertieren.

const mapToObj = m => {
  return Array.from(m).reduce((obj, [key, value]) => {
    obj[key] = value;
    return obj;
  }, {});
};

JSON.stringify(mapToObj(map)); // '{"foo":"bar","baz":"quz"}'

Wechseln zu einem JavaScript-Array von Objekten

Die Hilfsfunktion für diese wäre noch kompakter

const mapToAoO = m => {
  return Array.from(m).map( ([k,v]) => {return {[k]:v}} );
};

JSON.stringify(mapToAoO(map)); // '[{"foo":"bar"},{"baz":"quz"}]'

Zum Array von Arrays gehen

Dies ist noch einfacher, Sie können nur verwenden

JSON.stringify( Array.from(map) ); // '[["foo","bar"],["baz","quz"]]'

Mit Spread Sytax Map kann in einer Zeile serialisiert werden:

JSON.stringify([...new Map()]);

und deserialisieren Sie es mit:

let map = new Map(JSON.parse(map));

Stringifizieren Sie eine MapInstanz (Objekte als Schlüssel sind in Ordnung) :

JSON.stringify([...map])

oder

JSON.stringify(Array.from(map))

oder

JSON.stringify(Array.from(map.entries()))

Ausgabeformat:

// [["key1","value1"],["key2","value2"]]

Eine bessere Lösung

    // somewhere...
    class Klass extends Map {

        toJSON() {
            var object = { };
            for (let [key, value] of this) object[key] = value;
            return object;
        }

    }

    // somewhere else...
    import { Klass as Map } from '@core/utilities/ds/map';  // <--wherever "somewhere" is

    var map = new Map();
    map.set('a', 1);
    map.set('b', { datum: true });
    map.set('c', [ 1,2,3 ]);
    map.set( 'd', new Map([ ['e', true] ]) );

    var json = JSON.stringify(map, null, '\t');
    console.log('>', json);

Ausgabe

    > {
        "a": 1,
        "b": {
            "datum": true
        },
        "c": [
            1,
            2,
            3
        ],
        "d": {
            "e": true
        }
    }

Hoffe, das ist weniger nervös als die obigen Antworten.

Die folgende Lösung funktioniert auch, wenn Sie verschachtelte Karten haben

function stringifyMap(myMap) {
    function selfIterator(map) {
        return Array.from(map).reduce((acc, [key, value]) => {
            if (value instanceof Map) {
                acc[key] = selfIterator(value);
            } else {
                acc[key] = value;
            }

            return acc;
        }, {})
    }

    const res = selfIterator(myMap)
    return JSON.stringify(res);
}