Maison > interface Web > js tutoriel > le corps du texte

Utilisations peu connues de JSON.stringify

青灯夜游
Libérer: 2019-11-30 17:39:12
avant
3025 Les gens l'ont consulté

Il existe de nombreuses fonctions communes dans JS. Nous pouvons les utiliser tous les jours, mais nous ne connaissons pas certaines de leurs fonctions supplémentaires. JSON.stringify est une telle fonction. Jetons un coup d'œil à son utilisation particulière aujourd'hui. La méthode

Utilisations peu connues de JSON.stringify

Basic

JSON.stringify reçoit une variable et la convertit en une représentation JSON.

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

JSON.stringify(boy);
// {"name":"John","age":23}
Copier après la connexion

JSON est une chaîne pure, qui est essentiellement un sous-ensemble de JS, donc tous les objets JS ne peuvent pas être convertis en JSON :

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

JSON.stringify(boy)
// {"name":"John","age":23,"hobbies":{}}
Copier après la connexion

Dans l'exemple ci-dessus, l'objet Map est Sera ignoré et converti en un objet normal. Si l'attribut est une fonction, cet attribut sera ignoré. Les étudiants intéressés peuvent l'essayer.

Deuxième paramètre

JSON.stringify peut recevoir un deuxième paramètre, qui peut être appelé un replacer remplaçant.

Vous pouvez transmettre un tableau de chaînes, et seules les propriétés de ce tableau seront converties, tout comme une liste blanche.

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

JSON.stringify(boy, ['name'])
// {"name":"John"}
Copier après la connexion

Nous pouvons utiliser cette fonctionnalité pour convertir uniquement les attributs qui doivent être convertis et filtrer les longs tableaux, les objets d'erreur, etc.

Ce replacer paramètre peut également recevoir une fonction. Cette fonction parcourt l'intégralité de l'objet, en transmettant les clés et les valeurs, et vous permet de décider comment les remplacer.

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"]}
Copier après la connexion

Et si vous retournez undefined (retourner null ne fonctionne pas), cet attribut sera supprimé :

JSON.stringify(boy, (key, value) => {
  if (typeof value === 'string') {
    return undefined
  }
  return value
})
// {"age":23,"hobbies":{}}
Copier après la connexion

Le troisième paramètre

Le troisième paramètre space contrôle l'espacement de la chaîne JSON convertie.

Si le paramètre est un nombre, indentez du nombre d'espaces :

JSON.stringify(boy, null, 2)
// {
//   "name": "John",
//   "age": 23,
//   "hobbies": {}
// }
Copier après la connexion

Et si le paramètre est une chaîne, indentez de la chaîne :

JSON.stringify(boy, null, '--')
// {
//   --"name": "John",
//   --"age": 23,
//   --"hobbies": {}
// }
Copier après la connexion

Méthode toJSON

Si l'objet que nous voulons convertir a une méthode toJSON, nous pouvons personnaliser le processus de sérialisation. Au lieu de sérialiser l'objet, vous pouvez renvoyer une nouvelle valeur à partir de la méthode, et cette valeur sera sérialisée à la place de l'objet d'origine.

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"}
Copier après la connexion

N'est-ce pas intéressant ? Il est parfois utile de lire attentivement certains documents~

Article de référence

  • Adresse originale : https://mp .weixin.qq.com/s/_e83_G7RjVt2eR_ro7blOA

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

Cet article provient de la colonne tutoriel js, bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:segmentfault.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal