美文网首页
前端Map的应用

前端Map的应用

作者: 小遁哥 | 来源:发表于2020-08-10 23:36 被阅读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能在关键的时候帮上大忙。

    相关文章

      网友评论

          本文标题:前端Map的应用

          本文链接:https://www.haomeiwen.com/subject/dybsdktx.html