手把手教你华为鸿蒙开发之第七节

华为鸿蒙开发：数组和对象遍历及UI渲染详解

引言

在华为鸿蒙操作系统的开发中，数组和对象的遍历是基础且频繁的操作。无论是处理数据集合还是动态生成用户界面，都需要对数组和对象进行高效的遍历。本文将详细介绍如何在鸿蒙开发中使用 for 循环、for...of 循环以及 ForEach 方法来遍历数组和对象，并展示如何在UI中渲染这些数据。

遍历数组

基本遍历

数组遍历是访问数组中每个元素的过程。在鸿蒙开发中，我们可以使用 for 循环和 for...of 循环来实现。

示例1：使用 for...of 循环遍历数组

@Entry
@Component
struct Index {
  build() {
    let names: string[] = ['Alice', 'Bob', 'Charlie', 'David', 'Eva'];
    for (let item of names) {
      console.log('数组中的每一项', item);
    }
  }
}

在这个示例中，我们使用 for...of 循环遍历了一个包含姓名的数组，并打印出每个元素。

累加和

示例2：计算数组元素的累加和

@Entry
@Component
struct Index {
  build() {
    let sum: number = 0;
    let numbers: number[] = [10, 20, 30, 40, 50];
    for (let item of numbers) {
      sum += item;
    }
    console.log('结果', sum);
  }
}

在这个示例中，我们初始化了一个累加器 sum，并在遍历过程中将每个元素的值加到 sum 上，最后打印出累加的结果。

筛选数组

示例3：筛选数组中大于等于10的元素

@Entry
@Component
struct Index {
  build() {
    let numbers: number[] = [10, 5, 30, 40, 60, 10, 15, 5, -2];
    let filteredNumbers: number[] = [];
    for (let item of numbers) {
      if (item >= 10) {
        filteredNumbers.push(item);
      }
    }
    console.log('新数组', filteredNumbers);
  }
}

在这个示例中，我们创建了一个新数组 filteredNumbers 来存储所有大于等于10的元素，并使用 push 方法将符合条件的元素添加到新数组中。

去重数组

示例4：数组去重，将非0项收集到一个新数组中

@Entry
@Component
struct Index {
  build() {
    let numbers: number[] = [10, 5, 0, 40, 0, 0, 15, 5, 0];
    let uniqueNumbers: number[] = [];
    for (let num of numbers) {
      if (num !== 0) {
        uniqueNumbers.push(num);
      }
    }
    console.log('新数组', uniqueNumbers);
  }
}

在这个示例中，我们遍历数组并使用 push 方法将非0元素添加到新数组 uniqueNumbers 中，实现了去重的功能。

遍历对象数组

示例5：遍历对象数组

对象数组的遍历与普通数组类似，但需要通过属性访问每个对象的值。

@Entry
@Component
struct Index {
  build() {
    interface Student {
      stuId: number;
      name: string;
      gender: string;
      age: number;
    }
    let students: Student[] = [
      { stuId: 1, name: 'John', gender: 'Male', age: 14 },
      { stuId: 2, name: 'Emily', gender: 'Female', age: 13 },
      { stuId: 3, name: 'Michael', gender: 'Male', age: 15 },
      { stuId: 4, name: 'Sophia', gender: 'Female', age: 14 },
    ];
    for (let student of students) {
      console.log('学生ID:', student.stuId, '姓名:', student.name, '性别:', student.gender, '年龄:', student.age);
    }
  }
}

在这个示例中，我们定义了一个 Student 接口来描述学生对象的结构，并创建了一个学生对象数组 students。然后我们遍历这个数组，并打印出每个学生的详细信息。

UI渲染

示例6：使用ForEach遍历数组并渲染UI

在鸿蒙开发中，我们经常需要将数组中的数据渲染为UI元素。ForEach 方法是实现这一功能的强大工具。

@Entry
@Component
struct Index {
  @State categories: string[] = [
    '智能家电',
    '潮流服饰',
    '儿童玩具',
    '影视音乐',
    '环球旅行'
  ];

  build() {
    Column() {
      ForEach(this.categories, (category: string, index: number) => {
        Text(`${index + 1} ${category}`)
          .fontSize(24)
          .fontWeight(700)
          .fontColor(Color.Blue)
          .padding(15)
          .width('100%');
      });
    }
  }
}

在这个示例中，我们定义了一个包含分类名称的数组 categories，并使用 ForEach 方法遍历这个数组。对于每个分类，我们创建了一个 Text 组件来显示分类的编号和名称，并设置了字体大小、粗细和颜色等样式。

示例7：渲染文章列表

在实际应用中，我们经常需要渲染复杂的数据结构，如文章列表。

interface Article {
  title: string
  createTime: string
}

@Entry
@Component
struct Index {
  @State articles: Article[] = [
    {
      title: '探索智能家居的新趋势',
      createTime: '2024-02-01 10:00:00'
    },
    {
      title: 'JavaScript异步编程深入解析',
      createTime: '2024-02-01 11:00:00'
    },
    {
      title: '5G技术在物联网中的应用',
      createTime: '2024-02-01 12:00:00'
    },
  ];

  build() {
    Scroll() {
      Column() {
        this.articles.forEach((article, index) => {
          Column() {
            Text(article.title)
              .width('100%')
              .fontSize(15)
              .fontColor('#000000')
              .lineHeight(20);
            Text(article.createTime)
              .margin({top: 15})
              .width('100%')
              .fontSize(12)
              .fontColor('rgb(128, 128, 128)');
          }
          .padding({top: 15, bottom: 15})
          .width('100%')
          .border({
            width: {bottom: 2},
            color: {bottom: '#e0e0e0'}
          });
        });
      }
      .constraintSize({
        minHeight: '100%'
      });
    }
    .padding({ left: 13, right: 13 })
    .width('100%')
    .height('100%');
  }
}

在这个示例中，我们定义了一个包含文章对象的数组 articles，并使用 forEach 方法遍历这个数组。对于每篇文章，我们创建了两个 Text 组件来显示文章的标题和创建时间，并设置了相应的样式。我们还使用了 Scroll 和 Column 组件来布局文章列表，并设置了内边距和边框样式。

结语

遍历数组和对象以及在UI中渲染数据是鸿蒙开发中的重要技能。通过本文的详细介绍和示例，你应该能够掌握这些技能，并在实际开发中灵活运用。如果你有任何问题或想要进一步讨论，欢迎在评论区留下你的想法。

---

以上就是一篇关于华为鸿蒙开发中数组和对象遍历及UI渲染的详细教程。希望这篇文章能帮助你更好地理解和使用华为鸿蒙开发中的相关功能。如果你在使用 DevEco Studio 进行开发时遇到任何问题，欢迎交流讨论。