【鸿蒙开发 day13】

ArkTs-核心-基础

一.处理数据
- 1.字符串的拼接
- 2.模板字符串
二.类型转换
- - (1)字符串转数字
  - (2)数字转字符串
  - (3)布尔值转换情况
三.交互点击事件
四.状态管理
五.隐藏图片案例
六.运算符
- 1.算数运算符
- 2.赋值运算符
- 3.一元运算符
- 4.比较运算符
- 5.逻辑运算符
- 6.运算符优先级
七.美团点餐案例
八.数组的增删改查
九.总结

一.处理数据

1.字符串的拼接

作用:拼接字符串和变量
写法:+
说明:
* 加号两侧有一个字符串,拼接,
* 加号的两侧都是数字,是加法运算

let name: string = '悟空'
let age: number = 500
console.log('name: ',name+age+'岁')
console.log('年龄',18+age+2)

运行结果:
在这里插入图片描述

2.模板字符串

作用:拼接字符串和变量
写法: ${变量}用反引号包裹

console.log('',`我的名字是${name}`)

二.类型转换

(1)字符串转数字

使用Number()转换失败返回NaN
只能将数值型字符串进行转换

//Number转换
console.log('Number',Number(str))
console.log('Number',Number(str1))
console.log('Number',Number(str2))

运行结果
在这里插入图片描述

使用parseInt转换,小数点后面有字符串也可以转换成功
只保留整数部分
//parseInt转换 --只保留整数

console.log('parseInt',parseInt(str))
console.log('parseInt',parseInt(str1))
console.log('parseInt',parseInt(str2))

运行结果:
在这里插入图片描述

使用parseFloat()进行转换
转化成小数,小数点后可以存在字母

console.log('parseFloat',parseFloat(str))
console.log('parseFloat',parseFloat(str1))
console.log('parseFloat',parseFloat(str2))

运行结果:
在这里插入图片描述

(2)数字转字符串

tostring()

let num1: number = 1.3531
let num2: number = 1.4341console.log('',num1.toString())
console.log('',num2.toString())

运行结果:
在这里插入图片描述

使用typeo关键字可以查看数据类型
toFixed():保留指定的小数位数(四舍五入)

let num1: number = 1.3531
let num2: number = 1.4341
//查看数据类型 typeof
console.log('',typeof num2.toString())
//toFixed(保留小数位数)
console.log('tofixed',num1.toFixed(2))
console.log('tofixed',num2.toFixed(2))

运行结果:
在这里插入图片描述

(3)布尔值转换情况

方法Boolean()
函数如果没有返回值,那么默认会返回一个undefined
false情况 - 0 false `` NaN null undefined

//转false情况console.log('',Boolean(NaN))
console.log('',Boolean(0))
console.log('',Boolean(``))
console.log('',Boolean(undefined))
console.log('',Boolean(false))

运行结果:
在这里插入图片描述

三.交互点击事件

说明:组件被点击时触发的事件
作用:监听(感知)用户点击行为，进行对应操作
语法:onClick((参数)=>{
AlertDialog.show({
message:“这是一个点击事件”
})
})

@Entry
@Component
struct Index {build() {Column() {Button('点我显示对话框').onClick(() => {// console.log('',)AlertDialog.show({message: "这是一个弹框"})})Text('文本').onClick(() => {AlertDialog.show({message: '这是一个文本弹框'})})}}
}

@Entry
@Component
struct Index {@State name: string = '热巴'@State age: number = 18price: number = 9.99build() {Column({space:30}){Text(this.name).fontSize(30)//text组件中只能放字符串类型Text(this.age.toString()).fontColor(Color.Red)Text(this.price.toString())//点击事件: 在特定的时期做特定的事情//点击事件 在点击的时候,调用箭头函数,处理业务Button('修改变量值').onClick((event: ClickEvent) => {//修改状态变量--会引起UI更新this.name = '杨幂'this.age = 30//修改普通变量 -不会引起UI更新,但是变量的值确实修改了this.price = 6.6})}.width('100%').height('100%')}
}

运行结果:
点击前:
在这里插入图片描述
点击后:

四.状态管理

之前构建的页面多为静态界面。
但如果希望构建一个动态的、有交互的界面，就需要引入“状态”的概念

普通变量:只能在初始化时渲染，后续将不会再刷新。
状态变量:需要装饰器装饰，改变会引起 UI 的渲染刷新(必须设置类型和初始值
注意:定义在组件内普通变量或状态变量，都需要通过 this 访问
组件外的普通变量可以直接访问
组件内的普通变量需要用this.变量名访问

@Entry
@Component
//状态变量: 需要通过装饰器修饰 数据改变的时候会引发UI渲染
//普通变量: 不需要装饰器,数据改变不会产生UI渲染
//访问变量都是使用this关键字
//状态变量必须进行初始化 必须指定数据类型
struct Index {@State name: string = '热巴'@State age: number = 18price: number = 9.99build() {Column(){Text(this.name).fontSize(30)//text组件中只能放字符串类型Text(this.age.toString()).fontColor(Color.Red)Text(this.price.toString())}}
}

运行结果:
在这里插入图片描述

五.隐藏图片案例

五个步骤:

1.找到关联组件
2.给关联组件设置点击事件
3.设置状态变量,存储需要的值(初始化)
4.状态变量和组件或属性建立关联
5.事件中改变状态变量值

@Entry
@Component
struct Index {//3.设置状态变量,储存原本页面中初始化的值@State flagNum: number = 1build() {Column({space:30}){Image($r('app.media.startIcon')).width(50)//1.找到关联组件Button('隐藏图片').onClick((event: ClickEvent) => {//2.给关联组件设置点击事件//5.设置事件中要改变的值this.flagNum = 0}).fontSize(30)}.width('100%')//4.状态变量和组件或属性建立关联.opacity(this.flagNum)}
}

运行结果:
点击前
在这里插入图片描述
点击后:

六.运算符

1.算数运算符

减法 -
加法 +
乘法 *
除法 /
取余 %

let num1: number = 10
let num2: number = 2console.log('求和', num1 + num2) //12
console.log('求差', num1 - num2) //8
console.log('求积', num1 * num2) //20
console.log('求商', num1 / num2) //5
console.log('取余', num1 % num2) //0

2.赋值运算符

let num1: number = 10
let num2: number = 2console.log('求和', num1 += num2) //12
console.log('求差', num1 -=num2) //8
console.log('求积', num1 *= num2) //20
console.log('求商', num1/=num2) //5
console.log('取余', num1 %= num2) //0

3.一元运算符

常见的一元运算符: ++ 和 –
后置写法: 先赋值,再自增或自减
前置写法: 先自增或自减,再赋值

let num: number = 1
let res: number = num++
console.log('num',num)//2
console.log('res',res)//1let num2: number = 10
let res2: number =++num2
console.log('num2',num2)
console.log('res2',res2)

运行结果:
在这里插入图片描述

4.比较运算符

> >= < <= == !=
复合比较运算符,只要有一个符合条件,那就是返回true

let num: number = 10
let num1: number = 20console.log('', num > num1) //false
console.log('', num >= num1) //false
console.log('', num < num1) //true
console.log('', num <= num1) //true
console.log('', num == num1) //false
console.log('', num != num1) //true

5.逻辑运算符

&& 短路与

一假则假,从左开始去判断,如果第一个为假,那么直接终止,返回第一个值,如果全为真,返回最后一个值
|| 短路或
一真则真,从左开始判断如果第一个为真,直接终止判断,返回第一个值,如果全为假,返回最后一个值
! 非,取反
真变假,假变真

//短路与
let num: number = 10
let num1: number = 0
console.log('逻辑与', num && num1)//0
console.log('逻辑与', null && num1)//null
console.log('逻辑与', num && undefined)//undefined//短路或
console.log('逻辑或', num || num1)//10
console.log('逻辑或', null || num1)//0
console.log('逻辑或', num || undefined)//10
console.log('',null || NaN)// NaN

6.运算符优先级

在这里插入图片描述

七.美团点餐案例

@Entry
@Component
struct Index {
@State count:number = 1discount_price:number = 20.2//现价original_price:number = 40.4//原价build() {Column() {Column() {// 产品Row({ space: 10}){// 图片Image($r('app.media.product1')).width(100).borderRadius(8)// 文字Column({space: 10}) {Column({ space: 6}) {Text('冲销量1000ml缤纷八果水果捞').lineHeight(20).fontSize(14)Text('含1份折扣商品').fontSize(12).fontColor('#7f7f7f')}.width('100%').alignItems(HorizontalAlign.Start)Row(){// 价格Row({ space: 5}) {Text() {Span('￥').fontSize(14)Span('20.2').fontSize(18)}.fontColor('#ff4000')Text() {Span('￥')Span('40.4')}.fontSize(14).fontColor('#999').decoration({type: TextDecorationType.LineThrough, color: '#999'})}// 加减Row() {Text('-').width(22).height(22).border({width:1, color: '#e1e1e1', radius: {topLeft: 5, bottomLeft: 5}}).textAlign(TextAlign.Center).fontWeight(700).onClick(()=>{if(this.count>0)this.count--else{AlertDialog.show({message:'数量已经归零,不可以再减'})}})Text(this.count.toString()).height(22).border({width: { top:1, bottom: 1 }, color: '#e1e1e1'}).padding({left: 10, right: 10}).fontSize(14)Text('+').width(22).height(22).border({width:1, color: '#e1e1e1', radius: {topRight: 5, bottomRight: 5}}).textAlign(TextAlign.Center).fontWeight(700).onClick(()=>{this.count++})}}.width('100%').justifyContent(FlexAlign.SpaceBetween)}.height(75).layoutWeight(1).justifyContent(FlexAlign.SpaceBetween)}.width('100%').alignItems(VerticalAlign.Top).padding(20)// 结算Row({ space: 10 }){// 价格Column({space: 5}) {Text() {Span(`已选${this.count}件`).fontColor('#848484')Span('合计:')Span('￥').fontColor('#fd4104')Span((this.count*this.discount_price).toFixed(2)).fontColor('#fd4104').fontSize(16)}.fontSize(14)Text(`共减￥${(this.count*(this.original_price-this.discount_price)).toFixed(2)}`).fontColor('#fd4104').fontSize(12)}.alignItems(HorizontalAlign.End)// 结算按钮Button('结算外卖').width(110).height(40).backgroundColor('#fed70e').fontColor('#564200').fontSize(16).fontWeight(600)}.width('100%').height(70).backgroundColor('#fff').position({x:0, y: '100%'}).translate({y: '-100%'}).padding({ left: 20, right: 20 }).justifyContent(FlexAlign.End)}}.width('100%').height('100%').backgroundColor('#f3f3f3')}
}

八.数组的增删改查

查找数组名[下标]
修改: 数组名[下标] = 新值

//定义一个数组
let arr: string[] = ['悟空','八戒','牛魔王']
//查找(悟空)
console.log('name: ',arr[0])
//修改牛魔王
arr[2] = '沙僧'
console.log('names: ',arr)

运行结果:
在这里插入图片描述

增加元素
数组名.unshift(数据1,数据2,…) 在开头增加元素
数组名.push() 在结尾增加元素
顺序都是拼接的顺序

//向前添加
arr.unshift('唐僧','牛魔王')
console.log('unshift',arr)//向后添加 push
arr.push('红孩儿','犀牛怪')
console.log('push',arr)

运行结果;
在这里插入图片描述

//删除前面的元素-只删除一个arr.shift()
console.log('shift',arr)
//删除后面的元素
arr.pop()
console.log('pop',arr)
//任意位置删除或添加元素
arr.splice(0,2,'黑神话','如来')
console.log('splice',arr)