鸿蒙HarmonyOS基础语法-循环-类型转化-事件

变量命名规则

1,只能包含数字、字母、下划线、$，不能以数字开头(4种类型)

2,不能使用内置关键字或保留字(比如 let、const)

3,严格区分大小写

声明方式 变量字符串，数字，布尔(与TS一致)

let str:string = '你好'
let age:number = 20
let flag:boolean = false

声明数组(与TS一致)

let arr:string[] = ['李四', '王五']
let ageArr:number[] = [100,200,300]

声明常量-使用const

const userAccountId:string = '20250412'

声明对象(与TS一致)

interface  Person{
  name:string,
  age:number,
  like:string[],
  fightWay:()=> void // 战斗方法，没有返回值
  sya: (cont:string)=> string // 返回字符串
}

let luofengObj:Person = {
  name:'罗峰',
  age:200,
  like:['战斗'],
  fightWay:()=>{
    console.log('开始战斗')
  },
  sya: (mess:string)=> {
    return '你好' + mess
  }
}
let str:string = 'heel'
console.log(luofengObj.sya('金角巨兽'))
注意点：必须要实现接口中的每一个字段。接口首字母一般大写

联合类型

// 联合类型，既可以是数字也可以是字符串
let grade:number | string
grade = '优化'
grade = 98

约束类型(与ts一致)

// 约束值sex只能是其中的一种
let sex: '男' | '女' | '未知'
sex ='男' // ok
sex = 0 // 报错

枚举类型

枚举类型是一种特殊的数据类型，约定的变量只能在一组数据范围内选择值
我们可以使用枚举类型，约束变量。
语法：
enum 枚举名 {
    常量1 = 值,
    常量2 = 值
}

enum ThemeBgColor {
  Red = '#ff0f28',
  Green = '#30b30e'
}
// color被枚举ThemeBgColor修饰，它的值只能是 ThemeBgColor中的值
let color:ThemeBgColor = ThemeBgColor.Red // ok
let color2:ThemeBgColor = ThemeBgColor.Err // 报错，因为不存在这个
let color3:ThemeBgColor = '#ffffff' // 报错,因为 ，它的值只能是 ThemeBgColor中的值

函数

// 实现一个函数：苹果5元1斤，买5斤需要多少钱
function  payMoney(many:number){
  let price:number = 5
  return price * many
}
console.log("需要多少钱", payMoney(10))

箭头函数

let buyMoney = (many:number, price:number)=>{
  return price * many
}
let howMoney:number = buyMoney(10,2)
console.log('购买多少钱', howMoney)

循环数组的几种常见办法：for循环；for of循环；ForEach

let arrLike = ['看长腿','唱歌','打游戏']
for (let item of arrLike){
  console.log('每一项', item)
}

声明对象数组，与TS一样的

interface  Person{
  name:string,
  age:number,
  like:string[]
}
let arrLike:Person[]=[
  {
    name:'张三',
    age:19,
    like:['看长腿','唱歌','打游戏']
  },
  {
    name:'李四',
    age:21,
    like:['看美女']
  }
]
for (let item of arrLike){
  console.log('每一项', item)
}

+ 号

注意点:左右两边都是字符的话，起到连接的作用。

如果左右两边都是数字，起到相加的作用。

模板字符串

模板字符串作用:拼接字符串和变量

优势:更适合于多个变量的字符串拼接

let userName:string = "张三"
let age:number = 13
console.log(`${userName}今年${age}岁`)

字符串转数字

Number():将数字类型的字符串直接转为数字，转换失败返回NaN(字符串中包含非数字内容,就会转失败)

parseInt():去掉小数部分转为整数，转换失败返回NaN。

解析过程：依次解析有效字符，遇到无效字符停止。

会忽略前导空格：如 parseInt(" 123") 返回 123

符号处理：识别 + 或 -，如 parseInt("-123") 返回 -123。

parseFloat():保留小数部分转数字，转换失败返回NaN。转换规则跟parseInt()一样，只是它保留小数部分的值

Number 例子

let str1:string = "123"
let str2:string = "123bb"
let str3:string = "CC123bb"
console.log('str1',Number(str1)) // 123
console.log('str2',Number(str2)) // NaN (字符串中包含非数字内容,就会转失败)
console.log('str3',Number(str3)) // NaN 字符串中包含非数字内容,就会转失败)

parseInt 例子

let str1:string = "123"
let str2:string = "123bb"
let str3:string = "CC123bb"
console.log('str1',parseInt(str1)) // 123
console.log('str2',parseInt(str2)) // 123  解析过程：依次解析有效字符，遇到无效字符停止
console.log('str3',parseInt(str3)) // NaN 一开始就是无效字符，因此会是NaN

parseFloat例子

let str1:string = "123 "
let str2:string = " 123.234bb"
let str3:string = "123.13ccc12bb"
let str4:string = "cc123.ccc12bb"
console.log('str1',parseFloat(str1)) // 123
console.log('str2',parseFloat(str2)) // 123.234
console.log('str3',parseFloat(str3)) // 123.13
console.log('str4',parseFloat(str4)) // NaN

tostring()数字转字符串

tostring():数字直接转字符串

let num1:number = 123
let num2:number = 123.234
console.log('num1',num1.toString()) // 123
console.log('num2',num2.toString()) // 123.234

toFixed是4舍6入，5看情况

toFixed(): 是4舍6入，5看情况，可设置保留几位小数。

let num1:number = 123
let num2:number = 1.15
console.log('num1',num1.toFixed()) // 123
console.log('num2',num2.toFixed(1)) // 1.1 输出的是"1.1" 不是 “1.2”。 说明toFixed并不完全的是是舍五入

点击事件

说明:组件被点击时触发的事件

作用:监听用户点击的行为，然后进行对应操作

语法:onclick((参数)=>{})

@Entry
@Component
struct Index {
  build() {
   Column(){
     Text('点我').onClick(()=>{
       AlertDialog.show({
         message:'我出来啦'
       })
     })
   }
  }
}

状态管理

普通变量:只能在初始化时渲染，后续即使变量发生变化后，ui界面也不会再跟新。

状态变量:需要装饰器装饰@State，值发生改变会引起ui界面的重新渲染(必须设置类型和初始值)

需要注意:定义在组件内 普通变量 或 状态变量，都需要 通过 this 访问

普通变量

@Entry
@Component
struct Index {
  // 组件内声明变量，不需要使用关键字let
  myName:string = '张三' // 普通变量,后续即使变量发生变化后，ui界面也不会再跟新。
  build() {
   Column(){
     // 组件内访问变量，需要使用this
     Text(this.myName).width(100).height(40).backgroundColor(Color.Pink)
      .textAlign(TextAlign.Center).margin({left:10,bottom:10})

       Button('点我').width(100).onClick(()=>{
         // 是一个普通变量。后续即使变量发生变化后，ui界面也不会再跟新。
         this.myName = '李四'
         AlertDialog.show({
           message:'更改值'
         })
     })
   }
  }
}

状态变量

@Entry
@Component
struct Index {
  // 组件内声明变量，不需要使用关键字let
  @State myName:string = '张三' // 状态变量，发生变化后，会自动跟新视图
  build() {
   Column(){
     // 组件内访问变量，需要使用this
     Text(this.myName).width(100).height(40).backgroundColor(Color.Pink).textAlign(TextAlign.Center).margin({left:10,bottom:10})
     Button('点我').width(100).onClick(()=>{
       this.myName = '李四'
       AlertDialog.show({
         message:'更改值'
       })
     })
   }
  }
}

简单的计数器案例

@Entry
@Component
struct Index {
  @State num:number = 1 // 状态变量，发生变化后，会自动跟新视图
  build() {
   Column(){
    Row(){
      Button("-").onClick(()=>{
        this.num = this.num - 1 // 等价与 this.num -= 1
      })
      Text(this.num.toString()).margin({ left:10, right:10})
      Button("+").onClick(()=>{
        this.num = this.num+ 1 // 等价与 this.num += 1
      })
    }.padding({left:10})
   }
  }
}

使用ForEach循环Text组件

ForEach语法：

ForEach(数据,(item:类型,index:number)=>{
  Text()
})

@Entry
@Component
struct Index {
  @State likeArr:string[] = ['看长腿','唱歌','打游戏', '追剧','跳舞','打LOL']
  build() {
   Column(){
    //  多行多列的时候，使用Flex布局;
    //  单行单列的时候 使用线性布局
    Flex({
      wrap:FlexWrap.Wrap
    }){
      // 这里使用ForEach循环组件
      ForEach(this.likeArr,(item:string,index:number)=>{
        Text(item).height(40).backgroundColor(Color.Pink).padding({left:10, right:10}).margin({left:10, right:10, bottom:10})
      })
    }
   }
  }
}