Heim  >  Artikel  >  Web-Frontend  >  Wenig bekannte Verwendungen von JSON.stringify

Wenig bekannte Verwendungen von JSON.stringify

青灯夜游
青灯夜游nach vorne
2019-11-30 17:39:122977Durchsuche

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}

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":{}}

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"}

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"]}

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":{}}

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": {}
// }

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": {}
// }

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"}

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!

Stellungnahme:
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen