【ArkUI 练中学】第2课：ArkTS 基础语法

本节目标

· 掌握 ArkTS 中变量与常量的声明方式，理解 let 与 const 的区别
· 熟悉 ArkTS 的基本数据类型：number、string、boolean，以及数组类型
· 学会函数声明、可选参数、默认参数和箭头函数的用法
· 掌握 if / else if / else 条件渲染，理解状态变量驱动 UI 更新的机制
· 掌握 ForEach 循环渲染，能够基于数组动态生成列表 UI
· 通过习题巩固变量、函数、条件渲染与循环渲染的综合运用能力

一、变量与数据类型

1.1 变量声明

在 ArkTS 中，变量是用于存储数据值的标识符。可以直观地把变量类比为一个带标签的“盒子”——通过标签（变量名）快速找到对应的盒子，进而访问或修改其中的数据。

ArkTS 使用 let 声明变量，使用 const 声明常量：

letcount:number=0// 变量，可以重新赋值count=40// 合法constMAX_COUNT:number=100// 常量，只能赋值一次// MAX_COUNT = 200 // 编译错误

变量命名可以包含数字、字母、_、$，但不能以数字开头，也不能使用关键字（如 let、const）。如果声明时包含初始值，ArkTS 可以根据赋值自动推断类型，无需显式指定。

1.2 基本数据类型

ArkTS 的基本类型可以准确地表示单一的数据类型，常见的基本类型包括 number、string、boolean。

number 类型：任何整数和浮点数都可以被赋给此类型的变量。ArkTS 中不区分 int、float、double，统一使用 number。

letage:number=20letscore:number=95.5

string 类型：由一系列字符组成的序列。ArkTS 中字符串有三种书写方式：

leta:string='Hello'// 单引号letb:string="World"// 双引号letc:string=`Hello${name}`// 模板字符串，支持变量嵌入

boolean 类型：由 true 和 false 两个逻辑值组成。

letisActive:boolean=true

1.3 数组类型

数组用于表示由同类型元素组成的集合：

letfruits:string[]=['苹果','香蕉','橙子']letscores:number[]=[90,85,78]

数组是引用类型，修改数组引用会影响原始数据。

二、函数

2.1 函数声明

函数声明引入一个函数，包含其名称、参数列表、返回类型和函数体。每个参数都必须标记类型：

functionadd(x:string,y:string):string{letz:string=`${x}${y}`returnz}

如果能够推断出返回类型，可以省略返回类型，但不建议这么做。

2.2 可选参数与默认参数

可选参数使用 ? 标记，调用时可以省略该参数：

functionhello(name?:string){if(name==undefined){console.log('Hello!')}else{console.log(`Hello,${name}!`)}}

参数也可以设置默认值，省略时使用默认值作为实参：

functionmultiply(n:number,coeff:number=2):number{returnn*coeff}multiply(2)// 返回 4multiply(2,3)// 返回 6

2.3 箭头函数

箭头函数是定义函数的简洁方式，在事件回调和 ForEach 中广泛使用：

constgreet=(name:string):string=>{return`Hello,${name}`}

三、条件渲染

3.1 if / else if / else

ArkTS 提供了渲染控制能力，条件渲染可根据应用状态，使用 if、else 和 else if 渲染相应的 UI 内容。条件渲染必须在容器组件内使用，且每个分支的构建函数必须创建一个或多个组件。

@Entry@Componentstruct IfExample{@Statecount:number=0build(){Column(){Text(`count =${this.count}`)if(this.count>0){Text('count 是正数').fontColor(Color.Green)}elseif(this.count<0){Text('count 是负数').fontColor(Color.Red)}else{Text('count 是零')}Button('增加').onClick(()=>{this.count++})Button('减少').onClick(()=>{this.count--})}}}

3.2 状态驱动更新机制

当 if 或 else if 后跟随的状态判断中使用的状态变量值变化时，条件渲染语句会进行更新：

1. 评估 if 和 else if 的状态判断条件，如果分支没有变化，无需执行后续步骤
2. 如果分支有变化，移除此前构建的所有子组件
3. 执行新分支的构造函数，将生成的子组件添加到父容器中

关键理解：条件渲染使用的是状态变量（如 @State count）时，值改变会实时渲染 UI；如果使用的是常规变量，值改变则不会触发 UI 刷新。

四、循环渲染

4.1 ForEach 基本用法

ForEach 接口基于数组类型数据进行循环渲染，可基于数组数据快速生成结构相同、内容不同的子组件，适用于动态列表、批量数据展示等场景，需要与容器组件配合使用。

基本语法如下：

ForEach(arr:Array<any>,// 数据源itemGenerator:(item:any,index:number)=>void,// 组件生成函数keyGenerator?:(item:any,index:number)=>string// 键值生成函数（可选）)

itemGenerator 为数组中的每个数据项创建对应的组件，keyGenerator 为每个数据项生成唯一且稳定的键值，以提升渲染性能。

4.2 基础类型数组渲染

@Entry@Componentstruct ForEachExample{@Statefruits:string[]=['苹果','香蕉','橙子']build(){Column(){ForEach(this.fruits,(fruit:string,index:number)=>{Text(`${index+1}.${fruit}`).fontSize(20).margin({top:10})})}.width('100%').padding(20)}}

4.3 对象数组渲染

在实际开发中，数据源通常是对象数组，此时 keyGenerator 尤为重要：

interfaceGoods{id:numbername:stringprice:number}@Entry@Componentstruct GoodsList{@StategoodsList:Goods[]=[{id:1,name:'商品A',price:99},{id:2,name:'商品B',price:199},{id:3,name:'商品C',price:299}]build(){Column(){ForEach(this.goodsList,(goods:Goods)=>{Row(){Text(goods.name).fontSize(18)Text(`¥${goods.price}`).fontSize(18).fontColor(Color.Red)}.width('100%').justifyContent(FlexAlign.SpaceBetween).padding(15)},(goods:Goods)=>goods.id.toString())// 使用唯一 id 作为键值}}}

注意事项：ForEach 必须在容器组件内使用，且生成的子组件应当是允许包含在该容器组件中的子组件。例如，ListItem 组件要求 ForEach 的父容器组件必须为 List 组件。itemGenerator 函数不应改变任何组件状态。

五、多元化习题

习题 1（判断题）

题目：在 ArkTS 中，使用 const 声明的常量可以被重新赋值。

答案：错误

解读：const 声明的常量为只读类型，只能被赋值一次。对常量重新赋值会造成编译时错误。如果需要重新赋值，应使用 let。

习题 2（单选题）

题目：以下哪项是 ArkTS 中正确的变量声明语句？

A. int a = 10;
B. var a = 10;
C. let a: number = 10;
D. number a = 10;

答案：C

解读：ArkTS 使用 let 声明变量，并通过类型注释指定类型，格式为 let 变量名: 类型 = 值。选项 A 是 Java/C 的风格，ArkTS 中没有 int 类型，整数统一使用 number；选项 B 中 ArkTS 不支持 var 声明；选项 D 的语法顺序错误。

习题 3（多选题）

题目：关于 ArkTS 中 string 类型的书写方式，以下说法正确的有（多选）：

A. 单引号字符串：‘Hello’
B. 双引号字符串：“Hello”
C. 模板字符串：Hello ${name}
D. string 类型只能使用双引号

答案：A、B、C

解读：ArkTS 中字符串有三种常见书写方式：单引号、双引号以及模板字符串。模板字符串使用反向单引号括起来，支持换行和通过 ${变量} 语法嵌入变量，适合需要动态拼接的场景。选项 D 的说法不正确。

习题 4（代码填空题）

题目：请补全以下代码，实现一个函数，接收两个 number 参数，返回它们的乘积。

functionmultiply(a:number,b:number):number{// 在此处填写代码______________}console.log(multiply(3,4))// 预期输出：12

答案：return a * b

解读：函数声明需要指定参数类型和返回类型。multiply 函数接收两个 number 类型的参数，返回类型为 number，函数体中使用 return 返回两数相乘的结果。

习题 5（代码改错题）

题目：以下代码存在错误，请指出问题并修正。

@Entry@Componentstruct Test{@StateisLogin:boolean=falsebuild(){Column(){if(this.isLogin){Text('欢迎回来')}Button('登录').onClick(()=>{this.isLogin=true})}}}

答案：代码本身没有语法错误。if 条件渲染在容器组件 Column 内使用，分支中创建了 Text 组件，符合规则。当点击按钮后，isLogin 从 false 变为 true，if 条件更新为 true，框架会执行该分支的构造函数，创建 Text 组件并添加到 Column 中。

解读：这道题的目的是检验对条件渲染使用规则的理解。关键点在于：条件渲染必须在容器组件内使用；每个分支必须创建一个或多个组件；状态变量变化时框架会自动移除旧分支组件并添加新分支组件。

习题 6（简答题）

题目：简述 if 条件渲染中，当状态变量值发生变化时，ArkUI 框架的更新步骤。

答案：当 if 或 else if 后跟随的状态判断中使用的状态变量值变化时，框架会执行以下更新步骤：第一步，评估 if 和 else if 的状态判断条件，如果分支没有变化，无需执行后续步骤；第二步，如果分支有变化，移除此前构建的所有子组件；第三步，执行新分支的构造函数，将生成的子组件添加到 if 父容器中。如果缺少适用的 else 分支，则不创建任何内容。

解读：理解条件渲染的更新机制有助于写出更高效的 UI 代码。框架采用的是“移除旧分支组件、构建新分支组件”的策略，而不是简单地隐藏或显示组件。这也意味着，如果分支切换频繁且子组件结构复杂，可能会带来一定的性能开销。

六、本节知识点总结

变量与常量
使用 let 声明变量，const 声明常量；const 只能赋值一次。

基本数据类型
number 表示所有数字，string 支持单引号、双引号和模板字符串，boolean 表示 true / false。

数组类型
类型[] 语法声明同类型元素集合，属于引用类型。

函数声明
包含名称、参数列表、返回类型和函数体；支持可选参数（?）和默认参数。

箭头函数
简洁的函数定义方式，常用于事件回调和 ForEach。

条件渲染
使用 if / else if / else 在容器组件内根据状态渲染不同 UI；状态变量变化触发分支切换。

循环渲染
使用 ForEach 基于数组生成列表 UI，需要与容器组件配合；keyGenerator 用于指定唯一键值以优化渲染性能。

状态驱动核心
只有 @State 等装饰的状态变量变化才会触发 UI 刷新，常规变量变化不会触发渲染。

下节预告
第3课将深入讲解自定义组件的构建与复用，包括 @Component、@Builder、组件生命周期以及组件间通信的基本方式。