TypeScript 之 Map

工具： PlayGround

源码： GitHub TypeScript

Map简介

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

// 简单使用，使用 {}
let data = {a: 1, b: "2", c: true};
console.log(data.a, data.b, data.c);    // 1,  "2",  true 

// 使用Map对象创建
let map = new Map();
map.set("a", 1);
map.set("b", "2");
map.set("c", true);
console.log(map);  // Map (3) {"a" => 1, "b" => "2", "c" => true
console.log(map.size); // 3

注： Map对象和 {} 根据语言的boxing和unboxing机制，可以互相使用。

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示例

---

基本使用

// 创建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) {}

针对于map对象的检测注意，不要单纯的使用!进行判定：

// 不推荐
let map = {};
if (!map || map == null) {
    console.error("map is null");
}

// 推荐方式1:
let map = {};
if (!map || Object.keys(map).length <= 0) {
    console.error("map is null");
}

// 推荐方式2:
let dataMap = new Map();
if (!dataMap || dataMap.size <= 0) {
    console.error("dataMap is null");  
}

遍历

遍历主要有：

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

let map = new Map();
map.set("a", 1);
map.set("b", "hello");
map.set("c", true);

if (map.size <= 0) {
    console.error("map is null");
}

// keys遍历
for (let key of map.keys()) {
    console.log(`key:${key}, value:${map.get(key)}`);
}

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

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

// forEach回调遍历
map.forEach((value:any, key:any)=> {
    console.log(`key:${key}, value:${value}`);
});

/*
类似结果：
"key:a, value:1" 
"key:b, value:hello"
"key:c, value:true" 
*/

排序

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 
*/

Array和Map互相转换

let map = new Map();
map.set("a", 1);
map.set("b", "hello");
map.set("c", true);

// 将map转换为数组
let mapToArray = Array.from(map);
console.log(mapToArray);  // [["a", 1], ["b", "hello"], ["c", true]] 
// 将数组转换为map
let arrayToMap = new Map(mapToArray);
console.log(arrayToMap);   // Map (3) {"a" => 1, "b" => "hello", "c" => true}

注：在cocosCreator本地存储中是不支持存储map对象数据的，可采用此种方式将map对象转换为数组，再将数据转换为json格式存储。