Zusammenfassung der Verwendung von JavaScript JSON.stringify()

1. Nutzung

1. Grundlegende Verwendung

JSON.stringify() kann ein JavaScript-Objekt in eine JSON-Zeichenfolge serialisieren.

lass json1 = {
  Titel: "Json.stringify",
  Autor:
    "Boot auf den Wellen"
  ],
  Jahr: 2021
};
jsonText = JSON.stringify(json1);

Standardmäßig gibt JSON.stringify() einen JSON-String ohne Leerzeichen oder Einrückungen aus, sodass der Wert von jsonText folgendermaßen aussieht:

"{"title":"Json.stringify","author":["Autor":["JSON-Datei"],"year":2021}"

Beim Serialisieren von JavaScript-Objekten werden alle Funktions- und Prototypmitglieder absichtlich aus dem Ergebnis weggelassen. Darüber hinaus werden alle Eigenschaften übersprungen, deren Wert nicht definiert ist. Das Endergebnis ist eine Darstellung, bei der alle Instanzattribute gültige JSON-Datentypen sind.

Die Methode JSON.stringify() kann insgesamt 3 Parameter akzeptieren, von denen zwei optional sind (der zweite und dritte Parameter). Diese beiden optionalen Parameter können verwendet werden, um andere Möglichkeiten zur Serialisierung von JavaScript-Objekten anzugeben. Das zweite Argument sind die Filter, die ein Array oder eine Funktion sein können; das dritte Argument ist eine Option zum Einrücken der resultierenden JSON-Zeichenfolge. Verwenden Sie diese Parameter allein oder in Kombination, um eine genauere Kontrolle über die JSON-Serialisierung zu erhalten.

2. Der zweite Parameter - Filter

Wenn das zweite Argument ein Array ist, enthält das von JSON.stringify() zurückgegebene Ergebnis nur die im Array aufgelisteten Objekteigenschaften. Beispielsweise das folgende Beispiel:

lass json1 = {
  Titel: "Json.stringify",
  Autor:
    "Boot auf den Wellen"
  ],
  Jahr: 2021,
  wie: 'frontend',
  weixin: „frontJS“
};
let jsonText = JSON.stringify(json1, ['weixin']);

In diesem Beispiel ist der zweite Parameter der Methode JSON.stringify() ein Array, das eine einzelne Zeichenfolge enthält: „weixin“. Es entspricht der Eigenschaft im zu serialisierenden Objekt, sodass die resultierende JSON-Zeichenfolge nur diese Eigenschaft enthält:

"{"weixin":"frontJS"}"

Wenn das zweite Argument eine Funktion ist, ist das Verhalten wieder anders. Die bereitgestellte Funktion erhält zwei Parameter: den Attributnamen (Schlüssel) und den Attributwert (Wert). Anhand dieses Schlüssels können Sie entscheiden, welche Operation mit dem entsprechenden Attribut durchgeführt werden soll. Der Schlüssel ist immer eine Zeichenfolge. Der Wert ist jedoch eine leere Zeichenfolge, wenn er nicht zu einem Schlüssel/Wert-Paar gehört.

const Studenten = [
  {
    Name: 'James',
    Punktzahl: 100,
  }, {
    Name: 'Jordan',
    Punktzahl: 60,
  }, {
    Name: 'kobe',
    Punktzahl: 90,
  }
];

Funktionsersetzer (Schlüssel, Wert) {
  wenn (Schlüssel === 'Punktzahl') {
    wenn (Wert === 100) {
      gib 'S' zurück;
    } sonst wenn (Wert >= 90) {
      gib 'A' zurück;
    } sonst wenn (Wert >= 70) {
      gib 'B' zurück;
    } sonst wenn (Wert >= 50) {
      gib 'C' zurück;
    } anders {
      gib 'E' zurück;
    }
  }
  Rückgabewert;
}
console.log(JSON.stringify(Studenten, Ersetzer, 4))

Im obigen Code verwenden wir einen Ersetzer, um die Punktzahl von einem Prozentsatz durch eine Note zu ersetzen.

Es ist zu beachten, dass, wenn der zweite Parameter von stringify eine Funktion ist und ihr Rückgabewert nicht definiert ist, die entsprechende Eigenschaft nicht serialisiert wird. Wenn andere Werte zurückgegeben werden, wird der zurückgegebene Wert anstelle des ursprünglichen Werts für die Serialisierung verwendet.

3. Der dritte Parameter - String-Einrückung

Der dritte Parameter der Methode JSON.stringify() steuert Einrückungen und Leerzeichen. Wenn dieser Parameter ein numerischer Wert ist, gibt er die Anzahl der Leerzeichen für jede Einrückungsebene an. Um beispielsweise 4 Leerzeichen pro Ebene einzurücken, können Sie Folgendes tun:

lass json1 = {
  Titel: "Json.stringify",
  Autor:
    "Boot auf den Wellen"
  ],
  Jahr: 2021
};
let jsonText = JSON.stringify(json1, null, 4);

Das resultierende JSONText-Format ist wie folgt:

{
    "Titel": "Json.stringify",
    "Autor": [
        "Boot auf den Wellen"
    ],
    "Jahr": 2021
}

JSON.stringify() berücksichtigt bei der Datenverarbeitung sowohl die Datenkonvertierung als auch die Lesbarkeit. Die Lesbarkeit wird jedoch häufig übersehen.

4. toJSON()-Methode – benutzerdefinierte JSON-Serialisierung

Manchmal erfordern Objekte eine benutzerdefinierte JSON-Serialisierung zusätzlich zu JSON.stringify(). An diesem Punkt können Sie dem zu serialisierenden Objekt eine toJSON()-Methode hinzufügen. Die Serialisierung gibt dann basierend auf dieser Methode die entsprechende JSON-Darstellung zurück.

Das folgende Objekt fügt eine toJSON()-Methode zur benutzerdefinierten Serialisierung hinzu:

lass json1 = {
  Titel: "Json.stringify",
  Autor:
    "Boot auf den Wellen"
  ],
  Jahr: 2021,
  wie: 'frontend',
  weixin: 'frontJS',
  toJSON: Funktion () {
    gib diesen Autor zurück
  }
};
console.log(JSON.stringify(json1)); // ["Boot in den Wellen"]

Beachten Sie, dass Pfeilfunktionen nicht zum Definieren der Methode toJSON() verwendet werden können. Der Hauptgrund besteht darin, dass Pfeilfunktionen lexikalisch auf den globalen Gültigkeitsbereich beschränkt sind, was in diesem Fall nicht angemessen ist.

2. Anwendungsszenarien

1. Bestimmen Sie, ob ein Array ein Objekt enthält oder ob die Objekte gleich sind.

//Beurteilen, ob das Array ein Objekt enthält let data = [
    {name:'Boot in den Wellen'},
    {name:'Frontend-Handwerker'},
    {name:'Frontend-Entwicklung'},
    ],
    val = {name:'Boot in den Wellen'};
Konsole.log(JSON.stringify(Daten).indexOf(JSON.stringify(Wert)) !== -1); //wahr

Wir können auch die Methode JSON.stringify() verwenden, um zu bestimmen, ob zwei Objekte gleich sind.

// Prüfen, ob Objekte gleich sind let obj1 = {
    ein: 1,
    b: 2
  }
  let obj2 = {
    ein: 1,
    b: 2,
  }
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)) // wahr

Allerdings hat diese Methode große Einschränkungen: Wenn das Objekt die Reihenfolge der Tasten anpasst, wird es falsch beurteilt!

// Nach dem Anpassen der Position des Objektschlüssels let obj1 = {
    ein: 1,
    b: 2
  }
  let obj2 = {
    b: 2,
    ein: 1,
  }
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)) // falsch

2. Bei Verwendung von localStorage/sessionStorage

Standardmäßig können localStorage/sessionStorage nur Zeichenfolgen speichern. Bei der tatsächlichen Entwicklung müssen wir häufig Objekttypen speichern. In diesem Fall müssen wir json.stringify() verwenden, um das Objekt beim Speichern in eine Zeichenfolge umzuwandeln, und json.parse() verwenden, um es beim Abrufen des lokalen Caches wieder in das Objekt umzuwandeln.

//Daten speichern Funktion setLocalStorage(key,val) {
    window.localStorage.setItem(Schlüssel, JSON.stringify(Wert));
};
// Daten abrufen Funktion getLocalStorage(Schlüssel) {
    let val = JSON.parse(window.localStorage.getItem(Schlüssel));
    Rückgabewert;
};
// Test setLocalStorage('Test',['Front-End-Handwerker','Boot in den Wellen']);
console.log(getLocalStorage('Test')); 

3. Implementieren Sie eine tiefe Kopie von Objekten

Während der Entwicklung erstellen wir häufig eine vollständige Kopie der Daten, um beliebige Vorgänge auszuführen, da wir befürchten, die Originaldaten zu beeinträchtigen. Die Verwendung von JSON.stringify() und JSON.parse() zum Erstellen einer vollständigen Kopie ist eine gute Wahl.

sei arr1 = [1, 3, {
    Benutzername: „kobe“
}];
Lassen Sie arr2 = JSON.parse(JSON.stringify(arr1));
arr2[2].Benutzername = "duncan";
 konsole.log(arr1, arr2) 

Dabei wird JSON.stringify verwendet, um das Objekt in eine JSON-Zeichenfolge zu konvertieren, und dann wird JSON.parse verwendet, um die Zeichenfolge in ein Objekt zu analysieren. Auf diese Weise wird ein neues Objekt generiert, und das neue Objekt öffnet einen neuen Stapel, um eine tiefe Kopie zu erzielen.

Obwohl mit dieser Methode eine tiefe Kopie von Arrays oder Objekten erstellt werden kann, kann sie weder Funktionen noch reguläre Ausdrücke verarbeiten, da der erhaltene reguläre Ausdruck nach der Verarbeitung dieser beiden basierend auf JSON.stringify und JSON.parse kein regulärer Ausdruck mehr ist (er wird zu einem leeren Objekt) und die erhaltene Funktion keine Funktion mehr ist (er wird null).

lass arr1 = [1, 3, Funktion () { }, {
  Benutzername: „kobe“
}];
Lassen Sie arr2 = JSON.parse(JSON.stringify(arr1));
arr2[3].Benutzername = "duncan";
Konsole.log(arr1, arr2) 

3. Vorsichtsmaßnahmen für die Anwendung

Obwohl JSON.stringify() sehr leistungsfähig ist, können einige Eigenschaften nicht in Zeichenfolgen umgewandelt werden. Daher müssen Sie während der Entwicklung auf die folgenden Situationen achten, um unerwartete Fehler zu vermeiden.

1. Der konvertierte Wert enthält NaN und Infinity

lass meinObj = {
  Name: "Boot in den Wellen",
  Alter: Unendlichkeit,
  Geld: NaN,
};
console.log(JSON.stringify(meinObj));
// {"name":"Auf den Wellen reiten","age":null,"money":null}

JSON.stringify([NaN, Unendlich])
// [null,null]

2. Der konvertierte Wert enthält undefinierte, beliebige Funktions- und Symbolwerte

Es gibt zwei Situationen:

• Arrays, undefinierte, beliebige Funktionen und Symbolwerte werden bei der Serialisierung in null umgewandelt.

JSON.stringify([undefiniert, Funktion () { }, Symbol("")]);
// '[null,null,null]'

• Nicht-Array-, undefinierte, beliebige Funktions- und Symbolwerte werden bei der Serialisierung ignoriert

JSON.stringify({ x: undefiniert, y: Funktion () { }, z: Symbol("") });
// '{}'

3. Zirkuläre Verweise

Wenn der Wert der Eigenschaft eines Objektes auf indirekte Weise auf das Objekt selbst verweist, handelt es sich um einen zirkulären Verweis. Zum Beispiel:

lass bar = {
  A: {
    c:foo
  }
};
lass foo = {
  b: Balken
};

JSON.stringify(foo)

In diesem Fall meldet die Serialisierung einen Fehler:

// Fehlermeldung Uncaught ReferenceError: foo ist nicht definiert
    um <anonym>:3:8

4. Wenn es nicht aufzählbare Attributwerte enthält

Nicht aufzählbare Eigenschaften werden standardmäßig ignoriert:

let personObj = Objekt.erstellen(null, {
  Name: {Wert: "Boot in den Wellen", aufzählbar: false},
  Jahr: {Wert: "2021", aufzählbar: true},
})

console.log(JSON.stringify(personObj)) // {"Jahr":"2021"}

IV. Fazit

JSON.stringify() wird verwendet, um ein JavaScript-Objekt in einen JSON-String zu serialisieren. Diese Methode verfügt über einige Optionen, mit denen das Standardverhalten geändert werden kann, um Filter- oder Änderungsprozesse zu implementieren. Allerdings ist zu beachten, dass manche Eigenschaften nicht in Strings umgewandelt werden können, diese Fallstricke sollten daher bei der Entwicklung vermieden werden!

Oben finden Sie den detaillierten Inhalt der Zusammenfassung der Verwendung von JavaScript JSON.stringify(). Weitere Informationen zur Verwendung von JavaScript JSON.stringify() finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!