JS超集对TypeScript的Map对象以及联合类型的深入实战

简介: JS超集对TypeScript的Map对象以及联合类型的深入实战

@[toc]

一.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代码,输出结果为:

2
true
false
3
true
Map { '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
输出数组....
Runoob
Google
Taobao
Facebook

2.1扩展知识

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

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

2.2总结

  • 联合类型包含所有可能的变量类型;
  • 分配除联合类型变量之外的值将产生错误;
  • 在无法确定联合类型变量的最终类型之前,只能访问联合类型通用的属性和方法。
相关文章
|
2月前
|
存储 Java 开发者
Java Map实战:用HashMap和TreeMap轻松解决复杂数据结构问题!
【10月更文挑战第17天】本文深入探讨了Java中HashMap和TreeMap两种Map类型的特性和应用场景。HashMap基于哈希表实现,支持高效的数据操作且允许键值为null;TreeMap基于红黑树实现,支持自然排序或自定义排序,确保元素有序。文章通过具体示例展示了两者的实战应用,帮助开发者根据实际需求选择合适的数据结构,提高开发效率。
72 2
|
1月前
|
JavaScript 前端开发 开发者
如何在 JavaScript 中处理不同类型的错误?
【10月更文挑战第29天】通过对不同类型错误的准确识别和恰当处理,可以提高JavaScript程序的可靠性和稳定性,减少错误对程序运行的影响。
|
2月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
63 0
|
24天前
|
JavaScript 前端开发 安全
探索Deno:新一代JavaScript/TypeScript运行时
Deno是由Node.js创始人Ryan Dahl发起的新一代JavaScript/TypeScript运行时,旨在提升安全性、模块化和性能。本文介绍了Deno的核心特性,如内置TypeScript支持、强大的模块系统、权限管理和测试工具,以及开发技巧,帮助开发者构建更安全、高效的Web应用。
|
25天前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
44 4
|
25天前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
40 4
|
25天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
35 2
|
29天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
35 4
|
1月前
|
JavaScript 前端开发 Java
除了 JavaScript,还有哪些编程语言支持 Set 类型
【10月更文挑战第30天】这些编程语言中的 `Set` 类型虽然在语法和具体实现细节上有所不同,但都提供了类似的集合操作功能,方便开发者在不同的编程场景中处理集合相关的数据和逻辑。
|
1月前
|
存储 JavaScript 前端开发
js的基础类型和引用类型
【10月更文挑战第29天】理解 JavaScript 中的基础类型和引用类型的区别对于正确地编写代码和理解程序的行为非常重要。在实际开发中,需要根据具体的需求合理地选择和使用不同的数据类型,以避免出现一些意想不到的错误和问题。同时,在处理引用类型数据时,要特别注意对象的引用关系,避免因共享引用而导致的数据不一致等问题。
下一篇
DataWorks