ArkTS-语句-分支-循环

ArkTS语言中的分支和循环语句是进行逻辑控制的重要工具，它们允许根据特定条件执行不同的代码路径或者重复执行某段代码 

1. 分支语句

1.1. 语句概念

• 表达式： 可以被求值的代码，并将其计算出一个结果
• 语句： 一段可以执行的代码，是一个行为，例如分 支语句和循环语句

1.2. If 分支

这是最基本的分支结构，它允许根据一个或多个条件的真假来选择执行不同的代码块。在ArkTS中，可以使用if、else以及else if来进行条件判断和分支选择。 

1.2.1. 单分支

if (条件) {
  条件成立执行的代码
}

• 小括号条件结果为 true，则执行大括号里面的代码
• 小括号内的结果若不是布尔类型时，会发生类型转换为布尔值

let score: number = 700

// 如果分数大于600分，提示“恭喜你，考入黑马大学”
if (score > 600) {
  console.log('恭喜你，考入黑马大学')
}

// 小括号内的结果若不是布尔类型时，会发生类型转换为布尔值
if ('hi') {
  console.log('hello world')
}

多学一招：如果大括号里面只有一条语句，可以省略大括号

1.2.2. 双分支

/*
if (条件) {
  条件成立执行的代码
} else {
  条件不成立执行的代码
}
*/


let score: number = 599

// 如果分数大于600分，提示“恭喜你，考入黑马大学”; 否则提示再接再厉
if (score > 600) {
  console.log('恭喜你，考入黑马大学')
} else {
  console.log('再接再厉')
}

1.2.3. 案例-购物车

需求：购物车商品数量大于0可以单击“-”按钮，否则提示：购物车已经空了，不能再减了

 完成效果

@Entry
@Component
struct Index {
  @State
  count: number = 1

  build() {
    Column() {
      Row() {
        Text('-')
          .width(20)
          .height(20)
          .border({width: 1, color: '#999', radius: {topLeft: 3, bottomLeft:3}})
          .textAlign(TextAlign.Center)
          .onClick(() => {
            if (this.count > 0) {
              this.count -= 1
            } else {
              AlertDialog.show({message: '购物车已经空啦，不能再减了'})
            }
          })

        Text(this.count.toString())
          .height(20)
          .padding({left: 10, right: 10})
          .border({width: {top: 1, bottom: 1}, color: '#999'})
          .fontSize(14)

        Text('+')
          .width(20)
          .height(20)
          .border({width: 1, color: '#999', radius: {topRight: 3, bottomRight: 3}})
          .textAlign(TextAlign.Center)
          .onClick(() => {
            this.count ++
          })
      }
    }
    .padding(20)
  }
}

1.2.4. 多分支

let score: number = 66

if (score >= 90) {
  console.log('优秀')
} else if (score >= 70) {
  console.log('良好')
} else if (score >= 60) {
  console.log('及格')
} else {
  console.log('不及格')
}

1.3. Switch 分支

当有多个条件需要判断时，使用switch语句会更加清晰。它允许将变量的值与多种情况进行匹配，每种情况对应一段要执行的代码。 

1.3.1. 基础语法

switch (表达式) {
  case 值1:
    与值1匹配执行的语句
    break
  case 值2:
    与值2匹配执行的语句
    break
  default:
    以上都未成功匹配执行的代码
}

注意：

• 如果没有break语句，则执行switch中的下一个label对应的代码块

1.3.2. 练习-查询水果

let fruit: string = '橘子'

switch (fruit) {
  case '苹果':
    console.log('苹果5元/斤')
    break
  case '橘子':
    console.log('橘子3元/斤')
    break
  default:
    console.log('不好意思，您查询的水果已售罄')
}

1.4. 条件表达式

条件表达式又叫三元运算或三元表达式

// 条件 ? 条件成立执行的表达式 : 条件不成立执行的表达式

let num1: number = 5
let num2: number = 10

// 返回较大值
let res: number = num1 > num2 ? num1 : num2
console.log('结果是', res)

2. 条件渲染

ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，使用if、else和else if渲染对应状态下的UI内容。

if、else if后跟随的条件语句可以使用状态变量，状态变量值变化时，条件渲染语句会进行更新。

@Entry
@Component
struct Index {
  @State
  counter: number = 1

  build() {
    Column() {
      if (this.counter == 1) {
      Text('1')
      } else if (this.counter == 2){
        Text('2')
      } else {
        Text('any')
      }

      // 单击按钮，切换显示 Text
      Button('切换')
        .onClick(() => {
          this.counter ++
        })
    }
  }
}

3. 循环语句

作用：重复执行指定的一段代码

3.1. While 语句

while (条件) {
  条件成立重复执行的代码
}

3.1.1. 基本使用

/*
while (true) {
  console.log('while', '重复执行的代码')
}
*/

// 指定循环次数
let i: number = 1
while (i < 5) {
  console.log('while~i', '重复执行的代码')
  i++
}

Tips：循环三要素

1. 初始值（变量）
2. 循环条件
3. 变化量（变量计数，自增或自减）

3.1.2. 练习-累加和

需求：10以内数字累加和

let sum: number = 0
let i: number = 1

// 累加 前两个数字之和 + 下一个数， sum = sum + i
while (i <= 10) {
  sum += i
  i++
}

// 输出结果
console.log('累加和是', sum)

3.2. For 语句

for (初始值; 条件; 变化量) {
  重复执行的代码
}

3.2.1. 基本使用

for (let i = 0; i < 5; i++) {
  console.log('for', '重复执行的代码')
}

3.3. 退出循环

作用：满足指定条件退出循环的方式

• break：终止循环
• continue： 退出当前一次循环的执行，继续执行下一次循环

/*
for (let i = 1; i <= 5; i++) {
  if (i == 3) {
    console.log('吃饱了，不吃了')
    // 终止循环
    break
  }
  console.log(`正在吃第${i}个苹果`)
}
*/

for (let i = 1; i <= 5; i++) {
  if (i == 3) {
    console.log('吃饱了，不吃了')
    continue
  }
  console.log(`正在吃第${i}个苹果`)
}

4. 遍历数组for...of

 专门用于遍历可迭代对象的元素，例如数组、字符串等。与ForEach相似，但更加灵活，因为它可以跳出循环或提前结束迭代。

• 语法: for (let item of 数组名) {}

• • for ... of : 在 ... 之中 进行循环
  • item: 声明的一个变量, 用来在循环的时候接收每一个数组元素

let names: string[] = ['小红', '小明', '大强']

/*for(let i = 0; i < names.length; i++) {
  console.log('名字是', names[i])
}*/

for (const item of names) {
  console.log('for...of...名字是', item)
}

5. 案例 - 筛选数组中大于等于10的元素

// 筛选出下列数组元素中大于等于10的数据

[22, 3, 44, 55, 80, 10, 11, 5, -1]

5.1. 思路分析

• 声明一个变量, 初始值为 [ ], 用来保存最终的筛选结果
• 遍历数组, 将数组每一个元素都与 10 进行比较,

• • 满足条件 推入 结果变量
  • 不满足条件 不做任何处理 执行下一次循环

• 输出最终的结果

5.2. 完成

let arr: number[] = [22, 3, 44, 55, 80, 10, 11, 5, -1]

// 1. 声明新数组
let newArr: number[] = []

// 2. 遍历数组，将大于10的数据新增到 newArr
for (const item of arr) {
  if (item >= 10) {
    newArr.push(item)
  }
}

console.log('新数组是', newArr)

6. 自主案例 - 数组去0

[22, 3, 0, 55, 0, 0, 11, 5, 0]

let arr: number[] = [22, 3, 0, 55, 0, 0, 11, 5, 0]

let newArr: number[] = []
for (const item of arr) {
  if(item != 0) {
    newArr.push(item)
  }
}

console.log('大于0的数字个数是', newArr)

7 .渲染控制 - ForEach 

 这是一个迭代方法，用于遍历数组或其他集合类型的元素，并对每个元素执行相同的操作。这在界面渲染时尤其有用

7.1 ForEach语法

ForEach基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。例如，ListItem组件要求ForEach的父容器组件必须为List组件.

• 语法: ForEach(arr, (item, index) => {})

@Entry
  @Component
  struct Index {
    @State
    titles:string[] = ['电子产品', '精品服饰', '母婴产品', '影音娱乐', '海外旅游']

    build() {
      Column() {
        ForEach(this.titles, (item: string, index: number) => {
          Text(item)
            .fontSize('24')
            .fontWeight(700)
            .fontColor(Color.Orange)
            .width('100%')
            .padding(15)
        })
      }
    }
  }

 8.Math对象

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法, Math 用于 Number 类型数据的处理. 

代码测试 

// 1. 随机数
console.log('Math对象', Math.random())  // 0-1 之间的随机小数

// 2. 向上取整
console.log('Math对象', Math.ceil(1.1))  // 2
console.log('Math对象', Math.ceil(1.9))  // 2

// 3. 向下取整
console.log('Math对象', Math.floor(1.1))  // 1
console.log('Math对象', Math.floor(1.9))  // 1