typeScript 之 Map

工具: PlayGround

源码: GitHub TypeScript


Map简介

MapES6引入的一种新的数据结构, 它是一只用于存储**键值对(key-value)**的集合。

let map = new Map();
let map_1: Map<string, number> = new Map();
let map_2: Map<string, number> = new Map([["a", 1], ["b", 2]]);

console.log(typeof(map));       // object

代码相关:

// 参考 es2015.collection.d.ts
interface MapConstructor {
  new(): Map<any, any>;
  new <K, V>(entries?: readonly (readonly [K, V])[] | null): Map<K, V>;
  readonly prototype: Map<any, any>;
}
declare var Map: MapConstructor;

Map对象主要提供的接口如下:

接口 返回值 描述
size number 获取Map对象大小
set() this 设置key-value增加元素,如果存在则覆盖value
get() V | undefined 通过key获取value, 没有返回undefined
has() boolean 通过key检测元素是否存在
delete() boolean 通过key删除元素,如果成功返回true
clear() void 清空所有元素
keys() IterableIterator 返回keys的迭代器对象,类型为object
values() IterableIterator 返回values的迭代器对象,类型为object
entries() IterableIterator<[K, V]> 返回keys-values的迭代器对象,类型为object

代码相关:

// es2015.iterable.d.ts
interface Map<K, V> {
  // 返回map中每个条目的键值对的可迭代对象
  entries(): IterableIterator<[K, V]>;
  // 获取Map对象下所有的key集合
  keys(): IterableIterator<K>;
  // 获取Map对象下所有的value集合
  values(): IterableIterator<V>;
}

// es2015.collection.d.ts
interface Map<K, V> {
  // 移除所有元素
  clear(): void;
  // 删除元素,删除成功返回true
  delete(key: K): boolean;
  // 遍历,并执行指定的回调函数
  forEach(callbackfn: (value: V, key: K, map: Map<K, V>) => void, thisArg?: any): void;
  // 根据key键返回value值,如果没有则返回undefined
  get(key: K): V | undefined;
  // 检测指定键的元素是否存在
  has(key: K): boolean;
  // 添加键值对到Map中,如果key已经存在,则value被更新
  set(key: K, value: V): this;
  // 获取Map对象大小
  readonly size: number;
}

实例

基本使用:

// 创建map对象
let map = new Map();

// --------- set设置键值对 ---------
map.set("key_1", 1);
map.set("key_2", 2);
map.set("key_3", "c");
// Map (3) {"key_1" => 1, "key_2" => 2, "key_3" => "c"} 
console.log(map);   

// 注意键值对如果key已经存在,则value会更新
map.set("key_3", 3);
// Map (3) {"key_1" => 1, "key_2" => 2, "key_3" => 3} 
console.log(map);   

// --------- has/get 获取值相关 ---------
// 通过has检测是否元素存在, 如果存在返回true 
// 通过get获取value, 如果不存在则返回undefined
console.log(map.has("key_3"),map.get("key_3"));      // true,  3 
console.log(map.has("key_5"),map.get("key_5"));      // false,  undefined 

// --------- delete/clear 删除元素 ---------
let isDelete = map.delete("key_2");
// true,  Map (2) {"key_1" => 1, "key_3" => 3} 
console.log(isDelete, map); 

// 删除所有元素
map.clear();
console.log(map);       // Map (0) {}

遍历对象主要通过如下:

  • forEach(callbackfn: (value: V, key: K, map: Map) => void, thisArg?: any): void 遍历执行回调相关
  • keys(): IterableIterator 获取keys的迭代器对象遍历
  • values(): IterableIterator 获取values的迭代器对象遍历
  • entries(): IterableIterator<[K, V]> 获取keys-values的迭代器对象遍历
let map = new Map();

// 生成键值对
for (let key = 0; key < 4; key++) {
    const value = Math.floor(Math.random() * 1000);
    map.set(key, value);
}
console.log(map);

// key遍历
for (let key of map.keys()) {
    console.log(key);
}

// value遍历
for (let value of map.values()) {
    console.log(value);
}

// key-value遍历 
for (let entry of map.entries()) {
    console.log(entry[0], entry[1]);
}

// forEach遍历
map.forEach((value, key, map) => {
    console.log(key, value);
})

其他

Map对象是不支持自动排序的, 它是按照set插入元素的顺序来排列的。 如果希望对Map对象排序,可以通过获取keys进行排序,类似代码:

const map = new Map<string, number>();
map.set("b", 2);
map.set("a", 1);
map.set("c", 3);

const sortedKeys = Array.from(map.keys()).sort();
for (const key of sortedKeys) {
  console.log(key, map.get(key));
}

/*
[LOG]: "a",  1 
[LOG]: "b",  2 
[LOG]: "c",  3 
*/

Map对象中,通过key查找value,比对key的时候是严格按照**===进行比对的, 因此可以拓展下, 对象中可以对key**设置为null, 但不推荐, 会存在未知的问题。

你可能感兴趣的:(typescript,前端)