前端Map的应用

2020-08-10  本文已影响0人  小遁哥

在没有Map的日子里,面对key、value的需求,选择ObjectlodashkeyBy 也不错
相对于Object,Map更方便进行类型声明、遍历等操作

用二维数组初始化Map

  const map: Map<string, string> = new Map([
    ['12', '12'],
    ['13', '13'],
  ]);

Map通过set方法添加或更新值。

export interface IHero {
  name: string;
  age: number;
}
  const map: Map<string, IHero> = new Map();
  map.set('0', { name: '熔岩巨兽', age: 1 });
  map.set('1', { name: '九尾妖狐', age: 18 });
  map.set('0', { name: '熔岩巨兽', age: 100 });

get 查询
delete 删除
clear 清空
size 数据的个数

如果只关心value,可以通过valuesforEach方法

  map.forEach((hero) => {
    console.log(hero);
  });

values返回一个IterableIterator,可以通过扩展运算符和for ... of

[...map.values()].forEach((hero) => {
    console.log(hero);
  });
  for (let hero of map.values()) {
    console.log(hero);
  }

如果只关心key,可以通过keys 同上

通常我们既需要关心key也需要关心value

  for (let [id, hero] of map) {
    console.log(id, hero);
  }

map 换成map.entries()也是可行的,后者也返回一个IterableIterator

自然也可以

  console.log([...map]);

浅复制map

  const map1 = new Map(map);
  map1.get('0')!.name = '哈哈';

  console.log(map, map1);

或许WeakMap能在关键的时候帮上大忙。

上一篇下一篇

猜你喜欢

热点阅读