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

Comment sérialiser et désérialiser des cartes ES6 avec JSON.stringify et JSON.parse ?

Mary-Kate Olsen
Libérer: 2024-11-20 13:00:22
original
222 Les gens l'ont consulté

How to Serialize and Deserialize ES6 Maps with JSON.stringify and JSON.parse?

Comment sérialiser les cartes ES6 pour le traitement JSON

Lors du passage des objets ES6 aux cartes, l'impossibilité de directement JSON.stringify un La carte peut être un obstacle. Cet article explore une solution à ce défi, en utilisant le deuxième argument de JSON.stringify et JSON.parse, respectivement replacer et reviver.

Fonctions personnalisées de remplacement et de reviver

Pour ajouter la prise en charge de Maps, des fonctions de remplacement et de relance personnalisées peuvent être créées. Ces fonctions gèrent la conversion vers et depuis JSON :

function replacer(key, value) {
  if (value instanceof Map) {
    return {
      dataType: 'Map',
      value: Array.from(value.entries()), // or with spread: value: [...value]
    };
  } else {
    return value;
  }
}
Copier après la connexion
function reviver(key, value) {
  if (typeof value === 'object' && value !== null) {
    if (value.dataType === 'Map') {
      return new Map(value.value);
    }
  }
  return value;
}
Copier après la connexion

Utilisation

Avec les fonctions personnalisées en place, la sérialisation et la désérialisation de Maps deviennent simples :

const originalValue = new Map([['a', 1]]);
const str = JSON.stringify(originalValue, replacer);
const newValue = JSON.parse(str, reviver);
console.log(originalValue, newValue);
Copier après la connexion

Deep Nesting

La technique s'étend aux structures profondément imbriquées composées de cartes, de tableaux et d'objets :

const originalValue = [
  new Map([['a', {
    b: {
      c: new Map([['d', 'text']])
    }
  }]])
];
const str = JSON.stringify(originalValue, replacer);
const newValue = JSON.parse(str, reviver);
console.log(originalValue, newValue);
Copier après la connexion

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!

source:php.cn
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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal