0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙TypeScript学习第12天【Map对象】

jf_46214456 ? 来源:jf_46214456 ? 作者:jf_46214456 ? 2024-04-10 15:47 ? 次阅读
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

1、TypeScript Map 对象

Map 对象保存键值对,并且能够记住键的原始插入顺序。

任何值(对象或者原始值) 都可以作为一个键或一个值。

Map 是 ES6 中引入的一种新的数据结构,可以参考gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md

2、创建 Map

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() - 返回一个 Iterator 对象, 包含了 Map 对象中每个元素的键 。
  • map.values() – 返回一个新的Iterator对象,包含了Map对象中每个元素的值 。

实例 - test.ts 文件

搜狗高速浏览器截图20240326151547.png

或者添加mau123789是v直接拿鸿蒙文档
let nameSiteMapping = new Map();
 
// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
 
// 获取键对应的值
console.log(nameSiteMapping.get("Runoob"));     // 2
 
// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao"));       // true
console.log(nameSiteMapping.has("Zhihu"));        // false
 
// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size);                // 3
 
// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob"));    // true
console.log(nameSiteMapping);
// 移除 Map 对象的所有键/值对
nameSiteMapping.clear();             // 清除 Map
console.log(nameSiteMapping);

使用 es6 编译:

tsc --target es6 test.ts复制

编译以上代码得到如下 JavaScript 代码:

实例 - test.js 文件

let nameSiteMapping = new Map();
// 设置 Map 对象
nameSiteMapping.set("Google", 1);
nameSiteMapping.set("Runoob", 2);
nameSiteMapping.set("Taobao", 3);
// 获取键对应的值
console.log(nameSiteMapping.get("Runoob")); //40
// 判断 Map 中是否包含键对应的值
console.log(nameSiteMapping.has("Taobao")); //true
console.log(nameSiteMapping.has("Zhihu")); //false
// 返回 Map 对象键/值对的数量
console.log(nameSiteMapping.size); //3
// 删除 Runoob
console.log(nameSiteMapping.delete("Runoob")); // true
console.log(nameSiteMapping);
// 移除 Map 对象的所有键/值对
nameSiteMapping.clear(); //清除 Map
console.log(nameSiteMapping);

执行以上 JavaScript 代码,输出结果为:

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

3、迭代 Map

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

TypeScript使用 for...of 来实现迭代:

实例 -test.ts 文件

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);            
}

使用 es6 编译:

tsc --target es6 test.ts复制

编译以上代码得到如下 JavaScript 代码:

实例

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);
}

执行以上 JavaScript 代码,输出结果为:

Google
Runoob
Taobao
1
2
3
Google 1
Runoob 2
Taobao 3
Google 1
Runoob 2
Taobao 3

审核编辑 黄宇

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • javascript
    +关注

    关注

    0

    文章

    525

    浏览量

    55002
  • 鸿蒙
    +关注

    关注

    60

    文章

    2651

    浏览量

    44292
收藏 人收藏
加入交流群
微信小助手二维码

扫码添加小助手

加入工程师交流群

    评论

    相关推荐
    热点推荐

    鸿蒙开发API9 到 API12,有哪些不同

    ? ##HarmonyOS 应用开发## 虽然API9已经属于过时了,但是现在很多学校里教的还是基于API9的鸿蒙开发,当学生需要在毕业设计中使用API12进行开发时,还是需要先掌握一些两者的区别
    发表于 06-29 22:47

    鸿蒙5开发宝藏案例分享---跨线程性能优化指南

    ;>Worker</span>做多线程开发时,总遇到对象跨线程卡顿的问题,原来鸿蒙早就提供了解决方案。下面结合代码和实战案例,带你彻底玩转性能优化! 一、痛点:跨线程
    发表于 06-12 17:13

    鸿蒙5开发宝藏案例分享---应用并发设计

    ?** 鸿蒙并发编程实战指南:解锁ArkTS多线程黑科技** 嘿,开发者朋友们! 今天给大家扒一扒鸿蒙官方文档里藏着的并发编程宝藏—— 100+实战场景解决方案 !从金融理财到游戏开发,从折叠屏适配
    发表于 06-12 16:19

    鸿蒙Next实现瀑布流布局

    (VerticalAlign.Top) } } 注:鸿蒙 next 中无法使用索引访问对象属性,如 const obj = { a: 1 } 无法使用 obj[a],这种情况可以用 Map 2. 动态加载数据
    发表于 06-10 14:17

    开源鸿蒙开发新体验,开鸿Bot系列今日开启预售!

    操作系统,实现从国产高性能芯片到操作系统的全栈自主化,构建起一站式的开源鸿蒙学习与开发平台。 融合开发与办公场景,打造开源鸿蒙生态的“第一站” 作为“开发者平台+轻办公终端”的融合产品,目前,开鸿Bot
    发表于 05-16 14:13

    tscircuit - 电路开发的 React 范式? 用TypeScript、React和 AI工具构建电子产品

    TypeScript、React 和 AI 工具构建电子产品。
    的头像 发表于 04-30 18:18 ?788次阅读
    tscircuit - 电路开发的 React 范式?   用<b class='flag-5'>TypeScript</b>、React和 AI工具构建电子产品

    【北京迅为】itop-3568 开发板openharmony鸿蒙烧写及测试-2章OpenHarmony v3.2-Beta4版本测试

    【北京迅为】itop-3568 开发板openharmony鸿蒙烧写及测试-2章OpenHarmony v3.2-Beta4版本测试
    的头像 发表于 03-05 10:53 ?501次阅读
    【北京迅为】itop-3568 开发板openharmony<b class='flag-5'>鸿蒙</b>烧写及测试-<b class='flag-5'>第</b>2章OpenHarmony v3.2-Beta4版本测试

    【北京迅为】itop-3568 开发板openharmony鸿蒙烧写及测试-1章 体验OpenHarmony—烧写镜像

    【北京迅为】itop-3568 开发板openharmony鸿蒙烧写及测试-1章 体验OpenHarmony—烧写镜像
    的头像 发表于 03-04 16:31 ?595次阅读
    【北京迅为】itop-3568 开发板openharmony<b class='flag-5'>鸿蒙</b>烧写及测试-<b class='flag-5'>第</b>1章 体验OpenHarmony—烧写镜像

    AIGC入门及鸿蒙入门

    JDK、配置SDK等。 3. 开发实践: 学习鸿蒙系统的架构和API,了解其组件化、分布式等特性。 通过官方文档和社区资源,学习和掌握鸿蒙应用的开发流程和技巧。 总结来说,AIGC作为
    发表于 01-13 10:32

    加速行业深度融合,软通动力出席鸿蒙生态文旅行业千帆启航仪式

    北京2024年12月9日?/美通社/ -- 12月6日,鸿蒙生态文旅行业峰会在北京成功召开。峰会由华为主办,旨在联动业界伙伴,展示鸿蒙与文旅行业的深度融合和发展前景,为文旅行业注入新活
    的头像 发表于 12-09 15:10 ?407次阅读
    加速行业深度融合,软通动力出席<b class='flag-5'>鸿蒙</b>生态文旅行业千帆启航仪式

    OpenAI启动12新品发布盛宴

    美国人工智能领域的明星初创公司OpenAI,近日在社交媒体平台上发布了一条令人瞩目的消息。该公司宣布,从当地时间周四起,将开启一个为期12的新功能密集发布周期,为业界带来一系列令人期待的新品
    的头像 发表于 12-06 10:49 ?688次阅读

    FPD-link裕量分析程序(MAP)用户指南

    电子发烧友网站提供《FPD-link裕量分析程序(MAP)用户指南.pdf》资料免费下载
    发表于 11-26 15:49 ?0次下载
    FPD-link裕量分析程序(<b class='flag-5'>MAP</b>)用户指南

    【「HarmonyOS NEXT启程:零基础构建纯血鸿蒙应用」阅读体验】+1-7章有感

    重要的了,这部分信息我建议大家都注意一下。 这本书虽然说是零基础构建鸿蒙应用,但是它对面向对象还是有所要求的,假如是学生之类的小白,估摸着学习会很困难,它的面向对象,应该是安卓,IOS
    发表于 11-24 19:27

    鸿蒙Flutter实战:12-使用模拟器开发调试

    前提 开发电脑需为M系列芯片 (ARM架构) 的 Mac 电脑 目前 Flutter 鸿蒙开发,无法使用 X86 架构的模拟器,只能使用 ARM 架构的模拟器** 创建项目 等开发环境搭建
    发表于 11-10 13:13

    鸿蒙Taro实战:01-搭建开发环境

    ## 配置鸿蒙环境 ### 下载安装 DevEco ### 配置IDE 打开 `Prefreences`, `OpenHarmony SDK`, 勾选 `API Version 12
    发表于 11-06 16:42