开源一夏 | JS 超集对 TypeScript 的 Map 对象以及联合类型的深入实战

作者：黎燃

2022 年 8 月 14 日
内蒙古
本文字数：1837 字
阅读完需：约 6 分钟

一.TypeScript 的 Map 对象

类型脚本映射对象。map 对象保存键值对，可以记住键的原始插入顺序。任何值（对象或原始值）都可以用作键或值。Map 是 ES6 中引入的新数据结构。Typescript 使用地图类型和 new 关键字创建 Map：

let myMap = new Map();

复制代码

初始化映射，可以以数组的形式传入键值对：

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

复制代码

Map 对象相关功能和属性：

MapClear（）–删除映射对象的所有键/值对。
MapSet（）–设置键值对并返回映射对象。
MapGet（）–返回与键对应的值。如果不存在，则返回 undefined。
MapHas（）–返回一个布尔值，用于确定映射是否包含与键对应的值。
MapDelete（）–删除映射中的元素，如果删除成功则返回 true，如果删除失败则返回 false。
MapSize–返回映射对象键/值对的数目。
MapKeys（）-返回一个迭代器对象，其中包含 map 对象中每个元素的键。
MapValues（）–返回一个新的迭代器对象，其中包含 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 代码，输出结果为：

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

复制代码

1.1 迭代 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 输出数组....RunoobGoogleTaobaoFacebook

2.1 扩展知识

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

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

复制代码

2.2 总结

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

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/6740853ee9002bba4a8cb9109】。文章转载请联系作者。

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

开源一夏 | JS 超集对 TypeScript 的 Map 对象以及联合类型的深入实战

一.TypeScript 的 Map 对象

1.1 迭代 Map

二.TypeScript 联合类型

2.1 扩展知识

2.2 总结

黎燃

评论