Skip to content

Map 数据类型

在以前,我们经常拿对象当做 Map 数据结构使用,他们都是使用 key/value 的形式对数据进行存取。

Map 类型有一些独特的地方:

通过二维数组取生成

Map 类型也有类似于对象类型的字面值初始化,传递一个数组,这个数组的每一项都包含两个元素,第一个元素作为 key,第二个元素作为 value

javascript
const map = new Map([
  ['a', 1],
  ['b', 2],
]);

下面的测试用例会通过:

javascript
describe('map', () => {
  it('constructor', () => {
    const map = new Map();
    map.set('a', 1);
    map.set('b', 2);
    expect(map).toEqual(
      new Map([
        ['a', 1],
        ['b', 2],
      ])
    );
  });
});

有序的键

使用 for...of 语法遍历一个 Map 类型的值时,键的顺序遵循我们插入的顺序。

没有额外的属性

Map 类型只会保存我们显式插入的键,不会意外地访问到原型链中的键。

对象类型也可以通过 Object.create(null) 来创建一个干净的对象实例。

键可以为任意类型的值

Map 类型的键可以使用各种类型的值,而对象类型的键只能为 string 或者 symbol 类型。

方便地获取键值对的个数

Map 类型自带了 size() 方法去获取键值对的个数,对象类型需要借助其他途径,例如 Object.keys() 方法。

频繁增删数据时性能更好

在需要频繁增删键值对时,使用 Map 比对象类型的性能更好,对象类型对此没有做优化操作。

JSON 化

对象类型原生支持 JSON.stringify()JSON.parse() 方法。不过这两个方法支持传递额外的参数。

javascript
describe('map', () => {
  it('stringify', () => {
    function replacer(key, value) {
      if (value instanceof Map) {
        return {
          dataType: 'Map',
          value: Array.from(value.entries()),
        };
      } else {
        return value;
      }
    }
    const map = new Map();
    map.set('a', 1);
    map.set('b', 2);
    expect(JSON.stringify(map, replacer)).toEqual(
      '{"dataType":"Map","value":[["a",1],["b",2]]}'
    );
  });
  it('parse', () => {
    function reviver(key, value) {
      if (typeof value === 'object' && value !== null) {
        if (value.dataType === 'Map') {
          return new Map(value.value);
        }
      }
      return value;
    }
    const map = new Map();
    map.set('a', 1);
    map.set('b', 2);
    expect(
      JSON.parse('{"dataType":"Map","value":[["a",1],["b",2]]}', reviver)
    ).toEqual(map);
  });
});

参考资料

  1. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map
  2. https://stackoverflow.com/questions/29085197/how-do-you-json-stringify-an-es6-map
  3. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify