目录
一.变量的存储
// 1.变量的存储与修改
//变量存储
let title:string ='巨无霸汉堡'
console.log("字符串title",title);
let age:number=18
console.log("数字类型age",age);
let isLogin:boolean=false
console.log("布尔类型",isLogin);
// 2.变量的修改
age=40
console.log("age修改",age);
// 3.常量,定义后不能被修改
const PI:number=3.1415926
const companyName:string='华为'
console.log('常量',PI,companyName);
// 4.命名规则
// 只能包含数字、字母、下划线、$。不能以数字开头
// ② 不能使用内置关键字或保留字 (比如 let、const)
// ③ 严格区分大小写
二、定义数组
// 语法:
// let 数组名: 类型[] = [数据1, 数据2, 数据3, ... ]
// 数组中存储的每个数据,都有自己的编号,编号从0开始(索引)
let names:string[]=['数组1','数组2','数组3']
console.log("打印数组",names);
console.log("打印数组成员",names[0],names[2])
三、函数
普通函数
// 用一个函数,来实现下面的需求,
// 传入 价格 和 数量,返回 计算的结果
// 1. 苹果 2元/斤, 买了3斤,多少钱?
// 2. 香蕉 4元/斤, 买了4斤,多少钱?
function buy(price:number,num:number ) {
console.log('传入参数',price,num)
// 1.处理数据
let result:number=price*num
return result
}
let apple:number =buy(2,3)
console.log("苹果",apple)
箭头函数
// 用箭头函数,完成计算
// 传入 价格 和 数量,返回 计算的结果
// 1. 苹果 2元/斤, 买了3斤,多少钱?
let buy=(price:number,weight:number)=>{
return price*weight
}
console.log("苹果",buy(2,3))
四、对象
对象属性
// 1、定义接口
interface Person {
name: string,
age: number,
weight: number,
}
// 2、基于接口,定义对象
let xm: Person = {
name: "小明",
age: 18,
weight: 100,
}
// 3.获取对象属性值 对象名,属性名
console.log('姓名',xm.name)
对象方法
// 需求:定义一个对象
// 特征:姓名:小明 年纪:18 体重:100
// 行为:唱歌、跳舞
// 1、定义接口
interface Person {
name: string,
age: number,
weight: number,
// 定义方法类型
sing:(song:string)=>void,
dance:()=>void
}
// 2、基于接口,定义对象
let xm: Person = {
name: "小明",
age: 18,
weight: 100,
// 定义方法
sing:(song:string)=>{
console.log("歌名",song)
},
dance:()=>{
console.log("跳舞")
}
}
// 3.调用对象方法
xm.sing("及你太美")
xm.dance()
五、联合类型
// 需求:定义一个变量,存放【年终考试评价】
// 考试评价:可能是具体的分数,也可能是A、B、C、D等级
let judge: number | string = 100
judge = 'A+'
judge = '优秀'
judge = '不错,继续努力'
console.log('年终考试评价', judge)
// 联合类型还可以将变量值,约定在一组数据范围内进行选择
// 性别:男 女 保密
let gender: 'man' | 'woman' | 'secret' = 'secret'
六、定义枚举
// 1. 定义枚举 (定义常量列表)
enum ThemeColor {
Red = '#ff0f29',
Orange = '#ff7100',
Green = '#30b30e'
}
// 2. 给变量设定枚举类型
let color: ThemeColor = ThemeColor.Orange
console.log('color', color)
七、转数字类型
let money: string = '10000'
let money2: number = 500
// + 的两端, 只要有字符串, 就是拼接
// 需要是计算, 必须都是数字 => 将字符串类型, 转成数字
// console.log('总工资', Number(money) + money2)
let str1: string = '1.1'
let str2: string = '1.9'
let str3: string = '1.99a'
let str4: string = 'a'
// 转数字类型
// 1. Number(变量) 原样转数字
console.log('Number', Number(str1)) // 1.1
console.log('Number', Number(str2)) // 1.9
console.log('Number', Number(str3)) // NaN
console.log('Number', Number(str4)) // NaN
// 2. parseInt(变量) 去掉小数部分(取整)
console.log('parseInt', parseInt(str1)) // 1
console.log('parseInt', parseInt(str2)) // 1
console.log('parseInt', parseInt(str3)) // 1
console.log('parseInt', parseInt(str4)) // NaN
// 3. parseFloat(变量) 保留小数部分
console.log('parseFloat', parseFloat(str1)) // 1.1
console.log('parseFloat', parseFloat(str2)) // 1.9
console.log('parseFloat', parseFloat(str3)) // 1.99
console.log('parseFloat', parseFloat(str4)) // NaN
八、转字符串
// 数字通常用于计算, 字符串通常用于展示
let money: number = 10000
// 将数字转字符串, toString() toFixed()
// 1. 数据.toString() 原样转字符串
console.log('toString:', money.toString())
// 2. 数据.toFixed(保留几位小数) 四舍五入
console.log('toFixed:', money.toFixed())
console.log('toFixed:', money.toFixed(2))
九、赋值运算符
// 算数运算符 + - * / %
console.log('计算结果', 1 + 1)
console.log('计算结果', 2 - 1)
console.log('计算结果', 3 * 5)
console.log('计算结果', 9 / 3)
console.log('取余', 9 % 2) // 4余1
console.log('取余', 9 % 5) // 1余4
// 赋值运算符 =
// += -= *= /= %= (本质就是一个简写, 对变量本身进行计算, 计算完再赋值回来)
// let num: number = 200
// num *= 2 // num = num * 2
// console.log('num', num)
let num2: number = 199
num2 %= 100 // num2 = num2 % 100
console.log('num2', num2)
十、一元运算符
// 一元运算符(++ --)
// ++ 作用: 让变量,在原本基础之上加1
let num: number = 10
// num++ // 先赋值,后自增
// ++num // 先自增,后赋值
console.log('num', num)
let num1: number = 10
let res1: number = num1++
console.log('res1', res1) // 10
console.log('num1', num1) // 11
let num2: number = 10
let res2: number = ++num2
console.log('res2', res2) // 11
console.log('num2', num2) // 11
//
let num3: number = 10
let res3: number = --num3
console.log('res3', res3) // 9
console.log('num3', num3) // 9
十一、比较运算符
// 比较运算符 > < >= <= == !=
let num1: number = 11
let num2: number = 11
console.log('判断结果', num1 > num2) // false
console.log('判断结果', num1 < num2) // false
console.log('判断结果', num1 >= num2) // true
// == != 判断是否相等(判断数字, 也会用来判断字符串)
let num11: number = 200
let num21: number = 201
console.log('判断结果', num11 == num21)//false
// 判断密码是否正确
let password: string = '123456'
let password2: string = '123456'
console.log('判断结果', password == password2)//true
十二、逻辑运算符
// 逻辑运算符
// 1. && (全真则真) 都得满足
// console.log('结果1', 3 > 5 && 5 < 9) // false
// console.log('结果2', 5 > 2 && 5 < 9) // true
// 2. || (一真则真) 只要有一个满足即可
// console.log('结果1', 3 > 5 || 5 < 9) // true
// console.log('结果2', 5 > 2 || 5 < 9) // true
// console.log('结果3', 5 > 20 || 5 < 1) // false
// 3. ! 取反
// console.log('结果', !true)
十三、运算符的优先级
// 运算符的优先级
// 1. 小括号
// 2. 一元 ++ -- !
// 3. 算数 * / % + -
// 4. 比较 > < >= <= , == !=
// 5. 逻辑 && ||
// 6. 赋值 =
console.log('运算符优先级', 2 + 2 * 3) // 8
console.log('运算符优先级', (2 + 2) * 3) // 12
console.log('运算符优先级', 2 * 3 > 4 == false) // false
console.log('运算符优先级', !true == 3 * 3 > 4) // false
十四、数组的操作
// 定义一个数组
let songs: string[] = ['告白气球', '洋葱', '吻别']
// 添加
// 1. 往开头新增 unshift(新增的值) 返回操作后的数组的长度
// songs.unshift('彩虹')
// console.log('返回数组长度', songs.unshift('七里香'))
// console.log('数组songs', songs)
// 2. 往结尾新增 push(新增的值) 返回操作后的数组的长度
// songs.push('光辉岁月', '海阔天空')
// console.log('数组', songs)
// 删除
// 1. 从开头删 shift
// console.log('返回删除的项', songs.shift())
// console.log('返回删除的项', songs.shift())
// console.log('数组', songs)
// 2. 从结尾删 pop
// songs.pop()
// songs.pop()
// songs.pop()
// console.log('数组', songs)
// 开头(S): unshift(开头增) shift(开头删)
// 结尾(P): push(结尾增) pop(结尾删)
// 定义一个数组
let songs: string[] = ['告白气球', '洋葱', '吻别', '双节棍', '曹操']
// splice 在任意位置进行删除或新增内容
// 数组名.splice(操作的起始位置, 删除几个, 新增的项1, 新增的项2, ...)
// 1. 删除(任意位置)
// songs.splice(2, 2)
// console.log('数组songs', songs)
// 2. 新增(任意位置)
// songs.splice(1, 0, '彩虹') // 新增
// 3. 替换(删了一项, 又加了一项)
// songs.splice(1, 1, '彩虹')
// console.log('数组songs', songs)
十五、if条件语句
// 分支语句 - if 语句
// 1. 单分支 (满足条件, 就会执行一段代码)
// if (逻辑条件) {
// 条件成立时执行的代码
// }
// 2. 双分支 (满足条件, 会执行A代码, 不满足条件, 会执行B代码)
// if (逻辑条件) {
// 条件成立时执行的代码
// }
// else {
// 条件不成立时执行的代码
// }
let score: number = 92
if (score >= 90) {
console.log('奖励', '一台游戏机')
}
else {
console.log('惩罚', '写个检讨, 分析出错原因')
}
//多分支
let score: number = 35
if (score >= 90) {
console.log('评价:', '优秀')
}
else if (score >= 80) {
console.log('评价:', '良好')
}
else if (score >= 60) {
console.log('评价:', '及格')
}
else {
console.log('评价:', '不及格')
}
十六、switch语句
// 输入水果名称, 查询价格 (精确匹配)
let fruit: string = '榴莲'
switch (fruit) {
case '苹果':
console.log('苹果价格:', '2.8元一斤')
break
case '香蕉':
console.log('香蕉价格:', '5.5元一斤')
break
case '西瓜':
console.log('西瓜价格:', '1.5元一斤')
break
default:
console.log('提示:', '尊敬的用户, 该水果不存在')
}
十七、三元表达式
// 三元条件表达式
// 语法: 条件 ? 条件成立执行的表达式 : 条件不成立执行的表达式
let num1: number = 40
let num2: number = 30
// let max: number = num1 > num2 ? num1 : num2
// console.log('三元条件表达式', max)
let res: number = num1 > num2 ? 3 * 5 : 2 + 6
console.log('三元条件表达式', res)
十八、页面的条件渲染
@Entry
@Component
struct Index {
@State age: number = 15
build() {
// 条件渲染: 不同的条件, 控制不同的UI界面展示
Column() {
if (this.age < 18) {
Text('未成年, 18岁以下')
}
else if (this.age < 60) {
Text('成年人, 18~60岁')
}
else {
Text('老年人, 60+')
}
Button('长大').onClick(() => {
this.age += 5
})
Text(`当前年纪: ${this.age}`)
}
}
}
十九、while循环
// while循环: 可以重复的执行一段代码
// while (条件) {
// 需要循环执行的语句
// }
// 死循环: 没有结束条件
// while (true) {
// console.log('while', '重复执行的代码')
// }
// 实际开发真正需要的, 有次数的循环
// 三要素: 变量初始值; 判断条件; 变化量(变量要变)
// let i: number = 1
// while (i < 10) {
// console.log('小于10成立', '执行代码', i) // 9
// i++ // 10
// }
// 需求1: 打印1-100的数字, 1, 2, 3, 4, 5 ... 100
// 三要素: 变量起始值; 判断条件; 变化量;
// let i: number = 1
// while (i <= 100) {
// console.log('i的值:', i)
// i++
// }
// let i: number = 100
// while (i >= 1) {
// console.log('i的值:', i)
// i--
// }
// 需求2: 打印 1-100 中的偶数
// let i: number = 1
// while (i <= 100) {
// if (i % 2 === 0) {
// console.log('i的值:', i)
// }
// i++
// }
// 需求3: 计算 1-10 的数字的 累加和, 1 + 2 + 3 + 4 + 5 ... + 10
// 三要素: 变量起始值; 判断条件; 变化量;
let i: number = 1
let sum: number = 0 // 存储累加的结果
while (i <= 10) {
console.log('需要累加的数字:', i)
// 每次执行下面这行代码, 就会进行一次累加, 并且更新累加的结果
sum = sum + i
i++
}
console.log('累加结果:', sum)
二十、for循环
// for (初始值; 循环条件; 变化量) {
// 重复执行的代码(循环体)
// }
// 需求: 打印 1-10 → 从 1 开始, 循环到 10 结束
// for (let i: number = 1; i <= 10; i++) {
// console.log('for循环', i)
// }
// 1-10的和, 从1开始,循环到10
let sum = 0
for (let i: number = 1; i <= 10; i++) {
console.log('for', i)
sum = sum + i // sum += i
}
console.log('求和', sum)
二十一、终止循环
// 退出循环:
// 1. break: 终止整个循环 (后面的循环不执行了)
// 2. continue: 退出当前这一次循环, 继续执行下一次循环 (包子当前这个不吃了, 吃下一个)
// 1. 一共8个包子, 吃到第5个, 饱了
// for (let i: number = 1; i <= 8; i++) {
// if (i == 5) {
// console.log('拿起了第5个包子, 发现吃不动了')
// // 终止当前的循环 (本次循环后面的代码不执行了, 且后续循环的代码也不执行了, 跳出循环)
// break
// }
// console.log('吃包子:', `第${i}个`)
// }
//
// console.log('这是循环外的代码')
// 2. 一个8个包子, 吃到第5个, 坏了
for (let i: number = 1; i <= 8; i++) {
if (i == 5) {
console.log('拿起了第5个包子, 发现坏了')
// 当前这次循环不继续执行了, 继续执行下一次循环
continue
}
console.log('吃包子:', `第${i}个`)
}
console.log('这是循环外的代码')
二十二、遍历数组
// 遍历数组: 利用循环, 依次按顺序访问数组的每一项
let names: string[] = ['大强', '老莫', '小龙', '大黑', '小黄']
// 数组的最后一项 names[names.length - 1]
// for (let i: number = 0; i < names.length; i++) {
// console.log('名字是', names[i])
// }
for (let item of names) {
console.log('数组中的每一项', item)
}
二十三、数组对象
// 对象数组 => 数组中包裹存储了很多的对象
// 1. 约定接口 (对象的类型)
interface Student {
stuId: number
name: string
gender: string
age: number
}
// 2. 基于接口, 构建对象数组
let stuArr: Student[] = [
{ stuId: 1, name: '小丽', gender: '女', age: 12 },
{ stuId: 2, name: '小红', gender: '女', age: 11 },
{ stuId: 3, name: '大强', gender: '男', age: 12 },
{ stuId: 4, name: '阿明', gender: '男', age: 13 },
]
// 包括对象的复杂数据,如果想要在日志中打印, 需要调用一个方法, 转成字符串格式
// JSON.stringify(复杂类型) 对象/数组
// console.log('学生数组', JSON.stringify(stuArr))
// 3. 具体使用 (访问 → 通过下标)
// console.log('小红', stuArr[1].name)
// console.log('小红', JSON.stringify(stuArr[1]))
// 4. 也支持遍历 for... of, 普通for
for (let item of stuArr) {
console.log('每一项', JSON.stringify(item))
}
二十四、ForEach渲染控制
@Entry
@Component
struct Index {
@State titles:string[] = [
'电子产品',
'精品服饰',
'母婴产品',
'影音娱乐',
'海外旅游'
]
build() {
Column() {
ForEach(this.titles, (item: string, index: number) => {
Text(`${index + 1} ${item}`)
.fontSize(24)
.fontWeight(700)
.fontColor(Color.Orange)
.padding(15)
.width('100%')
})
}
}
}