TypeScript Map对象与联合类型实战指南

作者：纸飞机时间：2026-10-25 18:59:56浏览：655

本文详细介绍TypeScript中Map对象的创建、常用方法及迭代操作，涵盖set、get、has、delete等API的使用。同时讲解联合类型的定义、语法及类型保护机制，通过实例演示如何在TypeScript中处理多种类型数据，帮助开发者掌握基础数据结构与类型系统的应用。

一.TypeScript的Map对象

Map对象用于存储键值对，并保留键的原始插入顺序。它可以接受任何类型的值作为键或值，包括对象和原始值。Map是ES6标准引入的一种新数据结构。

在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()：返回一个迭代器对象，包含Map中每个元素的键。
Map.values()：返回一个新的迭代器对象，包含Map中每个元素的值。

let nameSiteMapping = new Map();

设置 Map 对象

nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);

获取键对应的值

console.log(nameSiteMapping.get("Runoob"));

判断 Map 中是否包含键对应的值

console.log(nameSiteMapping.has("Taobao"));   
console.log(nameSiteMapping.has("Zhihu"));

返回 Map 对象键/值对的数量

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

执行上述JavaScript代码，输出结果为：

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

1.1迭代 Map

Map对象中的元素按照插入顺序存储。我们可以迭代Map对象，每次迭代返回一个[key, value]数组。

TypeScript支持使用…Of来实现迭代：

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 联合类型

联合类型可以通过管道符号（|）将变量设置为多种类型。指定值时，需根据设置的类型来赋值。注意：只能指定类型。如果分配了其他类型，将报告错误。

创建联合类型的语法格式如下：

Type1|Type2|Type3

声明一个联合类型：

var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob" 
console.log("字符串为 " + val)

编译上述代码以获得以下JavaScript代码：

var val;
val = 12;
console.log("数字为 " + val);
val = "Runoob";
console.log("字符串为 " + val);

数字为 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("输出数组....") 
disp(["Runoob","Google","Taobao","Facebook"])

上述代码输出结果为：

Runoob 输出数组.... Runoob Google Taobao Facebook

2.1扩展知识

对于联合类型数据，主要扩展了以下几点。只能访问公共属性或方法通常，使用关节类型是因为无法确定变量最终值的类型。对于联合类型的变量或参数，如果无法确定其特定类型，则只能访问联合类型中所有类型通用的属性或方法。如果访问特定类型特有的属性或方法，将生成错误。

function sayRes(res: number | string) {
    if (res.length > 0) { // Error: 类型“number”上不存在属性“length”。
    }
}

2.2总结

联合类型包含所有可能的变量类型；
分配除联合类型变量之外的值将产生错误；
在无法确定联合类型变量的最终类型之前，只能访问联合类型通用的属性和方法。

到此这篇关于JS TypeScript的Map对象及联合类型实战的文章就介绍到这了,更多相关JS Map对象内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28