TypeScript Map 物件

Map 物件儲存鍵值對,並且能夠記住鍵的原始插入順序。

任何值(物件或者原始值) 都可以作為一個鍵或一個值。

Map 是 ES6 中引入的一種新的資料結構,可以參考 ES6 Map 與 Set。


建立 Map

TypeScript 使用 Map 型別和 new 關鍵字來建立 Map:

let myMap = new Map();

初始化 Map,可以以陣列的格式來傳入鍵值對:

let myMap = new Map([
        ["key1", "value1"],
        ["key2", "value2"]
    ]); 

Map 相關的函式與屬性:

  • map.clear() – 移除 Map 物件的所有鍵/值對 。
  • map.set() – 設定鍵值對,返回該 Map 物件。
  • map.get() – 返回鍵對應的值,如果不存在,則返回 undefined。
  • map.has() – 返回一個布林值,用於判斷 Map 中是否包含鍵對應的值。
  • map.delete() – 刪除 Map 中的元素,刪除成功返回 true,失敗返回 false。
  • map.size – 返回 Map 物件鍵/值對的數量。
  • map.keys() - 返回一個 Iterator 物件, 包含了 Map 物件中每個元素的鍵 。
  • map.values() – 返回一個新的Iterator物件,包含了Map物件中每個元素的值 。

例項 - test.ts 檔案

let nameSiteMapping = new Map(); // 設定 Map 物件 nameSiteMapping.set("Google", 1); nameSiteMapping.set("itread01", 2); nameSiteMapping.set("Taobao", 3); // 獲取鍵對應的值 console.log(nameSiteMapping.get("itread01")); // 2 // 判斷 Map 中是否包含鍵對應的值 console.log(nameSiteMapping.has("Taobao")); // true console.log(nameSiteMapping.has("Zhihu")); // false // 返回 Map 物件鍵/值對的數量 console.log(nameSiteMapping.size); // 3 // 刪除 itread01 console.log(nameSiteMapping.delete("itread01")); // true console.log(nameSiteMapping); // 移除 Map 物件的所有鍵/值對 nameSiteMapping.clear(); // 清除 Map console.log(nameSiteMapping);

使用 es6 編譯:

tsc --target es6 test.ts

編譯以上程式碼得到如下 JavaScript 程式碼:

例項 - test.js 檔案

let nameSiteMapping = new Map(); // 設定 Map 物件 nameSiteMapping.set("Google", 1); nameSiteMapping.set("itread01", 2); nameSiteMapping.set("Taobao", 3); // 獲取鍵對應的值 console.log(nameSiteMapping.get("itread01")); //40 // 判斷 Map 中是否包含鍵對應的值 console.log(nameSiteMapping.has("Taobao")); //true console.log(nameSiteMapping.has("Zhihu")); //false // 返回 Map 物件鍵/值對的數量 console.log(nameSiteMapping.size); //3 // 刪除 itread01 console.log(nameSiteMapping.delete("itread01")); // true console.log(nameSiteMapping); // 移除 Map 物件的所有鍵/值對 nameSiteMapping.clear(); //清除 Map console.log(nameSiteMapping);

執行以上 JavaScript 程式碼,輸出結果為:

2
true
false
3
true
Map { 'Google' => 1, 'Taobao' => 3 }
Map {}

迭代 Map

Map 物件中的元素是按順序插入的,我們可以迭代 Map 物件,每一次迭代返回 [key, value] 陣列。

TypeScript使用 for...of 來實現迭代:

例項 -test.ts 檔案

let nameSiteMapping = new Map(); nameSiteMapping.set("Google", 1); nameSiteMapping.set("itread01", 2); nameSiteMapping.set("Taobao", 3); // 迭代 Map 中的 key for (let key of nameSiteMapping.keys()) { console.log(key); } // 迭代 Map 中的 value for (let value of nameSiteMapping.values()) { console.log(value); } // 迭代 Map 中的 key => value for (let entry of nameSiteMapping.entries()) { console.log(entry[0], entry[1]); } // 使用物件解析 for (let [key, value] of nameSiteMapping) { console.log(key, value); }

使用 es6 編譯:

tsc --target es6 test.ts

編譯以上程式碼得到如下 JavaScript 程式碼:

例項

let nameSiteMapping = new Map(); nameSiteMapping.set("Google", 1); nameSiteMapping.set("itread01", 2); nameSiteMapping.set("Taobao", 3); // 迭代 Map 中的 key for (let key of nameSiteMapping.keys()) { console.log(key); } // 迭代 Map 中的 value for (let value of nameSiteMapping.values()) { console.log(value); } // 迭代 Map 中的 key => value for (let entry of nameSiteMapping.entries()) { console.log(entry[0], entry[1]); } // 使用物件解析 for (let [key, value] of nameSiteMapping) { console.log(key, value); }

執行以上 JavaScript 程式碼,輸出結果為:

Google
itread01
Taobao
1
2
3
Google 1
itread01 2
Taobao 3
Google 1
itread01 2