八、ArkTS-语句-类型进阶与渲染控制原创

亚鲁鲁666

发布于 2024-12-10 21:41

3175浏览

0收藏

1.对象数组

1.1定义对象数组

它是一个自定义对象类型的数组，数组元素是自己定义对象类型的对象，就是数组元素是对象，数组类型是自定义对象的类型

八、ArkTS-语句-类型进阶与渲染控制-鸿蒙开发者社区

//第一步通过接口定义对象
interface student{
  stuID:number,
  name:string,
  gender:string,
  age:number
}

//基于接口创建对象数组
let stuShuZu:student[]=[
  {stuID:1,name:'小明',gender:'高三',age:17},
  {stuID:1,name:'大明',gender:'高三',age:19},
  {stuID:1,name:'二明',gender:'高三',age:18},
  {stuID:1,name:'天明',gender:'高三',age:17}
]

//这是一个对象数组类型
stuShuZu
//这是一个对象类型
stuShuZu[0]

//需求:获取每一个学生的年龄, 
//看到数组每一个XXX,就要想到遍历
for (let item of stuShuZu){
  console.log('学生的姓名是',item.name)
}

@Entry
@Component
struct Index {
  //组件的状态变量
  @State count:number=1
  build() {
    Column(){

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#eee')
    .padding({top:15,right:15,left:15})
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.

1.2使用对象数组

访问某一个对象:

**每一对象在数组中都是有对应的下标的, 可以通过 ****数组名[下标] ****访问 **

访问某一对象的某一个属性

先找到要访问的对象, 在该对象的属性访问属性数组名[下标].属性名访问

依次访问每一个对象

for ... of 进行访问即可

//第一步通过接口定义对象
interface student{
  stuID:number,
  name:string,
  gender:string,
  age:number
}

//基于接口创建数组对象
let stuShuZu:student[]=[
  {stuID:1,name:'小明',gender:'高三',age:17},
  {stuID:1,name:'大明',gender:'高三',age:19},
  {stuID:1,name:'二明',gender:'高三',age:18},
  {stuID:1,name:'天明',gender:'高三',age:17}
]

//使用数组,  因为数组对象不能直接在日志中显示,  想要在日志中显示需要调用方法转成字符串
console.log('打印数组对象',stuShuZu)

//包含对象的复杂数据,  如果想在日志中打印,  需要需要调用一个方法,  转成字符串
//JSON.stringify(复杂类型)对象/数值
console.log('打印数组对象',JSON.stringify(stuShuZu))

//具体使用(访问->数组下标)
console.log('数组中第二位是',stuShuZu[1].name)
console.log('数组中第二位的信息',stuShuZu[1])//没有调用方法,  打印出来是Object
console.log('数组中第二位的信息',JSON.stringify(stuShuZu[1]))

//也支持遍历,  for...of和普通for
for(let item of stuShuZu){
  console.log('数组对象中的每一项',JSON.stringify(item))
}

@Entry
@Component
struct Index {
  //组件的状态变量
  @State count:number=1
  build() {
    Column(){

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#eee')
    .padding({top:15,right:15,left:15})
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

2.ForEach - 渲染控制

当我们页面中的区域中有多个样式相同的小区域,只有内容数据不一样的时候, 为了提升代码的复用率,不需要一个一个的编写UI组件,我们可以将所有的数据整合成一个数组, 并采取ForEach进行循环渲染.如下图区域,如果我们分别实现每个栏目,代码太过于冗余,这时就可以使用ForEach进行渲染了1.

八、ArkTS-语句-类型进阶与渲染控制-鸿蒙开发者社区

2.1ForEach语法

可以**基于****数组元素**的个数, 来渲染组件的个数(简化代码),根据数组长度循环渲染组件个数

语法:** ForEach(arr, (item, index)=>{这里写循环渲染的内容})**

arr: 要渲染的数组,

(item, index): (item: 是每一项+类型, index: 是下标) -> 是形参

八、ArkTS-语句-类型进阶与渲染控制-鸿蒙开发者社区

参数	参数类型	参数说明
arr	Array	数据源, 根据该数组生成对应的UI组件渲染到页面中: + 可以为空数组
UI组件生成函数	(item: any, index?: number) => void	UI组件生成函数 + 为数组中的每个元素创建对应的组件 + item: 代表每一个数组元素, 类型与数组元素保持一致,不可以省略 + index: 代表每一个数组元素的下标,可以省略

@Entry
@Component
struct Index {
  
  //用装饰器定义了一个数组
  @State stu:string[]=['大明','二明','小明','天命','耳顺','随心所欲']

  build() {
    Column(){
      //ForEach渲染控制,  
      //item是形参,可以自己定义写法
      // ()=>{} 第一个 参数1 - 永远都是表示数组每一项 
      // 				第二个 参数2 - 永远都是数组下标 - 不取决于命名，只取决于位置
      ForEach(this.stu,(item:string,index)=>{
          Text(`${item},${index+1}`)
            .fontColor(Color.Green)
            .fontSize(20)
            .fontWeight(500)
            .padding(10)
      }) 
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#eee')
    .padding({top:15,right:15,left:15})
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

//接口要定义到程序入口@Entry外
interface news{
  title:string,
  createTime:string,
}
@Entry
@Component
struct Index {
  @State articles: news[]=[
    {title:'近200+自动驾驶数据集全面调研!一览如何数据闭环全流程', createTime:'2024-01-31 09-59:43'},
    {title:'近200+自动驾驶数据集全面调研!一览如何数据闭环全流程', createTime:'2024-01-31 09-59:43'},
    {title:'近200+自动驾驶数据集全面调研!一览如何数据闭环全流程', createTime:'2024-01-31 09-59:43'},
    {title:'近200+自动驾驶数据集全面调研!一览如何数据闭环全流程', createTime:'2024-01-31 09-59:43'},
  ]
  
  build() {
    Column(){
      //ForEach渲染控制,
      ForEach(this.articles,(item:news,index)=>{
          Column(){
            Text(`${item.title}`)
              .fontColor('#000')
              .fontWeight(500)
              .padding(10)
              .width('100%')
            Text(`${item.createTime}`)
              .fontColor('#999')
              .fontSize(14)
              .fontWeight(500)
              .padding(10)
              .width('100%')
          }
      })  
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#eee')
    .padding({top:15,right:15,left:15})
  }
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

2.2ForEach使用优化代码

原始代码

完整代码

3.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))  // 11.
2.
3.
4.
5.
6.
7.
8.
9.
10.

求0--10之间的随机整数

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

// 0-10 之间的随机 整数
console.log('Math对象', Math.floor(Math.random() * 11))1.
2.
3.
4.
5.

求n--m之间的随机数

//计算n-m的随机数
let n:number=1
let m:number=10
console.log('n-m的随机数',Math.floor(Math.random()*(m-n+1))+1);

//这种写法0是取不到的, 或者取到0的概率极小
console.log('随机数',Math.ceil(Math.random()*2));1.
2.
3.
4.
5.
6.
7.

分类

标签

已于2024-12-12 23:02:03修改