JS TypeScript的Map对象及联合类型实战

目录
  • 一.TypeScript的Map对象
    • 1.1迭代 Map
  • 二.TypeScript 联合类型
    • 2.1扩展知识
    • 2.2总结

一.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总结

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

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

赞 (0)

相关推荐

  • JavaScript TypeScript实现贪吃蛇游戏完整详细流程

    目录 项目背景及简介 多模块需求分析 场景模块需求 食物类模块需求 记分牌模块需求 蛇类模块需求 控制模块需求 项目搭建 ts转译为js代码 package.json包配置文件 webpack.config.js打包工具配置 项目结构搭建 html文件 css文件(这里使用的是less) 项目页面 多模块搭建 完成Food(食物)类 完成ScorePanel(记分牌)类 完成Snake(蛇)类 完成GameControl(控制)类 完成index类(启动项目) 项目启动 总结 项目背景及简介 t

  • 详解JavaScript私有类字段和TypeScript私有修饰符

    JavaScript私有类字段和隐私需求 在过去,JavaScript 没有保护变量不受访问的原生机制,当然除非是典型闭包. 闭包是 JavaScript 中许多类似于私有模式(如流行的模块模式)的基础.但是,近年来 ECMAScript 2015 类被使用后,开发人员感到需要对类成员的隐私进行更多控制. 类字段提案(在撰写本文时处于第 3 阶段)试图通过引入私有类字段来解决问题. 让我们看看它们是什么样子的. 一个 JavaScript 私有类字段的例子 这是一个带有私有字段的 JavaScr

  • JavaScript Typescript基础使用教程

    目录 简介 安装 安装命令 使用原因 TypeScript类型概述 JS原有的类型 TS新增的类型 类型别名 泛型 简介 typescript是微软公司开发的开源编程语言,Type+Javascript(type是类型,在js的基础上添加了类型支持) 简称:ts,是Javascript的超集 安装 node.js或者我们的浏览器,他只认识js代码,不认识ts代码,所以我们需要把我们的ts转换为我们的js代码,然后进行运行操作 安装命令 npm i -g typescript yarn globa

  • 解读TypeScript与JavaScript的区别

    目录 TypeScript与JavaScript区别 TypeScript与javascript优劣势 TypeScript 的优势 JavaScript 的优势 如何抉择 总结 TypeScript与JavaScript区别 TypeScript 是一种由微软开发的自由和开源的编程语言.它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. TypeScript 是一种非常受欢迎的 JavaScript 语言扩展.它在现有的 JavaScrip

  • JavaScript 与 TypeScript之间的联系

    JavaScript 与 TypeScript之间的联系

    目录 1.什么是 JavaScript? 2.JavaScript 有什么用? 3.什么是 TypeScript? 4.TypeScript 有哪些特点? 5.TypeScript 相对于 JavaScript 的用途是什么? 6.我们应该开始使用 TypeScript 吗? 1.什么是 JavaScript? JavaScript,也称为 JS,是一种符合 ECMAScript 规范的编程语言.这是一个高级别的.通常是即时编译的.多范式的. Vanilla JavaScript 是一个名称,用

  • JavaScript和TypeScript中的void的具体使用

    如果你来自传统的强类型语言,可能会很熟悉 void 的概念:一种类型,告诉你函数和方法在调用时不返回任何内容. void 作为运算符存在于 JavaScript 中,而作为基本类型存在于 TypeScript 中.在这两个世界中,void 的工作机制与大多数人习惯的有点不同. JavaScript 中的 void JavaScript 中的 void 是一个运算符,用于计算它旁边的表达式.无论评估哪个表达式,void总是返回undefined. let i = void 2; // i ===

  • JavaScript/TypeScript 实现并发请求控制的示例代码

    场景 假设有 10 个请求,但是最大的并发数目是 5 个,并且要求拿到请求结果,这样就是一个简单的并发请求控制 模拟 利用 setTimeout 实行简单模仿一个请求 let startTime = Date.now(); const timeout = (timeout: number, ret: number) => { return (idx?: any) => new Promise((resolve) => { setTimeout(() => { const compa

  • JS TypeScript的Map对象及联合类型实战

    目录 一.TypeScript的Map对象 1.1迭代 Map 二.TypeScript 联合类型 2.1扩展知识 2.2总结 一.TypeScript的Map对象 类型脚本映射对象. map对象保存键值对,可以记住键的原始插入顺序.任何值(对象或原始值)都可以用作键或值.Map是ES6中引入的新数据结构. Typescript使用地图类型和new关键字创建Map: let myMap = new Map(); 初始化映射,可以以数组的形式传入键值对: let myMap = new Map([

  • js中遍历Map对象的简单实例

    实例如下: console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"} for(var key in jsonData) console.log("属性:" + key + ",值:"+ jsonData[key]); } 打印输出: 属性:fileNumber, 值:文件编号 属性:fileName, 值:文件名称 以上这篇j

  • js中遍历Map对象的方法

    js中遍历Map对象的方法 console.log(jsonData);//火狐控制台打印输出: Object { fileNumber="文件编号", fileName="文件名称"} for(var key in jsonData) console.log("属性:" + key + ",值:"+ jsonData[key]); } 打印输出: 属性:fileNumber, 值:文件编号 属性:fileName, 值:文件

  • js中生成map对象的方法

    复制代码 代码如下: var Map = function(){ this._entrys = new Array(); this.put = function(key, value){ if (key == null || key == undefined) { return; } var index = this._getIndex(key); if (index == -1) { var entry = new Object(); entry.key = key; entry.value

  • TypeScript联合类型,交叉类型和类型保护

    1.联合类型 所谓的联合类型就是定义一些类型,定义的变量只需要满足任意一种类型即可,联合类型使用|定义,示例代码如下: // 通过 | 符号定义联合类型 let value: number | boolean | string = '一碗周' value = 18 在上面的代码中我们定义了一个value变量,该变量可以是number.boolean或者string类型. 2.交叉类型 介绍了联合类型,然后介绍一下与之特别相似的交叉类型. 所谓的交叉类型就是需要满足所有类型,交叉类型使用&符号定义

  • JS自定义对象实现Java中Map对象功能的方法

    本文实例讲述了JS自定义对象实现Java中Map对象功能的方法.分享给大家供大家参考.具体分析如下: Java中有集合,Map等对象存储工具类,这些对象使用简易,但是在JavaScript中,你只能使用Array对象. 这里我创建一个自定义对象,这个对象内包含一个数组来存储数据,数据对象是一个Key,可以实际存储的内容!   这里Key,你要使用String类型,和Java一样,你可以进行一些增加,删除,修改,获得的操作. 使用很简单,我先把工具类给大家看下: 复制代码 代码如下: /**  *

  • Java redis存Map对象类型数据的实现

    Java redis存Map对象类型数据的实现

    目录 背景描述 实体类 父类 子类 方法1° 方法2° 背景描述 项目需要将设备采集到的最新经纬度信息存入redis缓存中,方便及时查询检索.考虑到根据检索条件不同,所查询的设备不同.采取将数据以map类型存入redis缓存,在此记录一下. 实体类 注:一定要实现序列化接口 父类 public class Redis implements Serializable{     private String name;     private Integer age;     public Stri

  • TypeScript中的交叉类型和联合类型示例讲解

    目录 交叉类型(Intersection types) 要点 联合类型(Union types) 类型缩减 交叉类型(Intersection types) 什么事交叉类型呢?简单来说就是通过&符号将多个类型进行合并成一个类型,然后用type来声明新生成的类型.这里我举个例子,具体如下: interface ClassA{ name:string; age:number } interface ClassB{ name:string; phone:number; } 将接口ClassA和接口Cl

  • 详解TypeScript2.0标记联合类型

    详解TypeScript2.0标记联合类型

    目录 使用标记的联合类型构建付款方式 使用标记联合类型构建 Redux 操作 never 类型 永不返回的函数 不可能有该类型的变量 never 和 void 之间的区别 函数声明的类型推断 使用标记的联合类型构建付款方式 假设咱们为系统用户可以选择的以下支付方式建模 Cash (现金) PayPal 与给定的电子邮件地址 Credit card 带有给定卡号和安全码 对于这些支付方法,咱们可以创建一个 TypeScript 接口 interface Cash { kind: "cash&quo

  • javascript实现Java中的Map对象功能的实例详解

    javascript  自定义对象实现Java中的Map对象功能 Java中有集合,Map等对象存储工具类,这些对象使用简易,但是在JavaScript中,你只能使用Array对象. 这里我创建一个自定义对象,这个对象内包含一个数组来存储数据,数据对象是一个Key,可以实际存储的内容! 这里Key,你要使用String类型,和Java一样,你可以进行一些增加,删除,修改,获得的操作. 使用很简单,我先把工具类给大家看下: /** * @version 1.0 * @author cuisuqia

随机推荐