ArkTS是TypeScript的超集, 是编写鸿蒙软件的编程语言

ArkTS主要扩展了如下能力:

基本语法:

状态管理: 状态让页面动起来

控制渲染:

1.处理数据

1.1字符串拼接

任何类型与字符串拼接, 最终转化为字符串类型

1.1.1 + 可用来拼接

将两个或多个字符串, 拼成一个字符串.(通常接字符串或者)

''+'' => '' 加号的作用拼接

注意: + 两端只要有字符串, 就是拼接

只有两端都是数字, 才是加

let name:string='吕布'
let age:number=18
let age1:number=18
// + 两端只要有字符串, 就是拼接
console.log('简介信息:'+'姓名'+name)
console.log('简介信息:'+'年龄'+age)
// 只有两端都是数字, 才是加
console.log('总数',age + age1)

1.1.2可用模板字符串 `hello`

作用: 拼接字符串和变量

优势: 模板字符串是一种特殊的字符串，更适合于多个变量的字符串拼接

let name:string='吕布'
let age:number=18
let tool:String='方天画戟'
//用模板字符串
console.log('三国名将',`中有个${name}, 年龄:${age}, 武器:${tool}`)
//用 + 号拼接
console.log('三国名将中有个'+name+' 年龄:'+age+' 武器:'+tool)

1.3类型转换

数字类型多用于计算, 字符串类型多用于展示

1.3.1字符串转数字

1. Number(): 字符串转接转数字, 转换失败返回NaN ( 字符串中包含非数字 转换失败)

1. parseInt(): 去掉小数部分转数字, 转换失败返回NaN( 可以转换以数字开头的包含非数字的字符串，参数只能是字符串类型)

1. parseFloat(): 保留小数部分转数字, 转换失败返回NaN，

let str1:string='1.1'
let str2:string='1.2'
let str3:string='1.99a'
let str4:string='a'
//使用Number(变量)转化
console.log('Number',Number(str1));
console.log('Number',Number(str2));
console.log('Number',Number(str3));
console.log('Number',Number(str4));
//用parseInt(变量)转化 取整
console.log('parseInt',parseInt(str1));
console.log('parseInt',parseInt(str2));
console.log('parseInt',parseInt(str3));
console.log('parseInt',parseInt(str4));
//用parseFloat(变量)转化 保留小数
console.log('parseFloat',parseFloat(str1));
console.log('parseFloat',parseFloat(str2));
console.log('parseFloat',parseFloat(str3));
console.log('parseFloat.',parseFloat(str4));
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Column(){
}
.width('100%')
.height('100%')
.backgroundColor('#5b73de')
}
}

1.3.2数字转字符串

1. toString(): 数字直接转字符串

1. toFixed(): 四舍六入,五考虑, 偶进。 可设保留小数点后几位

//将数字转化为字符串
let num:number=10000.1
//使用toString()转化, 数字维持原样转化
console.log(num.toString());
//使用toFixed转化, 数字四舍五入转化 可设置保留几位小数
console.log(num.toFixed());
//toFixed()里的数字是保留小数点的位数
console.log(num.toFixed(2));
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Column(){
}
.width('100%')
.height('100%')
.backgroundColor('#5b73de')
}
}

1.4@State状态管理

点击交互 触发了 文本状态变更

状态管理

普通变量: 只能在初始化时渲染, 即使后续普通变量的值变化了, 也不会引起UI更新

状态变量: 被装饰器(@State)装饰, 变量值改变会引起UI的渲染刷新 (必须设置类型和初始值)

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

struct内部的变量和函数不使用关键字

let name:string='吕布'
@Entry
@Component
struct Index {
@State name:string='诸葛亮'
age:number=18
name1:string='刘邦'
build() {
Column(){
Text(name)
.onClick(()=>{
name='奉先'
console.log('name',name);
})
.width(300)
.height(60)
.backgroundColor(Color.Green)
Text(this.name1)
.width(300)
.backgroundColor(Color.Pink)
.height(60)
.onClick(()=>{
this.name1='汉高祖'
console.log('name',this.name1);
})
Text(this.name)
.width(300)
.backgroundColor(Color.Grey)
.height(60)
.onClick(()=>{
this.name='孔明'
console.log('name',this.name);
})
}
.width('100%')
.height('100%')
.backgroundColor('#eee')
}
}

1.5基本概念

2.点击事件

Button('点我, 显示弹框')
.onClick(()=>{
AlertDialog.show({
message:'你好, 这是一个弹框'
})
})

@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Column(){
Button('一个按钮')
//点击监听属性
.onClick(()=>{
//AlerDialog.show文本提示框函数
AlertDialog.show({
message: '你好这是一个弹框'
})
})
Text('一个按钮')
.width('30%')
.height(40)
//点击监听属性
.onClick(()=>{
//AlerDialog.show文本提示框函数
AlertDialog.show({
message:'你好这是一个文本弹框'
})
})
}
.width('100%')
.height('100%')
.backgroundColor('#eee')
}
}

总结:

1.如何监听用户点击事件

语法:onClick(()=>{})

2.如何在界面中弹出一个对话框

AlerDialog.show({ })

3.运算符

用来运算的一些符号

3.1算术运算符

算数运算符: 也叫数学运算符, 主要包括加减乘除 取余(求模)

let num1:number =10
let num2:number=20
console.log('加法运算',num1+num2)//30
console.log('减法运算',num1-num2)//-10
console.log('乘法运算',num1*num2)//200
console.log('除法运算',num1/num2)//0.5
console.log('取余运算',num2%num1)//0
let num3:number=num1+=10//num1+10console.log('加法赋值"，num3)// 20
let num7:number=num1-=10//0
let num4:number =num1 *=10//10*10 =100
let num5:number=num1/=10//10/10=1
let num6:number=num1%=10
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Row() {
Column() {
}.position({x:'85%',y:'85%'})
.width(50)
.height(50)
.width('100%')
}
.height('100%')
}
}

3.2赋值运算符

赋值运算符: 对变量进行复制的运算符, 如: =

赋值运算数(本质上就是一个简写, 先对变量本身进行计算, 计算完再赋值回来)

3.3一元运算符

常见的一元运算符:++(让变量在它原本的基础上加1)和--(让变量它原本的基础上减1)

• 后置写法, 计算在赋值后

• 前置写法, 计算在赋值前

let num:number=10
//用后置写法, 赋值后在计算
let res1:number=num++
console.log(res1.toString());
console.log(num.toString());
//用前置写法,先计算再赋值
let res2:number=++num
console.log(res2.toString());
console.log(num.toString());
@Entry
@Component
struct Index {
// 1.定义两个变量,一个存点赞量,一个存颜色
@State col:String='#7e7e7e'
@State num:number=8888
build() {
Column(){
}
.padding(20)
}
}

计算步骤详解

3.4比较运算符

作用: 用来判断比较两个数据大小, 返回一个布尔值(true/false)

分类:

用法:

let num1:number=1
let num2:number=2
// 注意: 使用 == 要求必须是同类型
console.log(`${num1==num2}`)//判断num1与num2是否相等, false
console.log(`${num1>=num2}`)//判断num1大于num2,false
console.log(`${num1<=num2}`)//判断num1小于num2,true
console.log(`${num1!=num2}`)//判断num1与num2是否不相等, true
@Entry
@Component
struct Index {
// 1.定义两个变量,一个存点赞量,一个存颜色
@State col:String='#7e7e7e'
@State num:number=8888
build() {
Column(){
}
.padding(20)
}
}

3.5逻辑运算符?

作用: 扩充判断条件

逻辑运算符的返回值不仅仅有布尔型，还可以有number类型，string类型等等（好像是任何一个数据类型都可以是逻辑运算符的返回值），逻辑中断的返回值也可以是不仅仅是布尔型，还可以是其它类型

分类:

用法:

单个 ! 是对内容取反

3.6逻辑中断

逻辑中断不是一个运算符，它是一个运算规则，就是当判断时即使没有执行就判断出结果了, 剩下的中断不再执行。并返回终止时的返回值，逻辑运算符的返回值不仅仅有布尔型，还可以有number类型，string类型等等

let num1:number=8
let num2:number=4
let num3:number=2
let num4:number=0
let str:string=''
// ArkTS与js都有数据的隐式转换
// ->false, 0, '', undefined, null 进行逻辑计算的售后,都会被饮食转换为false
// ->除了以上几个,其他的都为true
//逻辑与的中断, 有假则中断, 返回中断时的值
console.log('逻辑中断',num1&&num2) // 4
console.log('逻辑中断',num3&&num4) // 0
console.log('逻辑中断',num4&&num3) // 0
console.log('逻辑中断',str&&num2) //
console.log('逻辑中断',num3&&str) //
console.log('逻辑中断',num4&&str) // 0
//逻辑或的中断, 有真则中断, 返回中断时的值
console.log('逻辑中断',num1||num2) // 8
console.log('逻辑中断',num3||num4) // 2
console.log('逻辑中断',num4||num3) // 2
console.log('逻辑中断',str||num2) // 4
console.log('逻辑中断',num3||str) // 2
console.log('逻辑中断',num4||str) //
//逻辑与 && 中断逻辑:
//1.当左侧的结果为false时,终止程序，直接返回左侧结果)
//2.当左侧的结果为true时，直接返回右侧结果
//逻辑或||中断逻辑:
//1.当左侧的结果为true时，终止程序，直接返回左侧结果
//2.当左侧的结果为false时，直接返回右侧结果
@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}

3.7运算符优先级

4.数组操作

4.1 查找&修改

查找:

1. 通过数组下标直接查询

1. 通过查找数组长度, names.length查找

4.2 增加数组元素

4.3 删除数组元素

4.4数组的增删改查代码

//数组的增删改查
let shuzu:number[]=[1,2,3,4,5,6]
//数组的添加
shuzu.push(7) //尾部添加数组
shuzu.unshift(0) //头部添加数组
//通过遍历循环查找数组内容
for (let i=0;i<shuzu.length;i++){
console.log('',shuzu[i])
}
//数组的修改
shuzu[0]=1.1
//直接打印数组
console.log('',shuzu)
//数组的删除
shuzu.pop() //结尾删除一个元素
shuzu.shift() //开头删除一个元素
//通过遍历循环查找数组内容
for (let i=0;i<shuzu.length;i++){
console.log('',shuzu[i])
}
//数组的查找
console.log('',shuzu[4])
@Entry
@Component
struct Index {
@State oldprice:number=40
@State nowprice:number=20.2
@State com:number=1
build() {
Column() {
}
.width('100%')
.height('100%')
.backgroundColor('#f3f3f3')
}
}

4.5 任意位置添加/删除数组元素

起始位置是开始操作第一个元素的数组下标

let names:string [] = ['小红','小明','大强']
//1.删除操作
names.splice(2,1)
console.log('现在数组是',names)
//2. 添加操作
names.splice(2,0,'大华')
console.log('现在数组是',names)
//3.试一下在数组内添加操作
names.splice(0,0,'大红')
console.log('现在数组是',names)
//4.修改操作-既有删除一个添加两个
names.splice(2,1,'大明')
console.log('现在数组是',names)
//5.删除一个添加两个
names.splice(3,1,'旺柴','旺财')
console.log('现在数组是',names)
@Entry
@Component
struct Index {
@State oldprice:number=40
@State nowprice:number=20.2
@State com:number=1
build() {
Column() {
}
.width('100%')
.height('100%')
.backgroundColor('#f3f3f3')
}
}

4.5总结