如何使用 JSON.stringify() 和 JSON.parse() 序列化和反序列化 ES6 映射？

JSON.stringify() 和ES6 Maps

ES6 Maps 提供了JavaScript 物件的強大替代方案，但使用JSON.stringify( 序列化它們）可能具有挑戰性。為了克服這個障礙，您可以利用 JSON.stringify() 中的 Replacer 函數及其 JSON.parse() 中的對應 reviver。

帶有替換器的自訂序列化

Replacer 函數可讓您自訂物件的序列化方式。在這種情況下，您可以修改它來處理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;
  }
}

使用reviver 進行自訂反序列化

同樣，reviver 函數允許您更改物件的反序列​​化方式。您可以使用它來還原Map 物件：

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

用法

定義這些函數後，您現在可以有效地使用JSON.stringify() 和JSON. parse( ) Map 物件：

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

深度巢狀

提供的解決方案支援陣列、物件和Map 的深度嵌套，如下所示：

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

以上是如何使用 JSON.stringify() 和 JSON.parse() 序列化和反序列化 ES6 映射？的詳細內容。更多資訊請關注PHP中文網其他相關文章！