鸿蒙5：常用语法

一.常用类型转换

1.字符串转数字

• Number():字符串 直接转数字，转换失败返回NaN(字符串中包含非数字)
• parseInt():去掉小数部分 转数字，转换失败返回NaN
• parseFloat():保留小数部分 转数字，转换失败返回NaN

let string1:string ="1.7"
let string2:string ="1.7a"
let string3:string ="1.7"

console.log("string1",parseInt(string1))//1
console.log("string2",parseFloat(string2))//1.7
console.log("string3",parseFloat(string3))//1.7
console.log("string3",Number(string3))//1.7
console.log("string3",Number(string2))//Nan

2.字符串转数字

• toString():数字直接转字符串
• toFixed():四舍五入转字符串，可设置保留几位小数

let number1:number=1.1
let number2:number=1.9

console.log("number1",number1.toString())//1.1
console.log("number2",number1.toFixed())//1
console.log("number3",number2.toFixed())//2
console.log("number4",number2.toFixed(2))//1.90

二.点击事件

• 语法:onClick( (参数) => {} )

    Text("点击事件")
          .padding(40)
          .backgroundColor(Color.Gray).onClick(() => {
          AlertDialog.show({ message: "这是一个弹窗" })
        })

三.状态管理

1. 状态管理的基本流程图

image.png

2. 普通变量 和 状态变量 的区别?

• 普通变量:只能在初始化时渲染，后续将不会再刷新。
• 状态变量:需要装饰器装饰，改变会引起 UI 的渲染刷新。

@Entry
@Component
struct Index {
  @State message: string = 'hello';

  build() {
    Column({ space: 2 }) {
      Stack({ alignContent: Alignment.TopStart }) {
        Text("点击事件$"+this.message)
          .padding(40)
          .backgroundColor(Color.Gray).onClick(() => {
          this.message="你好ArkTs"
        })

      }
    }
  }
}

四.运算符

1.算数运算符 和 赋值运算符

image.png

2.一元运算符

常见一元运算符:++ 和 --

• 后置写法:先赋值后自增/自减
• 前置写法:先自增/自减再赋值

let number3:number=10
let number4:number=10
console.log("number10",number3++)//10
console.log("number11",++number4)//11

3.运算符优先级

image.png

四.数组

• 查找： 数组名[下标]、数组名.length
• 修改： 数组名[下标] = 新值
• 开头增加: ： 数组名.unshift(数据1, 数据2, ...)
• 结尾增加 ： 数组名.push(数据1, 数据2, ...)
• 从开头删： 数组名.shift()
• 从结尾删：数组名.pop()
• 任意位置增加或删除： 数组名.splice(操作的起始位置, 删除的个数, 新增1, 新增2, ......)

let devices: string[]=["儿童手表","摄像机","门铃"]
let devices: string[]=["儿童手表","摄像机","门铃"]

console.log("devices",devices[0])//儿童手表
console.log("devices",devices.length)//3
devices[0]="行车记录仪"
console.log("devices",devices)//行车记录仪、摄像机、门铃
devices.push("儿童手表")
console.log("devices",devices)//行车记录仪、摄像机、门铃、儿童手表
devices.unshift("定位器")
console.log("devices",devices)//定位器,行车记录仪、摄像机、门铃、儿童手表
devices.shift()
console.log("devices",devices)//行车记录仪、摄像机、门铃、儿童手表
devices.pop()
console.log("devices",devices)//行车记录仪、摄像机、门铃
devices.pop()
console.log("devices",devices)//行车记录仪、摄像机、
devices.splice(1,1)//行车记录义、
console.log("devices",devices)//行车记录义
devices.splice(0,1,"儿童手表",'记录仪')//儿童手表，记录仪
console.log("devices",devices)//儿童手表，记录仪

五.ForEach-渲染控制

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

  @State message: number[] =[1,2,3,4];
ForEach(this.message,(numberText:number,index)=>{
        Text("循环个数"+numberText)
          .padding(10)
          .backgroundColor(Color.Gray).onClick(() => {
          this.message[0]++
        })
      })

六.Class类

1.修饰符：修饰符包括:readonly、private、protected 和 public。省略不写默认为 public

• readonly：只读，都可以访问
• private：私有，类内部可以访问
• protected：保护，类及子类可以访问
• public：公共，都可以访问

2.Class 类 – instanceof

instanceof 运算符可以用来检测某个对象是否是某个类的实例
用法：实例对象 instanceof Class

七.剩余参数 和 展开运算符

剩余参数 和 展开运算符 ...
剩余参数的语法，我们可以将 函数 或 方法 中一个不定数量的参数表示为一个数组

// 剩余参数只能写在最后一位
function 函数名(参数1,参数2,...剩余参数数组){
// 逻辑代码
// 之前的参数:挨个获取即可 // 剩余参数:以数组的形式获取
}

function sum(numA:number,numB:number,...theArgs:number[]) {
        let total = numA+numbB;
        for (const arg of theArgs) {
                  total += arg;
          }
      return total; 
}
console.log(sum(1, 2, 3).toString()) // 6 
console.log(sum(1, 2, 3, 4).toString()) // 10

出于程序稳定性，以及运行性能考虑，在 ArkTS 中 ...(展开运算符) 只能用在数组上

const numArr1: number[] = [1, 2, 3, 4] 
const numArr2: number[] = [5, 6, 7]
// 合并到一起
const totalArr: number[] = [...numArr1, ...numArr2]

八.接口

• 接口继承使用的关键字是 extends

interface IAnimal {
  name: string
}}

interface ICat extends IAnimal {
  color: string
  const cat: ICat = { name: '加菲猫', color: '黑色'
}

• 可以通过接口结合 implements 来限制 类 必须要有 某些属性 和 方法

interface IDog { 
   name: string bark: () => void
}
class Dog implements IDog {
  name: string = ''
  food: string = ''
  bark() { }
}

九.泛型：类型是 可变 的!

function fn1 (temp: string): string {
   return temp
}

function fn2 (temp: number): number {
  return temp
}

function fn3 (temp: boolean): boolean { 
  return temp
}
//改写
function 函数名<Type>(temp:Type):Type{ 
   return temp
}

fn<string>('123')
fn<number>(1)

• 泛型约束

interface ILength {
   length: number
}
// 传入的类型必须要有 接口中的属性
function fn<T extends ILength>(param: T) { 
   console.log('', param.length)
}

• 多个泛型参数

function funcA<T, T2>(param1: T, param2: T2) { 
  console.log('参数 1', param1)
  console.log('参数 2', param2)
}

funcA<string, number>('大白菜', 998)
funcA<string[], boolean[]>(['小老虎'], [false])

• 泛型接口

interface IdFunc<Type> { 
   id: (value: Type) => Type
   ids: () => Type[]
}
let obj: IdFunc<number> = { 
 id(value) { return value },
  ids() { return [1, 3, 5] }
}

• 泛型类

// 定义
class Person <T> {
   id: T
   constructor(id: T) {
      this.id = id
   }
   getId(): T {
    return this.id
  }
}
// 使用
let p = new Person<number>(10)