ArkTS语法基础

ArkTS语法基础

一、注释：

1. ​ 单行注释 //注释内容 ，ctrl+/
2. ​ 多行注释 /* 内容 */ ctrl+shift+/

二、输出语句

console.log('Hello Word')

三、基本数据类型

• number 数字
• string 字符串
• boolean 布尔(用于判断真(true),假(false)

3.1 命名规则

1. 只能包含数字、下划线、字母、$、不能以数字开头
2. 不能使用关键字，或保留字。如：let、const
3. 大小写严格区分

3.2 数据存储 -（变量&&常量）

3.2.1常量(不会改变的量)

语法：const(关键字) name(变量名自行定义有意义即可)：string(数据类型)=‘小明’

// const 变量名: 数据类型 = 值
const name:string='小明'
console.log('姓名：',name)

3.2.2 变量(会改变的量)

语法：let(关键字) age(变量名):number(数据类型)=18

// let 变量名: 数据类型 = 值
let age: number = 18
console.log('', age)
//console.log(age.toString()) //转成字符串输出
//console.log(age)//报错是因为console.log只输出字符串

3.3 数组

数组是一个用来存储多个数据的容器。

//语法
let 数组名: 类型[]=['数据1','数据2'...]
let names:string[]=['小红','小丽','小梅']

注意：数组中存储的数据必需跟你定义的类型一致，不然报错

3.3.1 获取数组中的元素

console.log('取出小红这个元素:',names[0])

注意：索引从0开始

3.3.2 查找&修改

• 查找 数组名[索引]
• 修改 数组名[索引]=[修改后的值]

let names: string[] = ['小红', '小明', '大强']

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

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

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

3.3.3 添加元素

开头添加：数组名.unshift(数据1,数据2…)

结尾(就是最后一个元素的后面)添加 : 数组名.push(数据1,数据2…)

let names: string[] = ['a', 'b', 'c']

// push()：结尾新增
names.push('i', 'g')

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

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

3.3.4 删除元素

开头删除：数组名.shift()

结尾删除：数组名.pop

let names: string[] = ['小红', '小明', '大强']

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

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

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

3.3.5 任意位置添加&删除元素

语法： 数组名.splic(起始位置，删除的个数，新增元素1，新增元素2…)

let names: string[] = ['小红', '小明', '大强']

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

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

四、函数 (function)

一段可以被重复利用的代码块

// 基本语法
function 函数名(){
   函数体
}
// 调用
 函数名()

// 完整写法
function 函数名(需要处理的数据,也叫形参){
//返回处理结果
     return 
}
let 变量名:类型 = 函数名 //实际要处理的数据,也叫实参

• 实参：函数被调用时传入的真实数据
• 形参：定义函数时写的假数据用来接收实参或者你也可以把它比作一个碗，实参就是饭，把饭装进碗里。

4.1 函数的可选参数与默认值

定义函数的时候，设置了形参，但在调用时，也可以不传实参，为了避免报错，可以给形参设置成可选或给一个默认值。

4.1.1 可选参数

语法：形参名？：类型

function sayHi(params?: string) {
  console.log('打招呼', params || 'hello')
}
//sayHi('你好')
sayHi()

4.1.2 默认值

在某种情况下，形参不能为空(undefined)，不然容易引起程序崩溃。比如两数求和

function sum(x: number = 0, y: number = 0) {
  let res: number = x + y
  return res
}
console.log('结果是', sum())
console.log('结果是', sum(1, 2))

4.2 箭头函数

函数的另一种写法，在某种情况下比普通函数更简洁。

语法

let 函数名 = (形参1：类型，形参2：类型)=>{
     return
}
函数名(实参1,实参2)

五、对象

可以存储多种数据类型的容器

作用：用于描述一个物体或（动物…）的行为与特征

5.1 对象的定义与使用

语法：let 对象名 = 值

通过interface接口来约束对象的结构类型

语法： interface 接口名{属性1：类型1，属性2：类型2}

//定义接口
interface Person{
  name:string
  age:number
}
//基于接口定义对象
let peop:Person={
  name:'卡拉肖克.潘',
  age:18
}
//调用
console.log('姓名：',peop.name,'年龄：',peop.age)

5.2 对象方法

描述对象的具体行为

5.3 约定方法类型

语法：interface 对象名{方法名：(参数：类型)=>返回值类型}

//约定方法类型
interface Per {
  kong: () => void
  bajian: (jian: string) => void
}
//添加方法
let pop: Per = {
  kong: () => {
    console.log('这里什么都没有发生')
  },
  bajian: (jian: string) => {
    console.log('卡拉肖克.潘拔出了他的', jian)
  }
}
//调用，对象名.方法名(参数)
pop.kong()
pop.bajian('剑')

5.4 定义对象数组

数组中的数据都有对应的索引，（索引是从0开始的）

• 访问某个对象，数组名[索引]进行访问
• 访问某一对象中的某一个属性，找到要访问的对象，使用数组名[索引].属性名进行访问

// 1. 定义接口
interface Person {
  stuId: number
  name: string
  gender: string
  age: number
}
// 2. 根据接口定义对象数组
let students: Person[] = [
  {stuId: 1, name: '小红', gender: '女', age: 18},
  {stuId: 2, name: '小明', gender: '男', age: 19},
  {stuId: 3, name: '大强', gender: '男', age: 18}
]

5.4.1 使用对象数组

let students: Person[] = [
  {stuId: 1, name: '小红', gender: '女', age: 18},
  {stuId: 2, name: '小明', gender: '男', age: 19},
  {stuId: 3, name: '大强', gender: '男', age: 18}
]
console.log(JSON.stringify(students))//输出数组中所有的数据 

5.5 Math 对象

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法, Math 用于 Number 类型数据的处理.

对象方法	是否需要参数	说明
Math.random()	否	获取随机数，范围[0,1)之间的随机小数，左闭右开可取到0，取不到1，反之
Math.ceil()	是	需要一个数字形参数，向上取整
Math.floor()	是	需要一个数字形参数，向下取整

// 1. 随机数
console.log('Math对象', Math.random())  // 0-1 之间的随机小数

// 2. 向上取整
console.log('Math对象', Math.ceil(1.1))  // 2
console.log('Math对象', Math.ceil(1.9))  // 2

// 3. 向下取整
console.log('Math对象', Math.floor(1.1))  // 1
console.log('Math对象', Math.floor(1.9))  // 1

六、联合类型

联合类型可以存放多种类型的数据

语法：let 变量名 : 类型1 | 类型2 | 类型3 = 值

// let 变量: 类型1  |  类型2  |  类型3 = 值
let judge: number | string = 100
judge=100
judge = 'A+'
judge = '优秀'
console.log('年终考试评价', judge)
// 联合类型可以将变量值约定在一组数据范围内进行选择
let gender: 'man' | 'woman' | 'secret' = 'secret'

七、枚举类型

将数据约束在一个范围内，供选择。

语法：enum 变量名{常量=值,…}

// 1. 定义枚举 （定义常量列表）
enum ThemeColor {
  Red = '#ff0f29',
  Orange = '#ff7100',
  Green = '#30b30e'
}
// 2. 给变量设定枚举类型
let color: ThemeColor = ThemeColor.Orange
console.log('color', color)

注意：枚举比联合使用起来更方便一些

八、数据处理

8.1 字符串拼接

用＋把字符串跟变量拼在一起

let name: string = '小明'

// 学生信息：名字是小明
console.log('学生信息：', '名字是' + name)

// console.log 可以只写一个参数：需要输出的信息
console.log('名字是' + name)

let age: number = 18

// 我的名字是小名，年龄18
console.log('我的名字是' + name, '年龄' + age)

8.2 模板字符串

用法同上

语法：字符串${变量}

let name: string = '小明'
let age:number = 18
// 我的名字是小名，今年18岁了
console.log(`我的名字是${name}，今年${age}岁了`)

8.3 类型转换

8.3.1 字符串转数字

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

8.3.2 数字转字符串

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

九、状态管理

想要动态页面就需要用到我们的@State 用于声明一个状态变量

变量必须被装饰器装饰才可以成为状态变量，状态变量的改变会引起UI的渲染刷新。

• View(UI)：UI渲染

• State: 通过触发组件的事件方法，改变状态引起UI（界面）更新重新渲染。

• 常规变量：没有被状态装饰器装饰的变量，通常应用于辅助计算。它的改变永远不会引起UI的刷新。

  // 常规变量：不会引起UI更新
  let name: string = '小明'
  
  @Entry
  @Component
  struct Index {
    // 状态：变量值改变会引起UI更新
    @State
    hi: string = 'hello'
  
    build() {
      Column(){
        Text(name)
  
        // 通过 this 找到对应的状态
        Text(this.hi)
      }
    }
  }
  

  注意：状态变量必须设置类型，必须设置初始值

  

十、点击事件

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

语法：.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 = '你好'
        })
    }
  }
}

十一、运算符

11.1 算术运算符

运算符	说明
+	求和
-	求差
*	求积
/	求商
%	取余或求模(是否被整除)

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

11.2 赋值运算符

对变量进行赋值，就是把右边的值给左边

运算符	描述
+=	加法赋值
-=	减法赋值
*=	乘法赋值
/=	除法赋值
%=	取余赋值

十二、一元运算符

常见的有：++和–

• 后置写法：先赋值再自增/自减

• 前置写法：先自增/自减再赋值

12.1 比较运算符

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

运算符	描述
>	大于
>=	大于等于
<	小于
<=	小于等于
==	等于 = 是赋值，=== 这是判断两个数据的类型和值是否相等
!= （别写成中文的!）	不等于

12.2 逻辑运算符

作用：增加判断条件

运算符	描述
&&	与（并且），都真才真
||	或，一真则真
！	非，取反，true，取反就是false,反之

注意： 数字类型0和字符串类型 ‘’ 本身就是false(假)

12.3 逻辑中断 （短路运算）

若某个表达式的值可以被确定，将终止运算并返回那个被确定的值，这个值通常为假（false）

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

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

12.4 运算符优先级

优先级	顺序
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

十三、分支与循环语句

13.1 if 单分支

if (也叫条件判断语句),常用于逻辑判断，条件成立则向下执行代码，反之

语法：

if(需要判断的条件){
条件成立执行的代码
}

注意：判断条件返回的结果只能是Boolean类型！！！

let money:number = 10000

// if小括号中的条件为true就执行打印
// 工资大于等于10000，则打印“去上班”
if(money>=10000) {
  console.log('去上班')
}

13.2 if 双分支

/*
语法：
if (条件) {
  条件成立执行的代码
} else {
  条件不成立执行的代码
}
*/

let money:number = 10000

// 工资大于等于10000，则打印去上班
if(money>=10000) {  //if就相当于如果，如果工资大于1万就去上班否则在家睡觉
  console.log('去上班')
}
else{  
  // 否则就打印在家睡觉
  console.log('在家睡觉')
}

13.3 多分支

let score = 66

if (score >= 90) {
  console.log('优秀')
} else if (score >= 70) {
  console.log('良好')
} else if (score >= 60) {
  console.log('及格')
} else {
  console.log('不及格')
}

13.4 switch

用于精确匹配一个条件

/*
语法：
  switch(表达式->结果) {
   case '要比对的常量':
     执行一段代码
     break
    case '要比对的常量':
     执行一段代码
      break
 default:
   执行一段代码
  }
*/
let fruit: string = '橘子'

switch (fruit) {
  case '苹果':
    console.log('苹果5元/斤')
    break
  case '橘子':
    console.log('橘子3元/斤')
    break
  default:
    console.log('不好意思，您查询的水果已售罄')
}

注意：别忘记写break，没写代码就会根据你的匹配从上往下正常执行

13.5 条件表达式（三元运算符&&三元表达式）

语法：条件？成立(true)：不成立(false)

let num1 = 100
let num2 = 20

let res = num1 > num2 && num1 < 101 ? num1 : num2
//let res = num1 > num2? num1 : num2 两种写法结果一样
console.log('最大的数是：', res)

扩展：三元运算可以使用 （&& 、||、！）等，来计算多个条件一起的结果

13.5.1 条件渲染

根据应用不同状态，使用if else if else，来渲染对应状态的UI内容

@Entry
@Component
struct Index {
  //状态变量
  @State
  counter: number = 1

  build() {
    Column() {
      if (this.counter == 1) {
        Text('你')
      } else if (this.counter == 2) {
        Text('好')
      } else {
        Text('我是丁真')
      }
      // 单击按钮，切换显示 Text
      Button('更新UI界面')
        .onClick(() => {
          this.counter++
        })
    }
  }
}

13.6 循环语句

13.6.1 while循环

重复执行一段代码

循环三要素

• 初始值（变量）
• 循环条件
• 变化量（自增或自减）

/*
while (true) { //死循环，因为条件为真所以会一起执行下去
  console.log('while', '重复执行的代码')
}
*/

// 指定循环次数
let i: number = 1
while (i < 5) {
  console.log('while~i', '重复执行的代码')
  i++
}

13.6.2 For循环

重复执行一段代码

/**语法
for (初始值; 条件; 变化量) {
  重复执行的代码
}
**/
for (let i = 0; i < 5; i++) {
  console.log('for', '被执行了5次')
}

13.7 遍历数组 for…of

作用：把数组中的每个数据，按顺序都访问一次。

语法：for （let 变量名 of 数组名）{}

let names: string[] = ['小红', '小明', '大强']

for (const item of names) {
  console.log('数组里有', item,'等数据')
}

注意：索引是从0开始！！！（索引也叫下标）

13.8 退出循环

满足指定条件就退出循环

• break 终止循环，跳出整个循环
  le=“color:red”>初始值（变量）
• 循环条件
• 变化量（自增或自减）

/*
while (true) { //死循环，因为条件为真所以会一起执行下去
  console.log('while', '重复执行的代码')
}
*/

// 指定循环次数
let i: number = 1
while (i < 5) {
  console.log('while~i', '重复执行的代码')
  i++
}

13.6.2 For循环

重复执行一段代码

/**语法
for (初始值; 条件; 变化量) {
  重复执行的代码
}
**/
for (let i = 0; i < 5; i++) {
  console.log('for', '被执行了5次')
}

13.7 遍历数组 for…of

作用：把数组中的每个数据，按顺序都访问一次。

语法：for （let 变量名 of 数组名）{}

let names: string[] = ['小红', '小明', '大强']

for (const item of names) {
  console.log('数组里有', item,'等数据')
}

注意：索引是从0开始！！！（索引也叫下标）

13.8 退出循环

满足指定条件就退出循环

• break 终止循环，跳出整个循环
• 退出这次的循环，继续下一次循环