微搭低代码入门05循环

1 for 循环

for 循环是最常用的循环结构之一，它允许我们指定循环的初始表达式、循环条件和迭代表达式。

语法：

bash 复制代码

for (初始化表达式; 循环条件; 迭代表达式) {
    // 循环体
}

示例：

1、正向打印数字

bash 复制代码

for (let i = 1; i <= 5; i++) {
    console.log(i);
}
// 输出: 1 2 3 4 5

2、逆向打印数字

bash 复制代码

for (let i = 5; i >= 1; i--) {
    console.log(i);
}
// 输出: 5 4 3 2 1

3、使用循环迭代数组

for 循环也可以用来迭代数组中的元素。

bash 复制代码

const fruits = ['Apple', 'Banana', 'Cherry'];

for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}
// 输出: Apple Banana Cherry

4、嵌套循环

嵌套循环是指在一个循环内部再嵌套一个或多个循环。

bash 复制代码

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 循环会在指定的条件为真时重复执行一段代码。

语法：

bash 复制代码

while (条件) {
    // 循环体
}

示例：

bash 复制代码

let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}
// 输出: 1 2 3 4 5

3 do...while 循环

do...while 循环与 while 循环类似，但不同的是，do...while 循环至少会执行一次，即使条件一开始就是假的。

语法：

bash 复制代码

do {
    // 循环体
} while (条件);

示例：

bash 复制代码

let i = 1;
do {
    console.log(i);
    i++;
} while (i <= 5);
// 输出: 1 2 3 4 5

4 break 语句

break 语句用于立即退出循环，即使循环条件仍然为真。

示例：

bash 复制代码

for (let i = 1; i <= 10; i++) {
    if (i === 5) {
        break; // 当 i 等于 5 时，退出循环
    }
    console.log(i);
}
// 输出: 1 2 3 4

5 循环展示组件

理解了上边的循环的语法和使用场景之后，我们看一下微搭封装的一个循环展示组件

右侧的属性里有一个数据，其实就类似于我们如果需要循环迭代数组的时候，你先需要定义一个变量。默认属性是一个固定的内容，这里我们可以自己定义

一种方案我们是创建一个变量，类型选择数组

数组我们可以进行初始化，一般我们是在页面的加载的时候，通过调用数据源的API来给数组进行赋值

然后再将变量绑定到数据上，在循环展示里边的组件相当于我们的循环体，循环体我们在代码里是通过数组的索引来获取的，在微搭里我们可以从repeater里去取对应的属性，组件示例里是通过表达式取的值

bash 复制代码

$w.index_repeater1 + `: ` + $w.item_repeater1.name

理解了这一部分，在列表页、首页、我的页面会大量用到类似的语法，你的功能就有了着落不至于胡乱绑定属性了

总结

我们本篇介绍了循环的具体语法，介绍了三种循环结构包括for、while、do...while循环，结合具体的语法介绍了循环展示组件的用法。编程如果能够理解循环语句的用法相当于懂了一半，剩下就是结合需求开发功能了。

微搭低代码入门05循环

目录

1 for 循环

2 while 循环

3 do...while 循环

4 break 语句

5 循环展示组件

总结