鸿蒙ArkUI布局与样式进阶（六）——ArkUI 支持的各种运算符和语法基础与数组操作-CSDN博客

🚀 鸿蒙开发入门必看！30 分钟掌握 ArkUI 界面开发

在上一篇文章《事件响应与状态管理》中，我们重点介绍了 ArkUI 中事件绑定与状态驱动 UI 的核心机制，包括 @State、@Prop、@Link 等状态装饰器的用法，以及 onClick、onTouch 等事件的处理方式。通过这些内容，我们了解了 ArkUI 是如何通过数据变化自动刷新界面，以及如何响应用户交互。

本文作为系列的第六篇，将在此基础上，系统梳理 ArkUI 开发的各种运算符和语法基础知识，并结合实战案例，帮助大家把上一篇学到的 “事件响应与状态管理” 真正落地到项目中。

🔄 为什么要学这一篇？

上一篇我们知道了：

如何通过 @State 定义响应式数据
如何通过事件处理器响应用户操作
如何实现 UI 的自动更新

但是，如果想真正开发一个完整的鸿蒙应用，我们还需要掌握：

ArkUI 支持的各种运算符和语法基础
数组的操作与数据处理
布局组件（Row/Column）的灵活运用
把状态管理和事件响应结合到实际功能中（点赞、购物车等）

因此，本文将从 基础语法 → 数组操作 → 布局组件 → 实战案例 逐步展开，让你不仅 “会用”，更能 “用好” ArkUI。

一、ArkUI 基础语法详解

1. 算术运算符

定义:算术运算符用于执行常见的数学运算，如加、减、乘、除、取余等。

常见算术运算符：

+ 加法
- 减法
* 乘法
/ 除法
% 取余（模运算）

代码示例：

let num1: number = 9;
let num2: number = 4;
console.log('加法计算:', num1 + num2); // 13
console.log('减法计算:', num1 - num2); // 5
console.log('乘法计算:', num1 * num2); // 36
console.log('除法计算:', num1 / num2); // 2.25
console.log('取余计算:', num1 % num2); // 1

个人理解

算术运算符是任何编程语言的基础，ArkUI 中由于支持 TypeScript，使用起来和 JavaScript 几乎一致。在实际开发中，常用于价格计算、数量统计、动态布局计算等场景。

2. 赋值运算符:

定义：赋值运算符用于将一个值赋给变量，也可以结合算术运算进行赋值。

常见赋值运算符

= 直接赋值
+= 加法赋值
-= 减法赋值
*= 乘法赋值
/= 除法赋值
%= 取余赋值

例子：

let num3: number = 1;
num3 += 1; // 等价于 num3 = num3 + 1
console.log('加号后的结果:', num3); // 2

个人理解：赋值运算符简化了代码写法，特别是在循环或事件处理中频繁修改变量值时非常方便。

3. 一元运算符:

定义：一元运算符只需要一个操作数，即可完成运算。常见的有自增 ++ 和自减 --。

前置与后置区别：

前置： ++num：先自增，再返回值
后置：num++：先返回值，再自增

let num4: number = 10;
let result1 = num4++; // result1=10, num4=11
let num5: number = 10;
let result2 = ++num5; // result2=11, num5=11

个人理解： ArkUI 组件的事件处理中，一元运算符常用于计数器、序号生成等场景，但要注意前置和后置的区别，避免出现逻辑错误。

4. 比较运算符:

定义比较运算符用于比较两个值，返回布尔值 true 或 false。

常见比较运算符

> 大于
< 小于
>= 大于等于
<= 小于等于
== 等于（不严格类型）
=== 严格等于（类型 + 值都相等）
!= 不等于
!== 严格不等于

代码示例：

console.log(9 > 4); // true
console.log(9 == '9'); // true
console.log(9 === '9'); // false

个人理解：在条件判断、循环控制中大量使用比较运算符。建议在 TypeScript 中尽量使用 === 和 !==，避免类型转换带来的意外结果。

5. 逻辑运算符:

定义：逻辑运算符用于组合多个条件，返回布尔值。

常见逻辑运算符