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