一.常用类型转换
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)
