Bagaimanakah Saya Boleh Mensiri dan Menyahseri Peta ES6 Menggunakan JSON.stringify() dan JSON.parse()?

JSON.stringify() dan ES6 Maps

ES6 Maps menyediakan alternatif yang berkuasa kepada objek JavaScript, tetapi mensirikannya menggunakan JSON.stringify( ) boleh mencabar. Untuk mengatasi halangan ini, anda boleh memanfaatkan fungsi pengganti dalam JSON.stringify() dan reviver rakan sejawatannya dalam JSON.parse().

Pensiri Tersuai dengan pengganti

Fungsi pengganti membolehkan anda menyesuaikan cara objek disiri. Dalam kes ini, anda boleh mengubah suainya untuk mengendalikan objek Peta:

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

Penyahserikatan Tersuai dengan pembangkit semula

Begitu juga, fungsi reviver membolehkan anda mengubah cara objek dinyahsiri . Anda boleh menggunakannya untuk memulihkan objek Peta:

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

Penggunaan

Dengan fungsi ini ditakrifkan, anda kini boleh JSON.stringify() dan JSON.parse() dengan berkesan ) Objek peta:

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

Deep Nesting

Penyelesaian yang disediakan menyokong sarang dalam tatasusunan, objek dan Peta, seperti yang ditunjukkan di bawah:

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mensiri dan Menyahseri Peta ES6 Menggunakan JSON.stringify() dan JSON.parse()?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!