学习如何使用微信小程序的for和foreach循环遍历获得索引和数据

最新推荐文章于 2025-02-25 19:18:04 发布

徊忆羽菲

最新推荐文章于 2025-02-25 19:18:04 发布

阅读量1.5w

点赞数 6

分类专栏：微信-小程序文章标签：微信小程序 javascript 前端

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/121019715

版权

微信-小程序专栏收录该内容

48 篇文章

订阅专栏

本文介绍了在微信小程序中如何使用三种不同的循环方法遍历数组，包括传统的for循环，利用length属性的for循环，以及使用forEach方法的循环。示例代码展示了如何遍历获取数组元素的索引和数据，适用于处理和展示页面数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习如何使用微信小程序的for和foreach循环遍历获得索引和数据

js文件中定义数组

* 页面的初始数据

*/

data: {

users: [{
      name: '张三',
      age: 18
    }, {
      name: '李四',
      age: 19
    }, {
      name: '王五',
      age: 20
    }, {
      name: '赵六',
      age: 20
    }]
},

第一种for循环方法

let datas = this.data.users;
for (var index in datas) {
  console.log(index + ' 姓名：' + datas[index].name + ' 年龄：' + datas[index].age);
}

datas：数组
index：下标
title：数组中的一个字段

在这里插入图片描述

第二种for循环方法length

let datas = this.data.users;
for (var i = 0; i < datas.length; ++i) {
  console.log(i + ' 姓名：' + datas[i].name + ' 年龄：' + datas[i].age);
}

datas：数组
datas.length：数组长度

在这里插入图片描述

第三种forEach循环方法

let datas = this.data.users;
datas.forEach(function (item, index) {
  console.log(index + ' 姓名：' + datas[index].name + ' 年龄：' + datas[index].age);
})
console.log('--------------------------------------');
datas.forEach(function (item, index) {
   console.log(index + ' 姓名：' + item.name + ' 年龄：' + item.age);
})

在这里插入图片描述

在微信wxml页面内执行循环取值

姓名：{{item.name}}
年龄：{{item.age}}