鸿蒙应用示例：NEXT 中 Map 类型的使用及注意事项

2024-10-12
广东
本文字数：2210 字
阅读完需：约 7 分钟

在 JavaScript 中，Map 对象允许存储任何类型的键和值，提供了键值对的存储功能。在 HarmonyOS 中，Map 的使用基本遵循 JavaScript 的标准，尤其是要注意 set 赋值只能用 get 获取，而索引赋值只能用索引获取。且它们可以同时赋值但遍历的方式又不同。

【Map 对象的赋值与获取】

使用 set 方法赋值当你需要创建一个 Map 对象并为其设置初始值时，可以使用 new Map()构造函数，并传入一个由键值对组成的数组。一旦通过 set 方法设置了值，那么必须使用 get 方法来检索这些值。

let p: Map<string, string> = new Map([["mobile", "13444444444"]]);p.set('aaa', '111');console.info(`p.get('mobile'):` + p.get('mobile'));console.info(`p.get('aaa'):` + p.get('aaa'));

复制代码

使用 Object.entries 转换为 Map 如果你有一个对象，并希望将其转换为 Map 对象，可以利用 Object.entries 方法来实现这一点。此方法将对象的所有可枚举属性转换成键值对数组，然后可以用这些数组来初始化 Map。

let strParam = '{"main":"aasadada","ks":"sadadas","sc":11111,"update":"asdasdasda"}';let obj: object = JSON.parse(strParam);let p2: Map<string, string | number> = new Map(Object.entries(obj));console.info(`p2.get('main'): ${p2.get('main')}`);

复制代码

使用索引赋值当处理从接口 API 返回的数据时，可能需要将 JSON 字符串直接解析为 Map。需要注意的是，虽然可以这样做，但是当尝试通过索引访问时，必须确保数据类型正确。

let jsonStr2 = `{"mobile2":"哈哈哈"}`;let p3 = JSON.parse(jsonStr2) as Map<string, Object>;console.info(`p3['mobile2']:${p3['mobile2']}`);

复制代码

【Map 的遍历】Map 对象支持多种遍历方式，这取决于你是如何赋值的。

使用 forEach 遍历对于通过 set 方法赋值的 Map，推荐使用 forEach 来进行遍历。

p.forEach((value, key) => {  console.info(`Key (set): ${key}, Value (set): ${value}`);});

复制代码

使用索引遍历如果 Map 是通过索引赋值的，则应使用 Object.keys 结合 forEach 来遍历键值对。

Object.keys(targetMap).forEach((key) => {  console.info(`Key (index): ${key}, Value (index): ${targetMap[key]}`);});

复制代码

【完整示例】

@Entry@Componentstruct Index {  build() {    Column() {      Button('测试')        .onClick(() => {          let p1: Map<string, string> = new Map([["mobile", "13444444444"]]);          p1.set('aaa', '111');          console.info(`p1.get('mobile'):` + p1.get('mobile'));          console.info(`p1.get('aaa'):` + p1.get('aaa'));
          let strParam = '{"main":"aasadada","ks":"sadadas","sc":11111,"update":"asdasdasda"}';          let obj: object = JSON.parse(strParam);          let p2: Map<string, string | number> = new Map(Object.entries(obj));          console.info(`p2.get('main'): ${p2.get('main')}`);
          let jsonStr2 = `{"mobile2":"哈哈哈"}`          let p3 = JSON.parse(jsonStr2) as Map<string, Object>          console.info(`p3['mobile2']:${p3['mobile2']}`)
          console.info(`遍历p1 forEach`)          p1.forEach((value, key) => {            console.info(`Key (set): ${key}, Value (set): ${value}`);          });
          console.info(`遍历p2 forEach`)          p2.forEach((value, key) => {            console.info(`Key (set): ${key}, Value (set): ${value}`);          });
          console.info(`遍历p3 forEach`)          try {            p3.forEach((value, key) => {              console.info(`Key (set): ${key}, Value (set): ${value}`);            });          } catch (e) {            console.error(`e:${JSON.stringify(e)}`)          }
          console.info(`遍历p1 Object.keys`)          Object.keys(p1).forEach((key) => {            console.info(`Key (index): ${key}, Value (index): ${p1[key]}`);          });
          console.info(`遍历p2 Object.keys`)          Object.keys(p2).forEach((key) => {            console.info(`Key (index): ${key}, Value (index): ${p2[key]}`);          });
          console.info(`遍历p3 Object.keys`)          Object.keys(p3).forEach((key) => {            console.info(`Key (index): ${key}, Value (index): ${p3[key]}`);          });
        })    }    .height('100%')    .width('100%')  }}

复制代码

打印

p1.get('mobile'):13444444444p1.get('aaa'):111p2.get('main'): aasadadap3['mobile2']:哈哈哈遍历p1 forEachKey (set): mobile, Value (set): 13444444444Key (set): aaa, Value (set): 111遍历p2 forEachKey (set): main, Value (set): aasadadaKey (set): ks, Value (set): sadadasKey (set): sc, Value (set): 11111Key (set): update, Value (set): asdasdasda遍历p3 forEache:{}遍历p1 Object.keys遍历p2 Object.keys遍历p3 Object.keysKey (index): mobile2, Value (index): 哈哈哈

复制代码

注意事项

• 类型一致性：确保在使用 Map 时，键和值的类型保持一致。

• 遍历方式：根据赋值方式选择正确的遍历方法。

• 错误处理：在尝试遍历非 Map 类型时，应适当处理可能出现的异常。

发布于: 15 分钟前阅读数: 5

zhongcx

关注

还未添加个人签名 2024-09-27 加入

还未添加个人简介

发布

暂无评论

创作场景

鸿蒙应用示例：NEXT 中 Map 类型的使用及注意事项

zhongcx

评论