微搭低代码入门05循环

文摘   2024-11-16 08:00   内蒙古  

在编程中,循环是一种非常强大的控制结构,它允许我们重复执行一段代码直到满足某个条件为止。在微搭中,我们一般用循环来处理我们数据库返回的结果。

在微搭中,每一个数据源返回的数据有一个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循环,结合具体的语法介绍了循环展示组件的用法。编程如果能够理解循环语句的用法相当于懂了一半,剩下就是结合需求开发功能了。



低代码布道师
分享微搭低代码使用教程,提问交流+知识星球50556232
 最新文章