Tôi muốn bắt đầu sử dụng Bản đồ ES6 thay vì các đối tượng JS nhưng tôi đang bị cản trở vì tôi không thể tìm ra cách JSON.stringify () một Bản đồ. Khóa của tôi được đảm bảo là chuỗi và giá trị của tôi sẽ luôn được liệt kê. Tôi có thực sự phải viết một phương thức wrapper để tuần tự hóa không?

Bạn không thể.

Các khóa của bản đồ có thể là bất kỳ thứ gì, kể cả các đối tượng. Nhưng cú pháp JSON chỉ cho phép các chuỗi làm khóa. Vì vậy, nó không thể trong một trường hợp chung.

Các khóa của tôi được đảm bảo là chuỗi và giá trị của tôi sẽ luôn là danh sách

Trong trường hợp này, bạn có thể sử dụng một đối tượng đơn giản. Nó sẽ có những ưu điểm sau:

• Nó sẽ có thể được chuỗi thành JSON.
• Nó sẽ hoạt động trên các trình duyệt cũ hơn.
• Nó có thể nhanh hơn.

Bạn không thể trực tiếp xâu chuỗi Mapđối tượng vì nó không có bất kỳ thuộc tính nào, nhưng bạn có thể chuyển đổi nó thành một mảng các bộ giá trị:

jsonText = JSON.stringify(Array.from(map.entries()));

Ngược lại, sử dụng

map = new Map(JSON.parse(jsonText));

Cả hai JSON.stringifyvà JSON.parsehỗ trợ một lập luận thứ hai. replacervà revivertương ứng. Với trình thay thế và trình phục hồi bên dưới, bạn có thể thêm hỗ trợ cho đối tượng Bản đồ gốc, bao gồm các giá trị lồng nhau sâu sắc

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

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

Cách sử dụng :

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

Làm tổ sâu với sự kết hợp của Mảng, Đối tượng và Bản đồ

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

Mặc dù chưa có phương pháp nào được cung cấp bởi ecmascript, điều này vẫn có thể được thực hiện bằng cách sử dụng JSON.stingifynếu bạn ánh xạ Maptới một JavaScript nguyên thủy. Đây là mẫu Mapchúng tôi sẽ sử dụng.

const map = new Map();
map.set('foo', 'bar');
map.set('baz', 'quz');

Chuyển đến một đối tượng JavaScript

Bạn có thể chuyển đổi sang JavaScript Object theo nghĩa đen bằng hàm trợ giúp sau.

const mapToObj = m => {
  return Array.from(m).reduce((obj, [key, value]) => {
    obj[key] = value;
    return obj;
  }, {});
};

JSON.stringify(mapToObj(map)); // '{"foo":"bar","baz":"quz"}'

Chuyển đến một Mảng đối tượng JavaScript

Chức năng trợ giúp cho chức năng này sẽ còn nhỏ gọn hơn

const mapToAoO = m => {
  return Array.from(m).map( ([k,v]) => {return {[k]:v}} );
};

JSON.stringify(mapToAoO(map)); // '[{"foo":"bar"},{"baz":"quz"}]'

Đi đến Mảng của Mảng

Điều này thậm chí còn dễ dàng hơn, bạn chỉ có thể sử dụng

JSON.stringify( Array.from(map) ); // '[["foo","bar"],["baz","quz"]]'

Sử dụng bản đồ sytax trải rộng có thể được tuần tự hóa trong một dòng:

JSON.stringify([...new Map()]);

và deserialize nó bằng:

let map = new Map(JSON.parse(map));

Xâu chuỗi một Mapthể hiện (các đối tượng làm khóa là OK) :

JSON.stringify([...map])

hoặc là

JSON.stringify(Array.from(map))

hoặc là

JSON.stringify(Array.from(map.entries()))

định dạng đầu ra:

// [["key1","value1"],["key2","value2"]]

Một giải pháp tốt hơn

    // somewhere...
    class Klass extends Map {

        toJSON() {
            var object = { };
            for (let [key, value] of this) object[key] = value;
            return object;
        }

    }

    // somewhere else...
    import { Klass as Map } from '@core/utilities/ds/map';  // <--wherever "somewhere" is

    var map = new Map();
    map.set('a', 1);
    map.set('b', { datum: true });
    map.set('c', [ 1,2,3 ]);
    map.set( 'd', new Map([ ['e', true] ]) );

    var json = JSON.stringify(map, null, '\t');
    console.log('>', json);

Đầu ra

    > {
        "a": 1,
        "b": {
            "datum": true
        },
        "c": [
            1,
            2,
            3
        ],
        "d": {
            "e": true
        }
    }

Hy vọng rằng ít rắc rối hơn các câu trả lời ở trên.

Giải pháp bên dưới hoạt động ngay cả khi bạn có Bản đồ lồng nhau

function stringifyMap(myMap) {
    function selfIterator(map) {
        return Array.from(map).reduce((acc, [key, value]) => {
            if (value instanceof Map) {
                acc[key] = selfIterator(value);
            } else {
                acc[key] = value;
            }

            return acc;
        }, {})
    }

    const res = selfIterator(myMap)
    return JSON.stringify(res);
}