1、TypeScript Map 對(duì)象

Map 對(duì)象保存鍵值對(duì)，并且能夠記住鍵的原始插入順序。

任何值(對(duì)象或者原始值) 都可以作為一個(gè)鍵或一個(gè)值。

Map 是 ES6 中引入的一種新的數(shù)據(jù)結(jié)構(gòu)，可以參考gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md

2、創(chuàng)建 Map

TypeScript 使用 Map 類(lèi)型和 new 關(guān)鍵字來(lái)創(chuàng)建 Map：

let myMap = new Map();

初始化 Map，可以以數(shù)組的格式來(lái)傳入鍵值對(duì)：

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

Map 相關(guān)的函數(shù)與屬性：

• map.clear() – 移除 Map 對(duì)象的所有鍵/值對(duì) 。
• map.set() – 設(shè)置鍵值對(duì)，返回該 Map 對(duì)象。
• map.get() – 返回鍵對(duì)應(yīng)的值，如果不存在，則返回 undefined。
• map.has() – 返回一個(gè)布爾值，用于判斷 Map 中是否包含鍵對(duì)應(yīng)的值。
• map.delete() – 刪除 Map 中的元素，刪除成功返回 true，失敗返回 false。
• map.size – 返回 Map 對(duì)象鍵/值對(duì)的數(shù)量。
• map.keys() - 返回一個(gè) Iterator 對(duì)象， 包含了 Map 對(duì)象中每個(gè)元素的鍵 。
• map.values() – 返回一個(gè)新的Iterator對(duì)象，包含了Map對(duì)象中每個(gè)元素的值 。

實(shí)例 - test.ts 文件

或者添加mau123789是v直接拿鴻蒙文檔
let nameSiteMapping = new Map();
 
// 設(shè)置 Map 對(duì)象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 獲取鍵對(duì)應(yīng)的值
console.log(nameSiteMapping.get("Runoob"));     // 2
 
// 判斷 Map 中是否包含鍵對(duì)應(yīng)的值
console.log(nameSiteMapping.has("Taobao"));       // true
console.log(nameSiteMapping.has("Zhihu"));        // false
 
// 返回 Map 對(duì)象鍵/值對(duì)的數(shù)量
console.log(nameSiteMapping.size);                // 3
 
// 刪除 Runoob
console.log(nameSiteMapping.delete("Runoob"));    // true
console.log(nameSiteMapping);
// 移除 Map 對(duì)象的所有鍵/值對(duì)
nameSiteMapping.clear();             // 清除 Map
console.log(nameSiteMapping);

使用 es6 編譯：

tsc --target es6 test.ts復(fù)制

編譯以上代碼得到如下 JavaScript 代碼：

實(shí)例 - test.js 文件

let nameSiteMapping = new Map();
// 設(shè)置 Map 對(duì)象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
// 獲取鍵對(duì)應(yīng)的值
console.log(nameSiteMapping.get("Runoob")); //40
// 判斷 Map 中是否包含鍵對(duì)應(yīng)的值
console.log(nameSiteMapping.has("Taobao")); //true
console.log(nameSiteMapping.has("Zhihu")); //false
// 返回 Map 對(duì)象鍵/值對(duì)的數(shù)量
console.log(nameSiteMapping.size); //3
// 刪除 Runoob
console.log(nameSiteMapping.delete("Runoob")); // true
console.log(nameSiteMapping);
// 移除 Map 對(duì)象的所有鍵/值對(duì)
nameSiteMapping.clear(); //清除 Map
console.log(nameSiteMapping);

執(zhí)行以上 JavaScript 代碼，輸出結(jié)果為：

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

3、迭代 Map

Map 對(duì)象中的元素是按順序插入的，我們可以迭代 Map 對(duì)象，每一次迭代返回 [key, value] 數(shù)組。

TypeScript使用 for...of 來(lái)實(shí)現(xiàn)迭代：

實(shí)例 -test.ts 文件

let nameSiteMapping = new Map();
 
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 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]);   
}
 
// 使用對(duì)象解析
for (let [key, value] of nameSiteMapping) {
    console.log(key, value);            
}

使用 es6 編譯：

tsc --target es6 test.ts復(fù)制

編譯以上代碼得到如下 JavaScript 代碼：

實(shí)例

let nameSiteMapping = new Map();
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 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]);
}
// 使用對(duì)象解析
for (let [key, value] of nameSiteMapping) {
    console.log(key, value);
}

執(zhí)行以上 JavaScript 代碼，輸出結(jié)果為：

Google
Runoob
Taobao
1
2
3
Google 1
Runoob 2
Taobao 3
Google 1
Runoob 2
Taobao 3

審核編輯 黃宇