VorwortJSON.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.stringifyFunktion 1Die 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 2NaN, 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 3Wenn 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 4Undefiniert, 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 5Wä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 6Zirkular 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:
Stringify manuell implementierenNachdem 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. ZusammenfassenDies 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:
|
<<: 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
Fast-Linux-Projektadresse: https://gitee.com/uitc...
Ohne weitere Umschweife werde ich den Code direkt...
Vorwort: Wenn wir Vue verwenden, verwenden und sc...
Um VMWare unter Linux zu installieren, müssen Sie...
Inhaltsverzeichnis Überblick berechnet Überwachun...
Phänomen: Nach MySQL Version 5.7 ist der Standard...
Inhaltsverzeichnis Problembeschreibung Prinzipana...
Inhaltsverzeichnis 1. Grundlegender Überblick übe...
Überblick Dieser Artikel beginnt mit der Einführu...
Ich habe kürzlich ein WeChat-Applet geschrieben u...
Beim Erlernen von CSS3 geht es mehr darum, sich m...
Inhaltsverzeichnis 1. Listenschnittstelle und and...
Die Beispiele in diesem Artikel laufen auf MySQL ...
Vorwort: Wenn wir Dezimalzahlen speichern müssen ...
<br />Die unzähligen Informationen im Intern...