本次主要是讲解下 数据数据的操作以及for循环和 for of的遍历方式 for each渲染循环 对应的方法都有解释 直接看代码

let dataArray: string[] = ['小航','小花','小刚','小白','小李']

for (let i = 0; i < dataArray.length; i++) {
  console.log(dataArray[i]);
}

for (let item of ['小航','小花']) {
  console.log(item);
}

// 数据的数据操作
dataArray.unshift('我往前面加一个') // 返回添加之后的数组个数
console.log(dataArray.toString());
dataArray.push('我往后面加一个') // 返回添加之后的数组个数
console.log(dataArray.toString());
dataArray.shift() // 返回删除的元素 这样设计是为了方便后续的数据操作
console.log(dataArray.toString());
dataArray.pop() // 返回删除的元素 这样设计是为了方便后续的数据操作
console.log(dataArray.toString());

dataArray.splice(2,2) // 从下标为2的地方开始删除, 删除几个
console.log(dataArray.toString());

dataArray.splice(2,0,'我在这里增加一个','我再增加一个') // 从下标为2的地方开始删除, 删除几个,,新增的元素
console.log(dataArray.toString());
dataArray.splice(2,0,'我在这里增加一个') // 从下标为2的地方开始删除, 删除几个,新增的元素
console.log(dataArray.toString());

// for each渲染循环
ForEach(this.dataArray, (item: string, index) => {
  Text(item)
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
})

往数组中追加元素

可以方便的往数组中的前面和后面添加元素

addData(12)

// 一个小语法的使用
function addData(num: number) {
  let tmpArray = [1,2,3,4,5,6]
  let tmpArray2 = [num, ...tmpArray]
  let tmpArray3 = [num, ...tmpArray, num]
  console.log(tmpArray.toString(),tmpArray1.toString());
}

// 使用函数进行拼接
let tmpArray = [1,2,3,4,5,6]
let tmpArray1 = [1,2]
tmpArray = tmparray.concat(tmpArray1)

数组中数据的排序

// 数组数据排序 通过数组中的某个元素进行比较大小排序
function sortData() {
  let tmpArray = [1,3]
  tmpArray.sort((a, b) => {
    return b - a
  })
}

快速创建测试数据

通过array的特性 可以快速创建适量的测试数据 特别是当数据量比较大的时候 这样就更大显得方便了

Column() {
  ForEach(Array.from({ length: 10 }), (item: number, index) => {
    
  })
}

下面再看几个代码段 大致的看下 是怎么用的

先创建一个接口

interface Article {
  creatime: string,
  title: string,
  detail: string
}

再定义一个可变的数据对象包含了多个接口对象

@State jsonArray: Article[] = [
  { creatime: '2022-10-06', title: '今天天气真的好', detail: '我也觉得很不错' },
  { creatime: '2022-10-06', title: '今天天气真的好', detail: '我也觉得很不错' },
  { creatime: '2022-10-06', title: '今天天气真的好', detail: '我也觉得很不错' },
]

需要循环的地方就可以直接用了

Column({ space: 12 }) {
  ForEach(this.jsonArray, (item: Article, index) => {
    Column() {
      Text(item.title)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .textAlign(TextAlign.Start)
        .width('100%')

      Row() {
        Text(item.detail)
          .fontSize(12)
          .fontWeight(FontWeight.Regular)
          .textAlign(TextAlign.Start)

        Blank()

        Text(item.creatime)
          .fontSize(12)
          .fontWeight(FontWeight.Regular)
          .textAlign(TextAlign.End)
      }
      .width('100%')
    }
  })
}
.width('100%')
.backgroundColor(Color.Green)