AekTs变量的存储与修改-CSDN博客

// 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%')
      })
    }
  }
}