JS?TypeScript的Map對象及聯(lián)合類型實戰(zhàn)
一.TypeScript的Map對象
類型腳本映射對象。 map對象保存鍵值對,可以記住鍵的原始插入順序。任何值(對象或原始值)都可以用作鍵或值。Map是ES6中引入的新數(shù)據(jù)結(jié)構(gòu)。
Typescript使用地圖類型和new關(guān)鍵字創(chuàng)建Map:
let myMap = new Map();
初始化映射,可以以數(shù)組的形式傳入鍵值對:
let myMap = new Map([ ["key1", "value1"], ["key2", "value2"] ]);
Map對象相關(guān)功能和屬性:
- MapClear()–刪除映射對象的所有鍵/值對。
- MapSet()–設(shè)置鍵值對并返回映射對象。
- MapGet()–返回與鍵對應(yīng)的值。如果不存在,則返回undefined。
- MapHas()–返回一個布爾值,用于確定映射是否包含與鍵對應(yīng)的值。
- MapDelete()–刪除映射中的元素,如果刪除成功則返回true,如果刪除失敗則返回false。
- MapSize–返回映射對象鍵/值對的數(shù)目。
- MapKeys()-返回一個迭代器對象,其中包含map對象中每個元素的鍵。
- MapValues()–返回一個新的迭代器對象,其中包含map對象中每個元素的值。
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"));
判斷 Map 中是否包含鍵對應(yīng)的值
console.log(nameSiteMapping.has("Taobao")); console.log(nameSiteMapping.has("Zhihu"));
返回 Map 對象鍵/值對的數(shù)量
console.log(nameSiteMapping.size);
刪除 Runoob
console.log(nameSiteMapping.delete("Runoob")); console.log(nameSiteMapping);
移除 Map 對象的所有鍵/值對 , 清除 Map
nameSiteMapping.clear(); console.log(nameSiteMapping);
使用 es6 編譯:
tsc --target es6 test.ts
執(zhí)行上述JavaScript代碼,輸出結(jié)果為:
2
true
false
3
true
Map { 'Google' => 1, 'Taobao' => 3 }
Map {}
1.1迭代 Map
地圖對象中的元素按順序插入。我們可以迭代map對象,每次迭代都返回[key,value]數(shù)組。
Typescript用于…Of來實現(xiàn)迭代:
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); }
二.TypeScript 聯(lián)合類型
聯(lián)合類型可以通過管道(|)將變量設(shè)置為多種類型。指定值時,可以根據(jù)設(shè)置的類型指定值。 注意:只能指定類型。如果分配了其他類型,將報告錯誤。
創(chuàng)建聯(lián)合類型的語法格式如下:
Type1|Type2|Type3
聲明一個聯(lián)合類型:
var val:string|number val = 12 console.log("數(shù)字為 "+ val) val = "Runoob" console.log("字符串為 " + val)
編譯上述代碼以獲得以下JavaScript代碼:
var val; val = 12; console.log("數(shù)字為 " + val); val = "Runoob"; console.log("字符串為 " + val);
數(shù)字為 12 字符串為 Runoob
function disp(name:string|string[]) { if(typeof name == "string") { console.log(name) } else { var i; for(i = 0;i<name.length;i++) { console.log(name[i]) } } } disp("Runoob") console.log("輸出數(shù)組....") disp(["Runoob","Google","Taobao","Facebook"])
上述代碼輸出結(jié)果為:
Runoob 輸出數(shù)組.... Runoob Google Taobao Facebook
2.1擴(kuò)展知識
對于聯(lián)合類型數(shù)據(jù),主要擴(kuò)展了以下幾點。 只能訪問公共屬性或方法 通常,使用關(guān)節(jié)類型是因為無法確定變量最終值的類型。 對于聯(lián)合類型的變量或參數(shù),如果無法確定其特定類型,則只能訪問聯(lián)合類型中所有類型通用的屬性或方法。如果訪問特定類型特有的屬性或方法,將生成錯誤。
function sayRes(res: number | string) { if (res.length > 0) { // Error: 類型“number”上不存在屬性“l(fā)ength”。 } }
2.2總結(jié)
- 聯(lián)合類型包含所有可能的變量類型;
- 分配除聯(lián)合類型變量之外的值將產(chǎn)生錯誤;
- 在無法確定聯(lián)合類型變量的最終類型之前,只能訪問聯(lián)合類型通用的屬性和方法。
到此這篇關(guān)于JS TypeScript的Map對象及聯(lián)合類型實戰(zhàn)的文章就介紹到這了,更多相關(guān)JS Map對象 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
webpack打包中path.resolve(__dirname, 'dist')的含義解
這篇文章主要介紹了webpack打包中path.resolve(__dirname, 'dist')的含義解析,path:path.resolve(__dirname, 'dist')就是在打包之后的文件夾上拼接了一個文件夾,在打包時,直接生成,本文給大家講解的非常詳細(xì),需要的朋友可以參考下2023-05-05JS跳出循環(huán)的5種方法總結(jié)(return、break、continue、throw等)
想必大家都遇到過循環(huán)遍歷時遇到滿足條件的時候就跳出循環(huán)這樣的需求,于是整理了一篇各種循環(huán)是如何結(jié)束的,這篇文章主要給大家介紹了關(guān)于JS跳出循環(huán)的5種方法,分別是return、break、continue、throw等的相關(guān)資料,需要的朋友可以參考下2024-05-05

基于JavaScript實現(xiàn)表單密碼的隱藏和顯示出來