前言

ArkTS是一种为构建高性能应用而设计的编程语言。ArkTS在继承TypeScript语法的基础上进行了优化，以提供更高的性能和开发效率。

在UI开发框架中，ArkTS主要扩展了如下能力：

  • 基本语法：ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力，再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。
  • 状态管理：ArkTS提供了多维度的状态管理机制。。在UI开发框架中，与UI相关联的数据可以在组件内使用，也可以在不同组件层级间传递，比如父子组件之间、爷孙组件之间，还可以在应用全局范围内传递或跨设备传递。另外，从数据的传递形式来看，可分为只读的单向传递和可变更的双向传递。开发者可以灵活地利用这些能力来实现数据和UI的联动。
  • 渲染控制：ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据，并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据，并在每次迭代过程中创建相应的组件。

ArkTS通过声明引入变量、常量、函数和类型。

1. 处理数据

 字符串拼接

作用：拼接字符串和变量

let name: string = '小明'
let age: number = 18

// 拼接
console.log('简介信息', '学生姓名是' + name)
console.log('简介信息', '学生姓名是' + name, '年龄是' + age + '岁了')


@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('姓名是' + name)
    }
  }
}

模板字符串 

作用：拼接字符串和变量

写法： `${ 变量 }`

let name: string = '小明'
let age: number = 18

// 模板字符串 `${变量或表达式}`
// 我的名字是xx，今年xx岁了
console.log('简介信息', `我的名字是${ name }，今年${ age }岁了`)

// log支持输出字符串类型数据；数据是字符串类型时可省略第一个参数
console.log(`我的名字是${ name }，今年${ age }岁了`


@Entry
@Component
struct Index {
  build() {
    Column() {
      Text(`学生信息：姓名是${name}，今年${age}岁了`)
    }
  }
}

类型转换 

字符串转数字

  • Number()：将字符串类型数据转换为数字型，转换失败返回NaN（字符串中包含非数字）

let str1: string = '1.1'
let str2: string = '1.9'
let str3: string = '1.1a'

console.log('数字是', Number(str1))  // 1.1
console.log('数字是', Number(str2))  // 1.9
console.log('数字是', Number(str3))  // NaN

  • parseInt()：去掉小数部分将字符串类型转为数字型，转换失败返回NaN

 如果是数字开头的字符串，只保留开头数字

let str1: string = '1.1'
let str2: string = '1.9'
let str3: string = '1.1a'

console.log('数字是', parseInt(str1))  // 1
console.log('数字是', parseInt(str2))  // 1
console.log('数字是', parseInt(str3))  // 1

  • parseFloat()：保留小数部分将字符串类型转为数字型，转换失败返回NaN

 如果是数字开头的字符串，只保留开头数字

let str1: string = '1.1'
let str2: string = '1.9'
let str3: string = '1.1a'

console.log('数字是', parseFloat(str1))  // 1.1
console.log('数字是', parseFloat(str2))  // 1.9
console.log('数字是', parseFloat(str3))  // 1.1

 数字转字符串 

  • toString()
let num1: number = 1.1
let num2: number = 1.9

console.log('字符串是', num1.toString())
console.log('字符串是', num2.toString())
  • toFixed(数字)：保留指定的小数位数（四舍五入）
let num1: number = 1.1
let num2: number = 1.9

console.log('字符串是', num1.toFixed())  // 1
console.log('字符串是', num2.toFixed(2))  // 1.90

状态管理

 在前文的描述中，我们构建的页面多为静态界面。如果希望构建一个动态的、有交互的界面，就需要引入“状态”的概念。

上面的示例中，用户与应用程序的交互触发了文本状态变更，状态变更引起了UI渲染，UI从“Hello World”变更为“Hello ArkUI”。

组件拥有变量，变量必须被装饰器装饰才可以成为状态变量，状态变量的改变会引起UI的渲染刷新。如果不使用状态变量，UI只能在初始化时渲染，后续将不会再刷新。

  • View(UI)：UI渲染
  • State：状态，指驱动UI更新的数据。用户通过触发组件的事件方法，改变状态数据。状态数据的改变，引起UI的重新渲染
  • 注意：状态数据的改变，引起UI的重新渲染

基本概念

  • 状态变量：被状态装饰器装饰的变量，状态变量值的改变会引起UI的渲染更新。示例：@State num: number = 1,其中，@State是状态装饰器，num是状态变量。
  • 常规变量：没有被状态装饰器装饰的变量，通常应用于辅助计算。它的改变永远不会引起UI的刷新。
// 常规变量：不会引起UI更新
let name: string = '小明'

@Entry
@Component
struct Index {
  // 状态：变量值改变会引起UI更新
  @State
  hi: string = 'hello'

  build() {
    Column(){
      Text(name)

      // 通过 this 找到对应的状态
      Text(this.hi)
    }
  }
}

注意：

  1. 状态变量必须设置类型
  2. 状态变量必须设置初始值

 

2. 点击事件

作用：组件被点击时触发的事件

语法：onClick( (参数) => {} )

// 常规变量：不会引起UI更新
let name: string = '小明'

@Entry
@Component
struct Index {
  // 状态：变量值改变会引起UI更新
  @State
  hi: string = 'hello'

  build() {
    Column(){
      Text(name)
        .onClick(() => {
          name = '大强'
          console.log('名字是', name)
        })

      // UI 更新
      Text(this.hi)
        .onClick(() => {
          this.hi = '你好'
        })
    }
  }
}

 3. 运算符

表达式和运算符https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators

数字是用来计算的，比如：乘法 * 、除法 / 、加法 + 、减法 - 等等，所以经常和算术运算符一起。

算数运算符

算术运算符：也叫数学运算符，主要包括加、减、乘、除、取余（求模）等

运算符

描述

+

加，求和

-

减，求差

*

乘，求积

/

除，求商

%

取余（是否被整除）

 

let num1: number = 9
let num2: number = 4

console.log('加法计算', num1 + num2)
console.log('减法计算', num1 - num2)
console.log('乘法计算', num1 * num2)
console.log('除法计算', num1 / num2)  // 2.25
console.log('取余计算', num1 % num2)  // 1

 赋值运算符 

赋值运算符：对变量进行赋值的运算符

将等号右边的值赋予给左边, 要求左边必须是一个容器

运算符

描述

+=

加法赋值

-=

减法赋值

*=

乘法赋值

/=

除法赋值

%=

取余赋值

 
let num1: number = 1

num1 += 1

console.log('加等后的结果', num1)

 一元运算符 

 

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

  • 后置写法：先赋值再自增/自减
  • 前置写法：先自增/自减再赋值
let num1: number = 1
// num1++   ++num1
// 后置自增：先赋值再自增
// let res1: number = num1++
// console.log('res1是', res1)  // 1
// console.log('num1是', num1)  // 2

// 前置自增：先自增再赋值
let res2: number = ++num1
console.log('res2是', res2)  // 2
console.log('num1是', num1)  // 2

比较运算符 

作用：用来判断条件，比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）

运算符

描述

>

判断大于

>=

判断大于等于

<

判断小于

<=

判断小于等于

==

判断相等

!=

判断不相等

 
let num1: number = 9
let num2: number = 5

console.log('比较运算的结果是', num1 > num2)
console.log('比较运算的结果是', num1 >= num2)
console.log('比较运算的结果是', num1 == num2)
console.log('比较运算的结果是', num1 != num2)

逻辑运算符 

作用：扩充判断条件

运算符

描述

&&

与，都真才真

||

或，一真则真

!

非，取反

 
let num1: number = 9
let num2: number = 5
let num3: number = 3

console.log('逻辑运算符的结果是', num1 > num2 && num2 > num3)
console.log('逻辑运算符的结果是', num1 > num2 && num2 < num3)
console.log('逻辑运算符的结果是', num1 > num2 || num2 < num3)
console.log('逻辑运算符的结果是', !true)

逻辑中断 

链接https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_precedence#%E5%88%86%E7%BB%84%E5%92%8C%E7%9F%AD%E8%B7%AF%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

逻辑中断，也被称为短路运算，主要应用于逻辑运算符（如`&&`、`||`）的操作过程中。它的原理是在进行表达式计算的过程中，一旦发现某个表达式的值可以被确定（通常是该表达式的值为假），那么就会立即终止对该表达式的进一步计算，并将这个确定的假值返回出来，而不是等待所有表达式的计算完成后才能得出最终结果。

  • &&：都真才真
    • 从左向右计算结果，第一个操作数结果为假，则终止进一步计算，直接返回假（false）
    • 从左向右计算结果，所有操作数结果均为真，则返回最后一个操作数的值
  • ||：一真则真
    • 从左向右计算结果，第一个操作数结果为真，则终止进一步计算，直接返回真（true）
    • 从左向右计算结果，所有操作数结果均为假，则返回最后一个操作数的值
let num1: number = 9
let num2: number = 5
let num3: number = 0

console.log('逻辑中断&&', num1 && num3)  // 0
console.log('逻辑中断&&', num1 || num2)  // 9

 运算符优先级 

链接https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Operator_precedence

优先级

顺序

1

( )

2

++、--、！

3

先 *、/、% 后 +、-

4

>、>=、<、<=

5

==、！=

6

先 && 后 ||

7

=

 
let num1: number = 2

console.log('运算符优先级', num1 + 2 * 3)  // 8
console.log('运算符优先级', (num1 + 2) * 3)  // 12
console.log('运算符优先级', num1 * 3 > 4 == false)  // false
console.log('运算符优先级', --num1 * 3 > 4 == false)  // true

4. 数组的操作 

链接https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

数组的操作,主要针对的是对数组中的数据 进行查找、修改、增加 或者是删除. 

操作

语法

查找

数组名[下标]

修改

数组名[下标] = 新值

增加

数组名.push(数据1, 数据2, ...)、 数组名.unshift(数据1, 数据2, ...)

删除

数组名.pop()、数组名.shift()

任意位置增加或删除

数组名.splice(操作的起始位置, 删除的个数, 新增1, 新增2, ......)

查找&修改

  • 查找: 数组名[下标]
  • 修改: 数组名[下标] = 新值
let names: string[] = ['小红', '小明', '大强']

// 1. 查找
console.log('查找姓名', names[0])

// 2. 长度
console.log('数组长度为', names.length)

// 3. 修改
names[1] = 'Jack'
console.log('names数组', names)

增加数组元素 

链接https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

  • 开头添加:
    • 语法: 数组名.unshift(数据1, 数据2, 数据3, ......)
    • 返回值: (返回值指的是操作后的结果) 增加数据之后的元素个数,即数组的新长度
    • 是否修改原数组: 是
  • 结尾添加:
    • 语法: 数组名.push(数据1, 数据2, 数据3, ......)
    • 返回值: 增加数据之后的元素个数,即数组的新长度
    • 是否修改原数组: 是
let names: string[] = ['小红', '小明', '大强']

// push()：结尾新增
names.push('lily', '大壮')

// unshift()： 开头新增
names.unshift('Jack')

console.log('数组names', names)

删除数组元素 

链接https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift

  • 开头删除:
    • 语法: 数组名.shift()
    • 返回值: 删除的数据
    • 是否修改原数组: 是
  • 结尾删除:
    • 语法: 数组名.pop()
    • 返回值: 删除的数据
    • 是否修改原数组: 是
let names: string[] = ['小红', '小明', '大强']

// pop(): 结尾删除
names.pop()

// shift(): 开头删除
names.shift()

console.log('数组names', names)

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

链接https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

  • 语法: 数组名.splice(起始位置, 删除的个数, 新增元素1, 新增元素2, ......)
    • 注意: 如果不写该参数,代表从开始的位置起,删除往后所有的元素
  • 返回值: 删除的元素组成的新数组
  • 是否修改原数组: 是
let names: string[] = ['小红', '小明', '大强']

names.splice(1, 1, 'jack')

console.log('数组names', names)

 

# harmonyos # 华为
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

第102篇 | HarmonyOS 系列质量复盘：文章如何变成可维护知识库

avatar HarmonyOS开发者社区
cover

HarmonyOS AI开发提效工具：DevEco Code & DevEco CLI - 初识与配置指南

avatar HarmonyOS开发者社区
cover

HarmonyOS 7正式开启开发者Beta测试，Agentic架构引领操作系统新赛道

avatar HarmonyOS开发者社区