HarmonyOS Next 纯血星河版【六】【ArkTS语法】：数组的增删改查操作、判断和循环以及算元语句、条件渲染（淘宝购物车案例）、数组的遍历和数组对象的定义使用、ForEach遍历渲染的使用

最新推荐文章于 2024-06-05 16:59:18 发布
最新推荐文章于 2024-06-05 16:59:18 发布
阅读量1.7k 收藏 12
点赞数 27
分类专栏： Harmony OS 4.0 + Next HarmonyOS Next 纯血星河版 文章标签： harmonyos 华为
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Forever_Hopeful/article/details/138540315
版权

文章目录

HarmonyOS Next AtkTS语法

一、数组的操作

在这里插入图片描述

1. 数组 - 定义、查找、修改

在这里插入图片描述

1.1 定义一个数组
// 定义一个数组
let arr : string[] = ['张三', '李四', '王五', '赵六']
console.log('整个数组内容为；', arr)
  • 需要注意，类型可以根据自己的需求来定，你可以写成：number[]。

运行效果如下：
在这里插入图片描述

1.2 通过索引查找数组元素
// 2. 通过下标访问指定的数组元素
console.log(arr[1])  // 李四   （注意，索引 从 0  开始）
1.3 通过索引修改 数组元素
// 3. 修改数组下标指定的元素
arr[0] = '数组'
console.log('修改后的数组内容为：', arr)

在这里插入图片描述

2. 数组 - 添加元素

在这里插入图片描述

3. 数组 - 删除元素

在这里插入图片描述

  • 注意，删除后方法返回删除后的元素

4. 数组 - 任意位置添加、删除

在这里插入图片描述

// splice方法，任意位置：删除
let arr1 : string[] = ['张三', '李四', '王五', '赵六']
arr1.splice(3, 1) // 从索引为 3 的元素处，开始删除，个数为 1
console.log('数组：',arr1)  //  张三,李四,王五


// splice方法，任意位置 ：新增
arr1.splice(1, 0, '添加', '元素')  // 参数一： 起始索引   参数二： 操作的个   参数三： 添加的元素
console.log('arr1:', arr1)

6. 数组操作 – 总结

在这里插入图片描述

二、ArkTS 中的 语句 - 判断

在这里插入图片描述

1. if - 判断语句

1.1 if 分支
单分支

在这里插入图片描述

双分支

在这里插入图片描述

代码演示：
// if 语句的基本使用  (大家不考试，不需要分清楚单分支双分支，知道怎么执行，怎么用就好了)
let age : number = 19   // 现在十九了，以前 18 天天 写 十八岁
if (age > 18) {
  console.log('年龄分段', `年龄为：${age} , 您已成年！`)
} else {
  console.log('年龄分段', `年龄为：${age} , 您未成年！`)
}
// 运行结果：年龄分段 年龄为：19 , 您已成年！

  • 只要记住，if成立else就不执行，反之，else就一定执行。

  • 大家学过 JavaScript、Typescript、Java、c其实都只需要知道有没有差异，可以无缝衔接。

1.2 判断语句 小结：

在这里插入图片描述

1.3 . 实际开发案例的使用

在这里插入图片描述

@Entry
@Component
struct ArrayDemoCode {
  // 状态变量
  @State number : number = 1
  build() {
    Column() {
      Row({ space: 10}) {
        Text('-').width(30).height(30).border({ width: 1, color: Color.Black}).fontSize(24).textAlign(TextAlign.Center).borderRadius(15)
          .onClick( () => {
            // 如果 this.number 小于 1 ，不允许操作数据，否则允许
            if (this.number > 1) {
              this.number--
            } else {
              console.log('this.number(-)', '操作已经达到上限！！！')
            }
          })
        Text(this.number.toString()).fontSize(26)
        Text('+').width(30).height(30).border({ width: 1, color: Color.Black}).fontSize(24).textAlign(TextAlign.Center).borderRadius(15)
          .onClick( () => {
            // 如果 this.number 小于 1000 ，允许操作数据，否则禁止
            if (this.number < 1000) {
              this.number++
            } else {
              console.log('this.number(+)', '操作已经达到上限！！！')
            }
          })
      }
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}
1. 4 if判断 多分支语句

在这里插入图片描述

  • 其实这里学会了单分支和双分支，能看懂就可以。实际开发都是一样的。
    在这里插入图片描述

  • 这个就是往上面替换文字和条件就可以了哦！

2. switch - 判断分支语句

在这里插入图片描述

  • 这里千万注意 break。执行完毕当前的case 分支，不跳出。后面的代码块就会执行。

3. 三元运算符

在这里插入图片描述

// 三目运算符
let number : number = 10
console.log('结果为：', number > 20 ? 'true' : 'false')  // 结果为： false
  • 问号前面的成立， 执行 冒号 前面的， 不成立： 执行 冒号后面的

三 、条件渲染

在这里插入图片描述

1. 淘宝购物车案例

需求：商品购买完毕了，我们及时渲染对应的组件。
在这里插入图片描述

在这里插入图片描述

代码示例：
import { AlertDialog } from '@ohos.arkui.advanced.Dialog'

@Entry
@Component
struct TaoBaoShoppingCartTest {
  @State total : number = 100
  build() {
    Column() {
      Column () {
        Text(`商品还剩下${this.total}件！`).textAlign(TextAlign.Center).fontWeight(700).fontSize(20)
        Row({ space: 10}) {
          Button('买 1 件')
            .fontSize(14)
            .onClick( () => {
              if (this.total > 0) {
                this.total--
              }
            })
          Button('买 5 件')
            .fontSize(14)
            .onClick( () => {
               if (this.total >= 5) {
                   this.total -= 5
               }
            })
          Button('买 10 件').onClick(() => { if (this.total >= 10) {this.total -= 10} })
        }
        .margin({ top: 10})
      }
      .width('100%')
      .layoutWeight(1)
      .backgroundColor('#fcfcfc')
      .justifyContent(FlexAlign.Center)
        if (this.total > 0) {
          Row(){
            Row({space: 10}) {
              Column({space: 5}) {
                Image($r('app.media.dianpu')).width(24).height(24).fillColor(Color.Black)
                Text('客服').fontSize(12)
              }
              Column({space: 5}) {
                Image($r('app.media.kefu')).width(24).height(24).fillColor(Color.Black)
                Text('客服').fontSize(12)
              }
              Column({space: 5}) {
                Image($r('app.media.gouwucheman')).width(24).height(24).fillColor(Color.Black)
                Text('购物车').fontSize(12)
              }
            }
            Row() {
              Button('加入购物车').fontSize(14).fontColor(Color.White).backgroundColor('#ffc745')
                .width(110).margin({left: 5, right: 5})
              Button('立即购买').fontSize(16).fontColor(Color.White).backgroundColor('#fb0029').width(100)
            }.width(220)
        }
        .width('100%').height(100).padding(10).justifyContent(FlexAlign.SpaceEvenly)
        } else {
          Column() {
            Row() {
              Row() {
                Image($r('app.media.tongzhi')).width(20).height(20).fillColor(Color.Red).margin({left: 5, right: 10})
                Text('该商品暂时没有库存，看看相似商品吧').fontSize(12).fontColor('#cf9a6d')
              }
              Image($r('app.media.zhedie')).width(20).height(20).fillColor(Color.Orange)
            }
            .width('100%')
            .height(50)
            .justifyContent(FlexAlign.SpaceBetween)
            .backgroundColor('#fff9dc')
            .padding(5)
            Row() {
              Row({space: 10}) {
                Column({space: 5}) {
                  Image($r('app.media.dianpu')).width(24).height(24).fillColor(Color.Black)
                  Text('客服').fontSize(12)
                }.layoutWeight(1)
                Column({space: 5}) {
                  Image($r('app.media.kefu')).width(24).height(24).fillColor(Color.Black)
                  Text('客服').fontSize(12)
                }.layoutWeight(1)
                Column({space: 5}) {
                  Image($r('app.media.gouwucheman')).width(24).height(24).fillColor(Color.Black)
                  Text('购物车').fontSize(12)
                }.layoutWeight(1)
              }
              .layoutWeight(1)
              Button('查看类似商品')
                .width(160).margin(10).backgroundColor('#ffc745').fontSize(18)
            }
            .width('100%')
            .height(100)
          }.width('100%').height(150)
        }
    }
    .width('100%').height('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    }
}

四、ArkTS - 循环语句

while循环

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2. while - 练习题

在这里插入图片描述

// 需求1： 打印 1 - 100 的数字
let i : number = 1;
while (i <= 100) {
  console.log("需求1：", i)
  i++
}

console.log("-------------------------------------------")

// 需求2：打印 1 - 100 之间的偶数
let z : number = 1;
while (z <= 100) {
  if (z % 2 == 0) {
    console.log("需求2：", z)
  }
  z++
}

console.log("-------------------------------------------")

// 需求3：计算 1 - 10 内数字的累加和
let k : number = 1
let sum : number = 0
while (k <= 10) {
  sum += k
  k++
}
console.log("需求三：", sum)

for 循环

  • 作用和 while 循环作用一样。

在这里插入图片描述

代码示例

在这里插入图片描述

for循环练习
// 使用 for 循环 求 1- 10 之间的值
let sum2 : number = 0
for (let i : number = 1; i <= 10; i++) {
  sum2 += i
}
console.log("sum2: ", sum2)

五、退出循环

在这里插入图片描述

六、遍历数组

  • 使用循环对数组一个一个访问一遍。

1. for 循环遍历

在这里插入图片描述

数组中的 - length方法
  • 我不知道数组到底多长，此时就可以调用该方法，他返回的就是数组的元素个数。但是需要注意的是，我们数组从 0 开始，所以我们一般需要注意使用 等于号。
    在这里插入图片描述

2. for of 遍历

在这里插入图片描述

  • 主要是，我们 item 就是我们数组中的每一个元素
  • of 后面写的是 需要遍历的数组

3. 遍历数组练习

在这里插入图片描述


/**
 * 遍历数组的练习
 */

// 需求1：求数组的累加和 [22, 3, 44, 55, 80]
let arr1 : number[] = [22, 3, 44, 55, 80]
let sum1 : number = 0
for (let item of arr1) {
  sum1 += item
}
console.log('需求1：', sum1)  // 204

console.log('------------------------------------------')

// 需求2：筛选数组中大于 10 的元素 ，将其收集到新的数组中并打印出来 [22, 3, 44, 55, 80]
let arr2 : number[] = [22, 3, 44, 55, 80]
let newArr : number[] = []
for (let item  of arr2) {
  if (item > 10 ) {
    newArr.push(item)
  }
}
console.log('newArr', newArr) // 22,44,55,80

console.log('------------------------------------------')

// 需求3：将数组中 不是 0 的元素 收集到新的数组中 [22, 3, 0, 55, 0, 0, 11, 5, 0]
let arr3 : number[] = [22, 3, 0, 55, 0, 0, 11, 5, 0]
let newArr2 : number[] = []
for (let item of arr3) {
  if (item != 0) {
    newArr2.push(item)
  }
}
console.log('newArr2', newArr2)    // 2 22,3,55,11,5

七、对象数组

在这里插入图片描述

  • 数组对象的基本使用代码示例：
/**
 * 对象数组
 */

// 1. 定义接口规范对象的创建
interface Student {
  id : string,
  name : string,
  gender : string
  age : number
}

// 2. 遵循接口类型规范，创建对象
let studentArray : Student[] = [
  {id: '001', name: '张三', gender: '男', age: 23},
  {id: '002', name: '李四', gender: '男', age: 24}
]

// 3. 使用数组对象，和 普通对象一样
// console.log('查看张三：', studentArray[0])  引用数据类型打印只能看到类型哦
console.log('查看张三', JSON.stringify(studentArray[0]))


// 4. 遍历数组对象，也是一样的，就是需要注意使用，需要调用方法转换数据处理哦
for (let item  of studentArray) {
  console.log('数据对象', JSON.stringify(item))
}

八、 ForEach - 遍历控制渲染

在这里插入图片描述

  • 实现如下效果代码演示：

在这里插入图片描述

@Entry
@Component
struct ForEachItemDemo  {
  // 准备数据源，数据列表
  @State titles : string[] = ['电子产品','精品服饰','母婴产品','影音娱乐','海外旅游']
  build() {
    Column() {
      // 使用 ForEach 遍历数组渲染
      ForEach(this.titles, (item : string, index) => {
          Text(item).fontSize(18).fontColor('#FFCCAA').fontWeight(700).width('100%').padding(10).textAlign(TextAlign.Center)
      })
    } .width('100%').height('100%').padding(10)
  }
}

大家知道他的参数和使用即可！然后项目中多练习，加油！后面章节我们提供一个阶段性案例哦！

MakeFullStack
关注
  • 27
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速 入门鸿蒙开发教程
02-11
全网首发鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程；开发工具下载 HarmonyOS官网 → 一探究竟 → DevEco Studio 下载 地址：https://developer.huawei.com/consumer/cn/； ArkTS...
jdbc操作oracle数据库(增删改查)
02-28
jdbc操作Oracle数据库（增删改查） 在Java中，使用JDBC（Java Database Connectivity）来操作Oracle数据库是一种常见的做法。下面将详细介绍如何使用JDBC来实现增删改查操作。 首先，需要了解JDBC的基本概念。JDBC...
鸿蒙Harmony应用开发—ArkTS-ForEach：循环渲染
m0_64420071的博客
03-23 1581
ForEach基于数组类型数据执行循环渲染。
鸿蒙HarmonyOS实战-ArkTS语言基础类库（容器类库）
shudaoshanQAQ的博客
01-11 1562
容器类库是指一组用于存储和管理数据的数据结构和算法。它们提供了各种不同类型的容器，如数组、链表、树、图等，以及相关的操作和功能，如查找、插入、删除、排序等。
HarmonyOS应用开发之ArkTS数组
qq_33949346的博客
05-04 377
下标（索引）：在数组中的位置，每个值都有一个下标（索引），从左往右，起始至为0，一次递增1；
【HarmonyOS Arkts笔记】Arkts ForEach循环使用
风度
12-29 923
【HarmonyOs Arkts笔记】Arkts ForEach循环使用
OpenHarmony开发实战：关系型数据库（ArkTS）
shudaoshanQAQ的博客
04-10 1696
本Codelab以记账为例，使用关系型数据库的相关接口实现了对账单的增、删、改、查操作。
HarmonyOs开发：关系型数据库封装之增删改查
最新发布
知足常乐
06-05 627
数据量较少的持久化存储，我们可以选择用户首选项或者是分布式键值数据库进行操作，如果前两种无法满足，在鸿蒙当中，也给我们提供了关系型数据库进行数据之间的操作
鸿蒙ArkTS基础类库——线性容器
2301_76813281的博客
12-14 1368
容器类库，用于存储各种数据类型的元素，并具备一系列处理数据元素的方法，作为纯数据结构容器来使用具有一定的优势。容器类采用了类似静态语言的方式来实现，并通过对存储位置以及属性的限制，让每种类型的数据都能在完成自身功能的基础上去除冗余逻辑，保证了数据的高效访问，提升了应用的性能。当前提供了线性和非线性两类容器，共14种。每种容器都有自身的特性及使用场景，详情请参见线性容器和非线性容器。
【鸿蒙开发】第五章 ArkTS基础知识 - 声明变量、常量、类型和函数
Yvan
12-11 7484
if语句的条件支持非boolean值，对于boolean以外的类型，会进行隐式类型转换，null、undefined、空字符串、0等默认值都为fasleArkTS声明的变量、常量、类型、函数都跟TypeScript的大致基本相同，与Java也极其相似。所以如果是有一定语言基础的小伙伴，学习ArkTS的语法毫无难度，基本按照官方文档提供的指引学习即可，后面章节我们会继续记录ArkTS的学习。
HarmonyOS开发：ArkTs常见数据类型（一）
知足常乐
11-20 1659
本文针对开发中常用的数据类型，做一个简单的概述，便于第一次接触到ArkTs语言开发的同学，能够快速的对数据类型做一个了解。
HarmonyOS学习路之方舟开发框架—学习ArkTS语言（状态管理 三）
爱吃土豆丝的打工人的博客
08-01 2316
Link装饰的变量与其父组件中的数据源共享相同的值。@Provide装饰的状态变量自动对其所有后代组件可用，即该变量被“provide”给他的后代组件。由此可见，@Provide的方便之处在于，开发者不需要多次在组件之间传递变量。后代通过使用@Consume去获取@Provide提供的变量，建立在@Provide和@Consume之间的双向数据同步，与@State/@Link不同的是，前者可以在多层级的父子组件之间传递。
黑马HarmonyOS-NEXT星河版实战-课程网盘链接提取码下载 .txt
06-03
"黑马HarmonyOS-NEXT星河版实战"课程旨在帮助学员深入了解HarmonyOS-NEXT星河版操作系统的开发和实际应用。学员将学习操作系统原理、应用开发技巧和界面设计，通过实战项目提升技能。课程注重实践与理论相结合，为...
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程2
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
05-16
全网首发黑马程序员鸿蒙 HarmonyOS NEXT星河版零基础入门到实战，零基础也能快速入门鸿蒙开发教程1
【HarmonyOS(ArkTS)学习笔记-3】认识ArkTS语言
weixin_62984531的博客
10-23 2383
【HarmonyOS(ArkTS)学习笔记-3】认识ArkTS语言
ArkTs 状态管理
qq_38690457的博客
01-03 1702
(类似@Link 的双向同步（不用传递参数所以使用的代价是浪费资源）)
删除数组中某个指定元素或删除数组中某个对象元素
热门推荐
weixin_44900104的博客
07-07 1万+
es6-删除数组中某个指定元素或者删除数组中某个对象
使用C语言实现双向循环链表的增删改查以及从大到小和从小到大的链表排序
06-07
好的，我会尽力回答您的问题。 首先，我们来看一下双向循环链表的定义： ```c typedef struct node { int data; struct node *prev; struct node *next; } Node; typedef struct list { Node *head; Node *tail; int size; } List; ``` 其中，`Node` 表示链表中的一个节点，包含数据和两个指针，分别指向前一个节点和后一个节点。`List` 表示链表本身，包含头节点、尾节点和链表大小。 接下来，我们来实现双向循环链表的增删改查和排序。 1. 增加节点 ```c void addNode(List *list, int data) { Node *newNode = (Node*) malloc(sizeof(Node)); newNode->data = data; if (list->size == 0) { newNode->prev = newNode; newNode->next = newNode; list->head = newNode; list->tail = newNode; } else { newNode->prev = list->tail; newNode->next = list->head; list->tail->next = newNode; list->head->prev = newNode; list->tail = newNode; } list->size++; } ``` 2. 删除节点 ```c void deleteNode(List *list, Node *node) { if (list->size == 0) { return; } if (list->size == 1) { list->head = NULL; list->tail = NULL; } else { node->prev->next = node->next; node->next->prev = node->prev; if (node == list->head) { list->head = node->next; } else if (node == list->tail) { list->tail = node->prev; } } free(node); list->size--; } ``` 3. 修改节点 ```c void modifyNode(List *list, Node *node, int data) { node->data = data; } ``` 4. 查找节点 ```c Node* findNode(List *list, int data) { Node *current = list->head; while (current != NULL) { if (current->data == data) { return current; } current = current->next; if (current == list->head) { break; } } return NULL; } ``` 5. 从小到大排序 ```c void sortAscending(List *list) { Node *current = list->head; int temp; do { Node *ptr = current->next; while (ptr != list->head) { if (current->data > ptr->data) { temp = current->data; current->data = ptr->data; ptr->data = temp; } ptr = ptr->next; } current = current->next; } while (current != list->head); } ``` 6. 从大到小排序 ```c void sortDescending(List *list) { Node *current = list->head; int temp; do { Node *ptr = current->next; while (ptr != list->head) { if (current->data < ptr->data) { temp = current->data; current->data = ptr->data; ptr->data = temp; } ptr = ptr->next; } current = current->next; } while (current != list->head); } ``` 以上就是双向循环链表的增删改查和排序的实现。希望能够帮到您！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MakeFullStack

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值