JS?TypeScript的Map對象及聯(lián)合類型實(shí)戰(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（）–返回一個(gè)布爾值，用于確定映射是否包含與鍵對應(yīng)的值。
- MapDelete（）–刪除映射中的元素，如果刪除成功則返回true，如果刪除失敗則返回false。
- MapSize–返回映射對象鍵/值對的數(shù)目。
- MapKeys（）-返回一個(gè)迭代器對象，其中包含map對象中每個(gè)元素的鍵。
- MapValues（）–返回一個(gè)新的迭代器對象，其中包含map對象中每個(gè)元素的值。
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來實(shí)現(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è)置為多種類型。指定值時(shí)，可以根據(jù)設(shè)置的類型指定值。 注意：只能指定類型。如果分配了其他類型，將報(bào)告錯(cuò)誤。
創(chuàng)建聯(lián)合類型的語法格式如下：
Type1|Type2|Type3
聲明一個(gè)聯(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ò)展了以下幾點(diǎn)。 只能訪問公共屬性或方法 通常，使用關(guān)節(jié)類型是因?yàn)闊o法確定變量最終值的類型。 對于聯(lián)合類型的變量或參數(shù)，如果無法確定其特定類型，則只能訪問聯(lián)合類型中所有類型通用的屬性或方法。如果訪問特定類型特有的屬性或方法，將生成錯(cuò)誤。
function sayRes(res: number | string) {
if (res.length > 0) { // Error: 類型“number”上不存在屬性“l(fā)ength”。
}
}2.2總結(jié)
- 聯(lián)合類型包含所有可能的變量類型；
- 分配除聯(lián)合類型變量之外的值將產(chǎn)生錯(cuò)誤；
- 在無法確定聯(lián)合類型變量的最終類型之前，只能訪問聯(lián)合類型通用的屬性和方法。
到此這篇關(guān)于JS TypeScript的Map對象及聯(lián)合類型實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)JS Map對象 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
微信小程序今年新上線了插屏廣告，設(shè)置和在代碼庫中接入都非常方便。今天通過本文給大家分享微信小程序添加插屏廣告并設(shè)置顯示頻率(一天一次),需要的朋友可以參考下2019-12-12
JavaScript數(shù)組去重算法實(shí)例小結(jié)
這篇文章主要介紹了JavaScript數(shù)組去重算法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組去重相關(guān)的讀寫、遍歷、比較、排序等操作及算法改進(jìn)相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05
微信小程序之swiper輪播圖中的圖片自適應(yīng)高度的方法
這篇文章主要介紹了微信小程序之swiper輪播圖中的圖片自適應(yīng)高度的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
js實(shí)現(xiàn)隨機(jī)點(diǎn)名器精簡版
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)點(diǎn)名器的精簡版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
通過自定義webpack插件,利用執(zhí)行完成編譯的封存階段后,產(chǎn)生的產(chǎn)物module.fileDependencies,生成依賴的文件組,通過讀文件的方式,將待掃描的文件組和有依賴關(guān)系的文件進(jìn)行對比,這篇文章主要介紹了自定義刪除無依賴文件的webpack插件,需要的朋友可以參考下2023-12-12
用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例
這篇文章主要介紹了用Golang運(yùn)行JavaScript的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要給大家介紹了關(guān)于如何使用js查找數(shù)組中符合條件的元素,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04
JavaScript獲取本機(jī)IP地址的實(shí)現(xiàn)方法
JavaScript本身受限于瀏覽器安全機(jī)制無法直接獲取本機(jī)IP,但可通過WebRTC、Ajax請求等間接方式獲取公網(wǎng)IP,本文介紹了多種使用JS獲取IP的方法,需要的朋友可以參考下2025-10-10
用一段js程序來實(shí)現(xiàn)動(dòng)畫功能
用一段js程序來實(shí)現(xiàn)動(dòng)畫功能...2007-03-03
如何使用JavaScript檢測空閑的瀏覽器選項(xiàng)卡
這篇文章主要介紹了如何使用JavaScript檢測空閑的瀏覽器選項(xiàng)卡，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05