Heim > Web-Frontend > js-Tutorial > Hauptteil

Wenig bekannte Verwendungen von JSON.stringify

青灯夜游
Freigeben: 2019-11-30 17:39:12
nach vorne
3016 Leute haben es durchsucht

Es gibt viele gemeinsame Funktionen in JS. Wir verwenden sie vielleicht jeden Tag, aber wir kennen einige ihrer zusätzlichen Funktionen nicht. JSON.stringify ist eine solche Funktion. Werfen wir heute einen Blick auf ihre besondere Verwendung. Die Methode

Wenig bekannte Verwendungen von JSON.stringify

Basic

JSON.stringify empfängt eine Variable und wandelt sie in eine JSON-Darstellung um.

const boy = { 
  name: 'John', 
  age: 23 
};

JSON.stringify(boy);
// {"name":"John","age":23}
Nach dem Login kopieren

JSON ist eine reine Zeichenfolge, die im Wesentlichen eine Teilmenge von JS ist, daher können nicht alle JS-Objekte in JSON konvertiert werden:

const boy = { 
  name: 'John', 
  age: 23,
  hobbies: new Map([[0, 'coding'], [1, 'earn money']])
}

JSON.stringify(boy)
// {"name":"John","age":23,"hobbies":{}}
Nach dem Login kopieren

Im obigen Beispiel ist das Map-Objekt Will be ignoriert und in ein normales Objekt umgewandelt. Wenn es sich bei dem Attribut um eine Funktion handelt, wird dieses Attribut ignoriert. Interessierte Schüler können es ausprobieren.

Zweiter Parameter

JSON.stringify kann einen zweiten Parameter erhalten, der als replacer-Ersatz bezeichnet werden kann.

Sie können ein String-Array übergeben und nur die Eigenschaften in diesem Array werden konvertiert, genau wie bei einer Whitelist.

const boy = { 
  name: 'John', 
  age: 23
}

JSON.stringify(boy, ['name'])
// {"name":"John"}
Nach dem Login kopieren

Mit dieser Funktion können wir nur die Attribute konvertieren, die konvertiert werden müssen, und lange Arrays, Fehlerobjekte usw. herausfiltern.

Dieser replacer Parameter kann auch eine Funktion erhalten. Diese Funktion durchläuft das gesamte Objekt, übergibt die Schlüssel und Werte und lässt Sie entscheiden, wie diese ersetzt werden sollen.

const boy = { 
  name: 'John', 
  age: 23,
  hobbies: new Map([[0, 'coding'], [1, 'earn money']])
}

JSON.stringify(boy, (key, value) => {
  if (value instanceof Map) {
    return [...value.values()]
  }
  return value
})
// {"name":"John","age":23,"hobbies":["coding","earn money"]}
Nach dem Login kopieren

Und wenn Sie undefined zurückgeben (die Rückgabe von null funktioniert nicht), wird dieses Attribut entfernt:

JSON.stringify(boy, (key, value) => {
  if (typeof value === 'string') {
    return undefined
  }
  return value
})
// {"age":23,"hobbies":{}}
Nach dem Login kopieren

Der dritte Parameter

Der dritte Parameter space steuert den Abstand der konvertierten JSON-Zeichenfolge.

Wenn der Parameter eine Zahl ist, rücken Sie um die Anzahl der Leerzeichen ein:

JSON.stringify(boy, null, 2)
// {
//   "name": "John",
//   "age": 23,
//   "hobbies": {}
// }
Nach dem Login kopieren

Und wenn der Parameter eine Zeichenfolge ist, rücken Sie um die Anzahl der Leerzeichen ein:

JSON.stringify(boy, null, '--')
// {
//   --"name": "John",
//   --"age": 23,
//   --"hobbies": {}
// }
Nach dem Login kopieren

toJSON-Methode

Wenn das Objekt, das wir konvertieren möchten, über eine toJSON-Methode verfügt, können wir den Prozess der Serialisierung anpassen. Anstatt das Objekt zu serialisieren, können Sie einen neuen Wert von der Methode zurückgeben, und dieser Wert wird anstelle des ursprünglichen Objekts serialisiert.

const boy = { 
  name: 'John', 
  age: 23,
  hobbies: new Map([[0, 'coding'], [1, 'earn money']]),
  toJSON() {
    return {
      name: `${this.name} (${this.age})`,
      favorite: this.hobbies.get(0)
    }
  }
}

JSON.stringify(boy)
// {"name":"John (23)","favorite":"coding"}
Nach dem Login kopieren

Ist das nicht interessant? Manchmal ist es nützlich, einige Dokumente sorgfältig zu lesen~

Referenzartikel

  • Originaladresse: https:// mp .weixin.qq.com/s/_e83_G7RjVt2eR_ro7blOA

  • MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON / stringify

Dieser Artikel stammt aus der Spalte JS-Tutorial, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonWenig bekannte Verwendungen von JSON.stringify. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage