Comment puis-je sérialiser et désérialiser des cartes ES6 à l'aide de JSON.stringify() et JSON.parse() ?

JSON.stringify() et ES6 Maps

ES6 Maps offrent une alternative puissante aux objets JavaScript, mais en les sérialisant à l'aide de JSON.stringify( ) peut être un défi. Pour surmonter cet obstacle, vous pouvez exploiter la fonction de remplacement dans JSON.stringify() et son homologue reviver dans JSON.parse().

Sérialisation personnalisée avec remplacement

La fonction de remplacement vous permet de personnaliser la façon dont les objets sont sérialisés. Dans ce cas, vous pouvez le modifier pour gérer les objets Map :

function replacer(key, value) {
  if(value instanceof Map) {
    return {
      dataType: 'Map',
      value: Array.from(value.entries()), // or with spread: value: [...value]
    };
  } else {
    return value;
  }
}

Désérialisation personnalisée avec reviver

De même, la fonction reviver vous permet de modifier la façon dont les objets sont désérialisés . Vous pouvez l'utiliser pour restaurer des objets Map :

function reviver(key, value) {
  if(typeof value === 'object' && value !== null) {
    if (value.dataType === 'Map') {
      return new Map(value.value);
    }
  }
  return value;
}

Utilisation

Avec ces fonctions définies, vous pouvez désormais efficacement JSON.stringify() et JSON.parse( ) Objets cartographiques :

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

Nidification profonde

Le fourni les solutions prennent en charge l'imbrication profonde de tableaux, d'objets et de cartes, comme démontré ci-dessous :

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);

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!