鸿蒙语法基础

掘进大王
610 阅读5分钟

ArkTS基本语法

1.基础入门

1.ArkTS的输出语句

写法：console.log(‘消息说明’,‘打印的信息’)

// console.log('消息说明', '打印的内容')
console.log('我说', 'Hello World')

image.png

2.认识和存储数据

2.1认识数据

常见的三种数据类型

  • string 字符串
  • number 数值型（包括浮点数）
  • boolean 布尔类型，真假判断（true，false）

2.2存储数据

2.2.1 变量

变量：专门用来存储数据的容器（可变）

// 1. 字符串 string
let title: string = '巨无霸汉堡'
console.log('字符串title', title)
// 2. 数字 number
let age: number = 18
console.log('年龄age', age)
// 3. 布尔 boolean，值 true真，false假
let isLogin: boolean = false
console.log('是否登录成功', isLogin)
// 变量存储的数据可以修改
age = 40
console.log('年龄age', age)

image.png

2.2.2 常量

常量：用来存储数据 （不可变）

写法：const 常量名: 类型 = 值

const PI: number = 3.14
console.log('圆周率', PI)
const companyName: string = '华为'
console.log('公司名称', companyName)

3.数组

数组：一个可以存储多个数据的容器

let 数组名: 类型[] = [数据1, 数据2,...]

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

注意：数组定义为什么类型就只能存该类型的数据

3.1获取数组元素

let names: string[] = ['小红', '小明', '大强']
console.log('数组names', names)
// 根据索引取数据
console.log('姓名：', names[0])

image.png

4.函数

函数: 可以被重复使用的代码块

console.log('五角星', '☆')
console.log('五角星', '☆☆')
console.log('五角星', '☆☆☆')
console.log('五角星', '☆☆☆☆')
console.log('五角星', '☆☆☆☆☆')

image.png 这是用普通的方式输出五角星，但是如果我想多次输出呢？或者当我想输出五角星再重新码一遍？

4.1函数的使用

定义函数

function 函数名() {
  函数体
}
函数名()

示例

// 1. 定义函数
function star() {
console.log('五角星', '☆')
console.log('五角星', '☆☆')
console.log('五角星', '☆☆☆')
console.log('五角星', '☆☆☆☆')
console.log('五角星', '☆☆☆☆☆')
}
// 2. 调用函数
star()
star()
star()
image.png

这就是函数神奇的地方，一次定义多次使用，任何时候只要需要用到相同的功能就可以通过简单的调用实现,显著的提高了代码的复用性。

注意: 函数只有先定义才能调用

4.2函数的参数

参数的作用：函数能够接收和处理外部的数据，提高函数的灵活性和通用性。

function sum(a: number, b: number) {
  let res: number = a + b
  console.log('加法结果是', res)
}
sum(1, 2)
sum(10, 20)
sum(100, 200)

通过为函数传入参数，函数就可同时处理复杂多变的数据了，进一步提高了代码的复用性。

参数的分类

  • 实参：真实数据（函数调用时候的传入的真实数据）
  • 形参：形式上的参数（函数定义时候写的参数）

4.3返回值

默认情况下，函数外部无法直接使用函数内部执行结果；如果想要在函数外部使用内部执行结果，需要将这个结果设置为函数的返回值。 关键字：return

function sum(a: number, b: number) {
  let res: number = a + b
  return res
}
let num: number = sum(5, 5)
console.log('num', num)

4.4可选参数

函数在定义的时候,设置了形参入口,但是在调用的时候并不是任何时候都需要传入实参数据,为了避免报错,我们可以将形参设置为可选参数, 或者给形参设置一个默认值

4.4.1可选参数形式
  • 语法: 形参名?:类型
function sayHi(msg?: string) {
  console.log('打招呼语', msg)
}

sayHi('你好')
sayHi()
4.4.2可选参数-默认值

在一些情况下,形参的数值不能为 undefined, 否则容易引起程序的崩溃, 比如求两个数据之和, 形参的数值就不能为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.5箭头函数

箭头函数是 比普通函数 更简洁 的一种函数写法

let 函数名 = (形参1: 类型, 形参2: 类型) => {
  // 函数体
  // 1. 计算过程
  // 2. 返回结果
  return 计算的结果
}
函数名(实参1, 实参2)

5.对象

作用：用于描述一个物体的特征和行为

对象：是一个可以存储多个数据的容器。

列如：人是一个对象，人这个对象有很多属性身高，年龄，体重等，并且人还有各种行为唱歌，跳舞......

5.1 对象的定义与使用

  1. 通过interface接口约定 对象结构类型
interface 接口名 {
  属性1: 类型1
  属性2: 类型2
  属性3: 类型3
}

interface Person {
  name: string
  age: number
  weight: number
}
  1. 定义对象并使用：对象名.属性名
// 1. 定义接口
interface Person {
  name: string
  age: number
  weight: number
}

// 2. 基于接口，定义对象
let ym: Person =  {
  name: '杨幂',
  age: 18,
  weight: 90
}

console.log('名字', ym.name)
console.log('年龄', ym.age)

let lss: Person =  {
  name: '刘诗诗',
  age: 19,
  weight: 88
}

console.log('名字', lss.name)
console.log('年龄', lss.age)

5.2对象方法

方法作用：描述对象的具体行为

  1. 约定方法类型
interface 接口名称 {
  方法名: (参数:类型) => 返回值类型
}

interface Person{
  dance: () => void
  sing: (song: string) => void
}
  1. 添加方法（箭头函数）
let ym: Person = {
  dance: () => {
    console.log('杨幂说', '我来跳个舞')
  },
  sing: (song: string) => {
    console.log('杨幂说', '我来唱首', song)
  }
}
// 对象名.方法名（参数）
ym.dance()
ym.sing('爱的供养')

6.联合类型

联合类型是一种灵活的数据类型，它修饰的变量可以存储不同类型的数据。

// let 变量: 类型1  |  类型2  |  类型3 = 值

let judge: number | string = 100

judge = 'A+'
judge = '优秀'

console.log('年终考试评价', judge)

// 联合类型可以将变量值约定在一组数据范围内进行选择
let gender: 'man' | 'woman' | 'secret' = 'secret'

7.枚举类型

定义枚举类型（常量列表）

enum 枚举名 {
  常量1 = 值,
  常量2 = 值,
  ......
}

示例代码

// 1. 定义枚举 （定义常量列表）
enum ThemeColor {
  Red = '#ff0f29',
  Orange = '#ff7100',
  Green = '#30b30e'
}

// 2. 给变量设定枚举类型
let color: ThemeColor = ThemeColor.Orange
console.log('color', color)
avatar
文章
阅读
粉丝