当前位置：首页 > news >正文

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

news 2025/8/14 16:11:28

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

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

使用 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);
}

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

let arr = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },// ...
];for (let item of arr) {console.log(item.id, item.name);
}

使用 Array.prototype.forEach 方法

let arr = [{ id: 1, name: 'Alice' },{ id: 2, name: 'Bob' },// ...
];arr.forEach(item => {console.log(item.id, item.name);
});

使用 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; // 可以返回任何值，但在这个例子中我们不需要新数组
});

使用 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>