RM新时代网站-首页

0
  • 聊天消息
  • 系統(tǒng)消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會員中心
創(chuàng)作中心

完善資料讓更多小伙伴認識你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

鴻蒙TypeScript學習第12天【Map對象】

jf_46214456 ? 來源:jf_46214456 ? 作者:jf_46214456 ? 2024-04-10 15:47 ? 次閱讀

1、TypeScript Map 對象

Map 對象保存鍵值對,并且能夠記住鍵的原始插入順序。

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

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

2、創(chuàng)建 Map

TypeScript 使用 Map 類型和 new 關(guān)鍵字來創(chuàng)建 Map:

let myMap = new Map();

初始化 Map,可以以數(shù)組的格式來傳入鍵值對:

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

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

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

實例 - test.ts 文件

搜狗高速瀏覽器截圖20240326151547.png

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

使用 es6 編譯:

tsc --target es6 test.ts復制

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

實例 - test.js 文件

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

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

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

3、迭代 Map

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

TypeScript使用 for...of 來實現(xiàn)迭代:

實例 -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]);   
}
 
// 使用對象解析
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("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]);
}
// 使用對象解析
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

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場。文章及其配圖僅供工程師學習之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問題,請聯(lián)系本站處理。 舉報投訴
  • javascript
    +關(guān)注

    關(guān)注

    0

    文章

    516

    瀏覽量

    53850
  • 鴻蒙
    +關(guān)注

    關(guān)注

    57

    文章

    2339

    瀏覽量

    42804
收藏 人收藏

    評論

    相關(guān)推薦

    鴻蒙TypeScript學習21:【聲明文件】

    TypeScript 作為 JavaScript 的超集,在開發(fā)過程中不可避免要引用其他第三方的 JavaScript 的庫。
    的頭像 發(fā)表于 04-19 15:02 ?577次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>學習</b>21<b class='flag-5'>天</b>:【聲明文件】

    鴻蒙TypeScript學習20:【模塊】

    TypeScript 模塊的設(shè)計理念是可以更換的組織代碼。 模塊是在其自身的作用域里執(zhí)行,并不是在全局作用域,這意味著定義在模塊里面的變量、函數(shù)和類等在模塊外部是不可見的,除非明確地使用 export 導出它們。類似地,我們必須通過 import 導入其他模塊導出的變量、函數(shù)、類等。
    的頭像 發(fā)表于 04-18 15:19 ?714次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>學習</b><b class='flag-5'>第</b>20<b class='flag-5'>天</b>:【模塊】

    鴻蒙語言TypeScript學習18:【泛型】

    泛型(Generics)是一種編程語言特性,允許在定義函數(shù)、類、接口等時使用占位符來表示類型,而不是具體的類型。
    的頭像 發(fā)表于 04-16 14:56 ?366次閱讀
    <b class='flag-5'>鴻蒙</b>語言<b class='flag-5'>TypeScript</b><b class='flag-5'>學習</b><b class='flag-5'>第</b>18<b class='flag-5'>天</b>:【泛型】

    鴻蒙TypeScript學習17:【對象

    對象是包含一組鍵值對的實例。 值可以是標量、函數(shù)、數(shù)組、對象
    的頭像 發(fā)表于 04-15 15:33 ?660次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>學習</b><b class='flag-5'>第</b>17<b class='flag-5'>天</b>:【<b class='flag-5'>對象</b>】

    鴻蒙語言TypeScript學習16:【類】

    TypeScript 支持面向對象的所有特性,比如 類、接口等。
    的頭像 發(fā)表于 04-15 09:29 ?1011次閱讀
    <b class='flag-5'>鴻蒙</b>語言<b class='flag-5'>TypeScript</b><b class='flag-5'>學習</b><b class='flag-5'>第</b>16<b class='flag-5'>天</b>:【類】

    鴻蒙TypeScript學習13:【元組】

    元組中允許存儲不同類型的元素,元組可以作為參數(shù)傳遞給函數(shù)。
    的頭像 發(fā)表于 04-11 14:43 ?492次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>學習</b><b class='flag-5'>第</b>13<b class='flag-5'>天</b>:【元組】

    鴻蒙TypeScript入門學習11【Array(數(shù)組)】

    數(shù)組對象是使用單獨的變量名來存儲一系列的值。 數(shù)組非常常用。
    的頭像 發(fā)表于 04-09 14:38 ?1133次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b>入門<b class='flag-5'>學習</b><b class='flag-5'>第</b>11<b class='flag-5'>天</b>【Array(數(shù)組)】

    鴻蒙TypeScript學習10:【String(字符串)】

    String 對象用于處理文本(字符串)。
    的頭像 發(fā)表于 04-08 14:32 ?795次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>學習</b><b class='flag-5'>第</b>10<b class='flag-5'>天</b>:【String(字符串)】

    鴻蒙TypeScript 開發(fā)學習9:【TypeScript Number】

    TypeScript 與 JavaScript 類似,支持 Number 對象。 Number 對象是原始數(shù)值的包裝對象
    的頭像 發(fā)表于 04-07 18:02 ?783次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b> 開發(fā)<b class='flag-5'>學習</b><b class='flag-5'>第</b>9<b class='flag-5'>天</b>:【<b class='flag-5'>TypeScript</b> Number】

    鴻蒙TypeScript入門學習8:【TypeScript 函數(shù)】

    函數(shù)是一組一起執(zhí)行一個任務(wù)的語句。 您可以把代碼劃分到不同的函數(shù)中。如何劃分代碼到不同的函數(shù)中是由您來決定的,但在邏輯上,劃分通常是根據(jù)每個函數(shù)執(zhí)行一個特定的任務(wù)來進行的。
    的頭像 發(fā)表于 04-03 14:54 ?415次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b>入門<b class='flag-5'>學習</b><b class='flag-5'>第</b>8<b class='flag-5'>天</b>:【<b class='flag-5'>TypeScript</b> 函數(shù)】

    鴻蒙TypeScript學習7:【TypeScript 循環(huán)】

    有的時候,我們可能需要多次執(zhí)行同一塊代碼。一般情況下,語句是按順序執(zhí)行的:函數(shù)中的第一個語句先執(zhí)行,接著是第二個語句,依此類推。 編程語言提供了更為復雜執(zhí)行路徑的多種控制結(jié)構(gòu)。
    的頭像 發(fā)表于 04-02 14:28 ?842次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b><b class='flag-5'>學習</b><b class='flag-5'>第</b>7<b class='flag-5'>天</b>:【<b class='flag-5'>TypeScript</b> 循環(huán)】

    鴻蒙TypeScript入門學習6:【條件語句】

    條件語句用于基于不同的條件來執(zhí)行不同的動作。 TypeScript 條件語句是通過一條或多條語句的執(zhí)行結(jié)果(True 或 False)來決定執(zhí)行的代碼塊。
    的頭像 發(fā)表于 04-01 13:51 ?751次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b>入門<b class='flag-5'>學習</b><b class='flag-5'>第</b>6<b class='flag-5'>天</b>:【條件語句】

    鴻蒙TypeScript入門學習4:【TS變量聲明】

    變量是一種使用方便的占位符,用于引用計算機內(nèi)存地址。 我們可以把變量看做存儲數(shù)據(jù)的容器。
    的頭像 發(fā)表于 03-29 14:49 ?1396次閱讀

    鴻蒙TypeScript開發(fā)入門學習3:【TS基礎(chǔ)類型】

    任意值是 TypeScript 針對編程時類型不明確的變量使用的一種數(shù)據(jù)類型,它常用于以下三種情況。
    的頭像 發(fā)表于 03-28 15:02 ?531次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b>開發(fā)入門<b class='flag-5'>學習</b><b class='flag-5'>第</b>3<b class='flag-5'>天</b>:【TS基礎(chǔ)類型】

    鴻蒙TypeScript入門學習2TypeScript安裝】

    本文介紹 TypeScript 環(huán)境的安裝。 我們需要使用到 npm 工具安裝,如果你還不了解 npm,可以參考我之前文檔。
    的頭像 發(fā)表于 03-27 15:22 ?503次閱讀
    <b class='flag-5'>鴻蒙</b><b class='flag-5'>TypeScript</b>入門<b class='flag-5'>學習</b><b class='flag-5'>第</b>2<b class='flag-5'>天</b>【<b class='flag-5'>TypeScript</b>安裝】
    RM新时代网站-首页