Implementierung einer vereinfachten Version von JSON.stringify und seine sechs Hauptfunktionen im Detail erklärt

Implementierung einer vereinfachten Version von JSON.stringify und seine sechs Hauptfunktionen im Detail erklärt

Vorwort

JSON.stringify ist eine sehr häufig verwendete API, hat aber eine Funktion, auf die wir bei der Verwendung achten müssen, um zu vermeiden, dass wir Minen im Codeprogramm vergraben. Lassen Sie uns also gemeinsam eine einfache Version der Funktion jsonStringify implementieren.

Sechs Funktionen von JSON.stringify

Funktion 1

Die gekapselten Objekte aus Booleschen Werten, Zahlen und Strings werden bei der Serialisierung automatisch in den entsprechenden Originalwert umgewandelt.

Jetzt gibt es ein solches Objekt:

const obj = {
    bol: neuer Boolean(true),
    num: neue Zahl(1),
    str: neuer String(1)
}

Verwenden Sie typeof, um den Datentyp jedes Attributs von obj zu erkennen

Typ von obj.bol; // Objekt
Typ von Objekt.Nummer; // Objekt
Typ von obj.str; // Objekt

Nach der Serialisierung

JSON.stringify(obj); // {"bol":true,"num":1,"str":"1"}

An diesem Punkt analysieren wir es, um den Datentyp jedes Attributs zu finden

const stringifyObj = JSON.parse(JSON.stringify(obj));
Typ von stringifyObj.bol; // Boolesch
typeof stringifyObj.num; // Zahl
Typ von stringifyObj.str; // Zeichenfolge

Merkmal 2

NaN, Infinity, -Infinity und null werden bei der Stringifizierung alle als null behandelt.

const obj = {
    nan: NaN,
    Unendlichkeit: Unendlichkeit,
    null: null,
};

JSON.stringify(obj); // {"nan":null,"unendlich":null,"null":null}

Merkmal 3

Wenn ein Objekt serialisiert wird und es über eine toJSON-Funktion verfügt, ist der von dieser Funktion zurückgegebene Wert das Ergebnis der Serialisierung des gesamten Objekts.

const obj = {
    nan: NaN,
    Unendlichkeit: Unendlichkeit,
    null: null,
    zuJSON() {
        return "hat toJSON-Funktion";
    },
};

JSON.stringify(obj); // "hat eine toJSON-Funktion"

Sie können sehen, dass nach der Serialisierung nur der Rückgabewert der toJSON-Funktion vorhanden ist und der Rest der Daten ignoriert wird.

⚠️: Datumsdaten werden normal serialisiert, da die toJSON-Funktion auf Date bereitgestellt wird, was durch Drucken von Date.prototype.toJSON in der Konsole gefunden werden kann

const obj = {
    Datum: neues Datum(),
};

JSON.stringify(obj); // {"Datum":"2021-10-08T11:43:31.881Z"}

Merkmal 4

Undefiniert, Funktion und Symbol verhalten sich unterschiedlich

Als Objekt-Schlüssel-Wert-Paar:

Als Wert:

const obj = {
    undefiniert: undefiniert,
    fn() {},
    Symbol: Symbol()
};

JSON.stringify(obj); // {}

Als Schlüssel:

const fn = Funktion () {};
const obj = {
    [undefiniert]: undefiniert,
    [fn]: Funktion () {},
    [Symbol()]: Symbol()
};

JSON.stringify(obj); // {}

Wenn „undefined“, „Funktion“ und „Symbol“ als Schlüssel und Wert eines Objekts verwendet werden, werden sie bei der Serialisierung ignoriert.

⚠️: Dies kann die ursprüngliche Reihenfolge der Objekte ändern, da die oben genannten drei Datentypen bei der Serialisierung ignoriert werden

Als Array-Wert:

const arr = [undefiniert, Funktion fn() {}, Symbol()];

JSON.stringify(arr); // [null,null,null]

Wenn „undefined“, „function“ und „symbol“ als Array-Werte verwendet werden, werden sie während der Serialisierung alle in „null“ umgewandelt.

Wenn ich allein bin:

JSON.stringify(undefiniert); // undefiniert
JSON.stringify(function () {}); // undefiniert
JSON.stringify(Symbol()); // undefiniert

Wenn „undefiniert“, „Funktion“ und „Symbol“ alleine existieren, werden sie während der Serialisierung alle in „undefiniert“ umgewandelt.

Funktion 5

Während der Serialisierung werden nur aufzählbare Eigenschaften serialisiert und nicht aufzählbare Eigenschaften werden ignoriert.

const obj = {
    Name: "Nordon",
    Alter: 18,
};

// Ändere das Alter in eine nicht aufzählbare Eigenschaft Object.defineProperty(obj, "age", {
    aufzählbar: falsch,
});

JSON.stringify(obj); // {"Name":"nordon"}

⚠️: Dadurch wird auch die ursprüngliche Reihenfolge der Objekte geändert

Merkmal 6

Zirkular referenzierte Objekte lösen während der Serialisierung eine Ausnahme aus.

const obj = {
    Name: "Nordon",
    Alter: 18,
};

Konstante p = {
    Name: 'wy',
    obj
}

obj.p = p

JSON.stringify(obj);

Dies führt dazu, dass die Konsole eine Ausnahme ausgibt:

Nicht abgefangener TypeError: Konvertierung der kreisförmigen Struktur in JSON --> beginnend bei Objekt mit Konstruktor „Object“ | Eigenschaft „p“ -> Objekt mit Konstruktor „Object“ --- Eigenschaft „obj“ schließt den Kreis bei JSON.stringify (<anonymous>)

Stringify manuell implementieren

Nachdem wir nun einige der Funktionen von JSON.stringify verstehen, können wir basierend auf diesen Funktionen eine Kack-Version implementieren.

Verwenden Sie vor der Implementierung Currying, um einige Toolfunktionen zur Datentypüberprüfung zu kapseln:

const currying = (fn, ...outParams) => {
    // Anzahl der von der fn-Funktion benötigten Parameter abrufen const paramsLen = fn.length;

    return (...args) => {
        // Alle Parameter sammeln let params = [...outParams, ...args];
        // Wenn die Parameter die von fn geforderten Parameter nicht erreichen, mit dem Sammeln der Parameter fortfahren, if (params.length < paramsLen) {
            gibt Currying zurück (Fn, ... Parameter);
        }

        Funktion (...Parameter) zurückgeben;
    };
};

/**
 * Typ: Typ – [Objekt-Array], [Objektnummer] usw. * Quelle: Datenquelle */
const judgeType = (Typ, Quelle) => {
    gibt Object.prototype.toString.call(Quelle) === Typ zurück;
};

const isUndefined = currying(judgeType, "[Objekt undefiniert]");
const isSymbol = currying(judgeType, "[Objekt Symbol]");
const isFunction = currying(judgeType, "[Objektfunktion]");
const isObject = currying(judgeType, "[Objekt Objekt]");
const isNull = currying(judgeType, "[Objekt Null]");

Hier ist der Code direkt:

Funktion jsonStringify(Daten) {
    let type = Datentyp;

    wenn (istNull(Daten)) { 
// null gibt direkt die Zeichenfolge „null“ zurück
        gibt "null" zurück;
    } sonst wenn (data.toJSON && Typ von data.toJSON === "Funktion") {
// Konfigurieren Sie die toJSON-Funktion, verwenden Sie direkt die von toJSON zurückgegebenen Daten und ignorieren Sie andere Daten return jsonStringify(data.toJSON());
    } sonst wenn (Array.isArray(data)) {
        lass Ergebnis = [];
        //Wenn es ein Array ist, kann jedes Element im Array von unterschiedlichem Typ sein data.forEach((item, index) => {
            wenn (istUndefined(Element) || istSymbol(Element) || istFunktion(Element)) {
                Ergebnis[Index] = "null";
            } anders {
                Ergebnis[index] = jsonStringify(Element);
            }
        });

        Ergebnis = "[" + Ergebnis + "]";

        Ergebnis zurückgeben.Ersetzen(/'/g, '"');
    } sonst wenn (istObjekt(Daten)) {
        //Verarbeitung gewöhnlicher Objekte let result = [];
        Objekt.Schlüssel(Daten).fürJedes((Element, Index) => {
            wenn (Typ des Elements !== "Symbol") {
                //Wenn der Schlüssel ein Symbolobjekt ist, ignorieren Sie if (
                    Daten[Element] !== undefiniert &&
                    Typ der Daten [Element] !== "Funktion" &&
                    Datentyp[Element] !== "Symbol"
                ) {
                    //Wenn der Schlüsselwert nicht definiert ist, eine Funktion oder ein Symbol ist, ignorieren Sie result.push(
                        '"' + Element + '"' + ":" + jsonStringify(Daten[Element])
                    );
                }
            }
        });

        return ("{" + result + "}").replace(/'/g, '"');
    } sonst wenn (Typ !== "Objekt") {
        lass Ergebnis = Daten;

        //Daten können ein grundlegender Datentyp sein, behandeln Sie ihn hier, wenn (Number.isNaN(data) || data === Infinity) {
            //NaN- und Infinity-Serialisierung gibt „null“ zurück
            Ergebnis = "null";
        } sonst wenn (istUndefined(Daten) || istSymbol(Daten) || istFunktion(Daten)) {
            // Da die Funktionsserialisierung „undefined“ zurückgibt, wird sie zusammen mit „undefined“ und dem Symbol „return undefined“ verarbeitet.
        } sonst wenn (Typ === "Zeichenfolge") {
            Ergebnis = '"' + Daten + '"';
        }

        returniere String(Ergebnis);
    }
}

An diesem Punkt ist die vereinfachte Version von JSON.stringify abgeschlossen. Obwohl noch viele Funktionen fehlen, bietet es hauptsächlich eine Idee. Die Kernkommentare wurden im Code kommentiert, was zusammen mit dem Code und den oben genannten Funktionen verständlich ist.

Zusammenfassen

Dies ist das Ende dieses Artikels über die Implementierung von JSON.stringify und seinen sechs Hauptfunktionen. Weitere verwandte vereinfachte Versionen von JSON.stringify und seinen Funktionen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • 5 geheime Funktionen von JSON.stringify() erklärt
  • Sprechen Sie über die Konvertierung zwischen JSON-Objekten und Zeichenfolgen JSON.stringify(obj) und JSON.parse(string).
  • Lösung für ungenaues Datum und Uhrzeit bei der JSON-Konvertierung durch JSON.stringify
  • Lernen Sie die 9 Funktionen und Konvertierungsregeln von JSON.stringify kennen

<<:  XHTML Basic 1.1, eine vom W3C empfohlene Auszeichnungssprache für mobiles Web

>>:  Super ausführliches Tutorial zur Installation und Konfiguration von MySQL8.0.22

Artikel empfehlen

So migrieren Sie SQLite zu einem MySQL-Skript

Ohne weitere Umschweife werde ich den Code direkt...

Tutorial zur Installation von VMWare15.5 unter Linux

Um VMWare unter Linux zu installieren, müssen Sie...

Detaillierte Erläuterung des CocosCreator-Nachrichtenverteilungsmechanismus

Überblick Dieser Artikel beginnt mit der Einführu...

Zwei Möglichkeiten, das WeChat-Miniprogramm mit Tencent Maps zu verbinden

Ich habe kürzlich ein WeChat-Applet geschrieben u...

CSS3 zum Erzielen eines dynamischen Hintergrundverlaufseffekts

Beim Erlernen von CSS3 geht es mehr darum, sich m...

So verwenden Sie den MySQL-Autorisierungsbefehl „grant“

Die Beispiele in diesem Artikel laufen auf MySQL ...

Detaillierte Analyse des MySQL-Datentyps DECIMAL

Vorwort: Wenn wir Dezimalzahlen speichern müssen ...

So rufen Sie einen Hyperlink auf und öffnen ihn

<br />Die unzähligen Informationen im Intern...