uniapp遍历数组对象的常见方法_uniapp foreach

在 UniApp 中，遍历数组对象的方法与在普通 JavaScript 中是相同的。UniApp 是一个使用 Vue.js 开发所有前端应用的框架，因此你可以使用 Vue.js 和 JavaScript 的语法来遍历数组对象。

以下是一些常见的遍历数组对象的方法：

1. 使用 for 循环

let arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  // ...
];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i].id, arr[i].name);
}
1
2
3
4
5
6
7
8
9

2. 使用 for...of 循环 (ES6+ 语法)

let arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  // ...
];

for (let item of arr) {
  console.log(item.id, item.name);
}
1
2
3
4
5
6
7
8
9

3. 使用 Array.prototype.forEach 方法

let arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  // ...
];

arr.forEach(item => {
  console.log(item.id, item.name);
});
1
2
3
4
5
6
7
8
9

4. 使用 Array.prototype.map 方法 (虽然 map 通常用于生成新数组，但也可以用于遍历)

let arr = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  // ...
];

arr.map(item => {
  console.log(item.id, item.name);
  // 注意：map 会返回一个新数组，但在这里我们只是用它来遍历
  return null; // 可以返回任何值，但在这个例子中我们不需要新数组
});
1
2
3
4
5
6
7
8
9
10
11

5. 使用 Vue 的 v-for 指令 (在 UniApp 的模板中)

如果你在 UniApp 的模板中需要遍历数组对象，可以使用 v-for 指令：

<template>
  <view>
    <text v-for="(item, index) in arr" :key="index">{{ item.id }} - {{ item.name }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        { id: 1, name: 'Alice' },
        { id: 2, name: 'Bob' },
        // ...
      ]
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意：在 Vue 中使用 v-for 时，通常建议提供一个唯一的 :key 绑定，以帮助 Vue 跟踪每个节点的身份，从而重用和重新排序现有元素。在这个例子中，我使用了数组的索引作为键，但在实际应用中，如果可能的话，最好使用唯一的标识符（如 id）作为键。