六、ArkTS-数据-数据_运算符_数组原创

亚鲁鲁666

发布于 2024-12-10 22:01

浏览

1收藏

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字符串转数字

**Number(): **字符串转接转数字, 转换失败返回NaN ( 字符串中包含非数字转换失败)
parseInt(): 去掉小数部分转数字, 转换失败返回NaN( 可以转换以数字开头的包含非数字的字符串，参数只能是字符串类型)
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数字转字符串

toString(): 数字直接转字符串
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状态管理

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

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

状态管理

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

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

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

注意: 定义在组件内的普通变量或状态变量, 都需要通过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算术运算符

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

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

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赋值运算符

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

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

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

3.3一元运算符

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

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

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

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)
    }
  }

计算步骤详解

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

3.4比较运算符

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

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

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类型等等（好像是任何一个数据类型都可以是逻辑运算符的返回值），逻辑中断的返回值也可以是不仅仅是布尔型，还可以是其它类型

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

单个 ! 是对内容取反

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运算符优先级

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

4.数组操作

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

4.1 查找&修改

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

查找:

通过数组下标直接查询
通过查找数组长度, names.length查找

4.2 增加数组元素

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

4.3 删除数组元素

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

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 任意位置添加/删除数组元素

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

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总结

六、ArkTS-数据-数据_运算符_数组-鸿蒙开发者社区

分类

标签

已于2024-12-12 22:56:39修改

51CTO

51CTO博客

51CTO学堂

六、ArkTS-数据-数据_运算符_数组原创

1.处理数据

1.1字符串拼接

1.1.1 + 可用来拼接

1.1.2可用模板字符串 `hello`

1.3类型转换

1.3.1字符串转数字

1.3.2数字转字符串

1.4@State状态管理

1.5基本概念

2.点击事件

3.运算符

3.1算术运算符

3.2赋值运算符

3.3一元运算符

3.4比较运算符

3.5逻辑运算符✅

3.6逻辑中断

3.7运算符优先级

4.数组操作

4.1 查找&修改

4.2 增加数组元素

4.3 删除数组元素

4.4数组的增删改查代码

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

4.5总结

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

六、ArkTS-数据-数据_运算符_数组 原创

1.处理数据

1.1字符串拼接

1.1.1 + 可用来拼接

1.1.2可用模板字符串 ​​hello​​

1.3类型转换

1.3.1字符串转数字

1.3.2数字转字符串

1.4@State状态管理

1.5基本概念

2.点击事件

3.运算符

3.1算术运算符

3.2赋值运算符

3.3一元运算符

3.4比较运算符

3.5逻辑运算符✅

3.6逻辑中断

3.7运算符优先级

4.数组操作

4.1 查找&修改

4.2 增加数组元素

4.3 删除数组元素

4.4数组的增删改查代码

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

4.5总结

目录

订阅鸿蒙技术特刊，精选内容抢先看

六、ArkTS-数据-数据_运算符_数组原创

1.1.2可用模板字符串 `hello`