目录
- 1 for 循环
- 2 while 循环
- 3 do...while 循环
- 4 break 语句
- 5 循环展示组件
- 总结
在编程中，循环是一种非常强大的控制结构，它允许我们重复执行一段代码直到满足某个条件为止。在微搭中，我们一般用循环来处理我们数据库返回的结果。
在微搭中，每一个数据源返回的数据有一个records属性，他里边就是用数组来存储我们的数据。本篇我们分别介绍循环在自定义方法中的使用，和循环组件的使用。
1 for 循环
for 循环是最常用的循环结构之一，它允许我们指定循环的初始表达式、循环条件和迭代表达式。
语法：
for (初始化表达式; 循环条件; 迭代表达式) {
// 循环体
}
示例：
1、正向打印数字
for (let i = 1; i <= 5; i++) {
console.log(i);
}
// 输出: 1 2 3 4 5
2、逆向打印数字
for (let i = 5; i >= 1; i--) {
console.log(i);
}
// 输出: 5 4 3 2 1
3、使用循环迭代数组
for 循环也可以用来迭代数组中的元素。
const fruits = ['Apple', 'Banana', 'Cherry'];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// 输出: Apple Banana Cherry
4、嵌套循环
嵌套循环是指在一个循环内部再嵌套一个或多个循环。
for (let i = 1; i <= 3; i++) {
for (let j = 1; j <= 3; j++) {
console.log(`i = ${i}, j = ${j}`);
}
}
// 输出:
// i = 1, j = 1
// i = 1, j = 2
// i = 1, j = 3
// i = 2, j = 1
// i = 2, j = 2
// i = 2, j = 3
// i = 3, j = 1
// i = 3, j = 2
// i = 3, j = 3
2 while 循环
while 循环会在指定的条件为真时重复执行一段代码。
语法：
while (条件) {
// 循环体
}
示例：
let i = 1;
while (i <= 5) {
console.log(i);
i++;
}
// 输出: 1 2 3 4 5
3 do…while 循环
do…while 循环与 while 循环类似，但不同的是，do…while 循环至少会执行一次，即使条件一开始就是假的。
语法：
do {
// 循环体
} while (条件);
示例：
let i = 1;
do {
console.log(i);
i++;
} while (i <= 5);
// 输出: 1 2 3 4 5
4 break 语句
break 语句用于立即退出循环，即使循环条件仍然为真。
示例：
for (let i = 1; i <= 10; i++) {
if (i === 5) {
break; // 当 i 等于 5 时，退出循环
}
console.log(i);
}
// 输出: 1 2 3 4
5 循环展示组件
理解了上边的循环的语法和使用场景之后，我们看一下微搭封装的一个循环展示组件
右侧的属性里有一个数据，其实就类似于我们如果需要循环迭代数组的时候，你先需要定义一个变量。默认属性是一个固定的内容，这里我们可以自己定义
一种方案我们是创建一个变量，类型选择数组
数组我们可以进行初始化，一般我们是在页面的加载的时候，通过调用数据源的API来给数组进行赋值
然后再将变量绑定到数据上，在循环展示里边的组件相当于我们的循环体，循环体我们在代码里是通过数组的索引来获取的，在微搭里我们可以从repeater里去取对应的属性，组件示例里是通过表达式取的值
$w.index_repeater1 + `: ` + $w.item_repeater1.name
理解了这一部分，在列表页、首页、我的页面会大量用到类似的语法，你的功能就有了着落不至于胡乱绑定属性了
总结
我们本篇介绍了循环的具体语法，介绍了三种循环结构包括for、while、do…while循环，结合具体的语法介绍了循环展示组件的用法。编程如果能够理解循环语句的用法相当于懂了一半，剩下就是结合需求开发功能了。
