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


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

【Map 对象的赋值与获取】

  1. 使用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'));
  1. 使用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')}`);
  1. 使用索引赋值
    当处理从接口API返回的数据时,可能需要将JSON字符串直接解析为Map。需要注意的是,虽然可以这样做,但是当尝试通过索引访问时,必须确保数据类型正确。
let jsonStr2 = `{"mobile2":"哈哈哈"}`;
let p3 = JSON.parse(jsonStr2) as Map<string, Object>;
console.info(`p3['mobile2']:${p3['mobile2']}`);

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

  1. 使用forEach遍历
    对于通过set方法赋值的Map,推荐使用forEach来进行遍历。
p.forEach((value, key) => {
  console.info(`Key (set): ${key}, Value (set): ${value}`);
});
  1. 使用索引遍历
    如果Map是通过索引赋值的,则应使用Object.keys结合forEach来遍历键值对。
Object.keys(targetMap).forEach((key) => {
  console.info(`Key (index): ${key}, Value (index): ${targetMap[key]}`);
});

【完整示例】

@Entry
@Component
struct 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'):13444444444
p1.get('aaa'):111
p2.get('main'): aasadada
p3['mobile2']:哈哈哈
遍历p1 forEach
Key (set): mobile, Value (set): 13444444444
Key (set): aaa, Value (set): 111
遍历p2 forEach
Key (set): main, Value (set): aasadada
Key (set): ks, Value (set): sadadas
Key (set): sc, Value (set): 11111
Key (set): update, Value (set): asdasdasda
遍历p3 forEach
e:{}
遍历p1 Object.keys
遍历p2 Object.keys
遍历p3 Object.keys
Key (index): mobile2, Value (index): 哈哈哈

注意事项
• 类型一致性:确保在使用Map时,键和值的类型保持一致。
• 遍历方式:根据赋值方式选择正确的遍历方法。
• 错误处理:在尝试遍历非Map类型时,应适当处理可能出现的异常。

<think>好的,用户想了解鸿蒙系统中与生肖抽卡相关的功能或示例代码。我需要结合提供的引用资料来回答这个问题。首先,引用3提到了鸿蒙NEXT的抽奖应用开发,包括随机数生成、数组动态渲染、动画效果等,这可能和生肖抽卡相关。引用1中的示例是关于集卡抽奖的,使用DevEco Studio开发,应该可以作为参考。引用3还提到数组对象动态渲染和更新时的注意事项,这在处理抽卡数据时很重要。 用户需要具体的功能实现或示例代码,所以应该先介绍实现抽卡功能的关键技术点,比如布局、随机数生成、数据绑定、动画效果。然后,根据这些点,给出一个简化的示例代码,可能使用XML布局和ArkTS代码。同时,需要注意鸿蒙特有的特性,比如对象数组更新需要重新赋值才能触发渲染,这点在引用3中有提到,必须包含进去。 另外,引用4提到了通过XML编写页面,这可能涉及到UI布局的结构,比如Grid布局来展示生肖卡片,Stack布局放置遮罩层。动画部分可以使用ArkUI的animation属性,如引用3中的遮罩层动画和图像动画效果。最后,要确保代码符合HarmonyOS的开发规范,比如资源文件的存放位置和组件使用方式。 可能还需要考虑如何动态更新卡片状态,比如是否已抽中,以及抽卡次数统计。这部分可以通过状态变量来控制,并在用户点击抽卡按钮时触发随机选择,更新对应的卡片状态。同时,添加简单的动画效果来增强用户体验,比如旋转或缩放动画。 最后,生成相关问题,帮助用户进一步学习,比如性能优化、动画实现或状态管理。确保回答结构清晰,分步骤说明,并引用相关参考资料。</think>### 鸿蒙系统生肖抽卡功能实现 在鸿蒙系统(HarmonyOS)中,实现生肖抽卡功能需要结合**动态数据渲染**、**随机数生成**和**动画效果**等技术[^3]。以下是关键实现步骤和示例代码: --- #### 1. 布局设计(XML) 使用`Grid`布局展示生肖卡片,`Stack`叠加遮罩层和动画效果: ```xml <!-- entry/src/main/resources/base/layout/animal_card.xml --> <Grid id="cardGrid" columns="4" rows="3" width="100%" height="60%"> <!-- 动态渲染生肖卡片 --> </Grid> <Button text="点击抽卡" onclick="drawCard" width="200vp" margin="20vp"/> ``` --- #### 2. 数据与逻辑(ArkTS) 定义生肖卡片数据模型并实现抽卡逻辑: ```typescript // 卡片数据类 class AnimalCard { id: number = 0 name: string = "" image: Resource = $r("app.media.default") isSelected: boolean = false } // 页面逻辑 @Entry @Component struct AnimalCardPage { @State cardList: AnimalCard[] = [ {id:1, name:"鼠"}, {id:2, name:"牛"}, // ...12生肖数据 ] // 抽卡函数 drawCard() { const index = Math.floor(Math.random() * 12) const newCard = {...this.cardList[index], isSelected: true} this.cardList = this.cardList.map(item => item.id === newCard.id ? newCard : item ) // 必须重新赋值数组触发渲染[^3] // 触发动画 animateCard(index) } } ``` --- #### 3. 动画实现 为抽中卡片添加旋转效果: ```typescript // 动画配置 const animateCard = (index: number) => { const cardItem = document.getElementById(`card_${index}`) cardItem.animate({ transform: { rotate: { x: 0, y: 0, z: 1, angle: 360 } }, duration: 1000, curve: Curve.EaseInOut }) } ``` --- #### 4. 状态更新要点 - **数据驱动更新**:修改`@State`标记的数组必须创建新对象[^3] - **条件渲染**:通过`if`指令控制角标显示 ```xml <Image src="{{$item.image}}"> <Badge visible="{{$item.isSelected}}" count="1" position="rightTop"/> </Image> ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值