JavaScript 的首要挑战之一就是学习如何管理数据集合。例如，假设你有多个产品、号码或用户记录。如何在不编写重复代码的情况下检查或修改每个数据？答案在于循环。
在本指南中，我们将介绍 JavaScript 中用于循环遍历数组和对象的各种方法。如果您是编程新手，不用担心，我们会循序渐进地讲解每个概念，并用通俗易懂的语言讲解，并提供一些您可以理解的实际示例。
您将学到什么
阅读完本指南后，您将了解：
数组和对象之间的区别。
如何使用不同的方法循环遍历数组。
如何循环遍历对象并访问其数据。
何时使用每种循环方法（for，，，，，）forEach。mapfilterreducefind
作为初学者选择正确循环的最佳实践。
理解数组与对象
在我们开始学习循环之前，了解我们将要处理的数据类型非常重要。
数组：有序列表。可以把它们想象成一个个编号的架子，每个元素都有一个索引（位置）。
例子：
const fruits = ["apple", "banana", "orange"];
对象：一种将数据组织为键值对的方式，其中每个键指向一个特定的值。
const user = { name: "Wisdom", age: 30, role: "Developer" };数组最适合列表，而对象最适合描述具有命名属性的事物。
现在让我们学习如何循环它们。
循环遍历数组
for 循环（经典方法）
循环for是遍历数组元素最常见的传统方法。它使用索引来访问每个元素。
const fruits = ["apple", "banana", "orange"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]); // apple, banana, orange
}它对初学者很有帮助，因为它演示了循环在后台是如何运作的。当你需要索引或想提前停止时，它也很有用。
forEach()（更简单的方法）
如果您不关心索引而只想为每个项目“做一些事情”，forEach()那就更干净了。
fruits.forEach(fruit => {
console.log(fruit);
});比 for 循环更容易阅读，但不能用 break 提前停止它。
map()（转化值）
map()当您想通过应用转换来创建新数组时使用。
const uppercased = fruits.map(fruit => fruit.toUpperCase()); console.log(uppercased); // ["APPLE", "BANANA", "ORANGE"]
思考“转变”：每个元素都变成新的东西。
filter()（挑选具体物品）
有时，您只需要数组中的某些元素。
const longNames = fruits.filter(fruit => fruit.length > 5); console.log(longNames); // ["banana", "orange"]
想想“选择”：它给你一个更小的数组。
find()（仅第一个匹配）
如果您的目标是仅返回满足给定条件的第一个项目，请使用 find()。
const firstFruit = fruits.find(fruit => fruit.startsWith("b"));
console.log(firstFruit); // "banana"当您不需要所有匹配而只需要第一个匹配时，速度会更快。
reduce()（合并为一个值）
最强大的一个。reduce()让你获取一个数组并将其“减少”为单个结果。
const numbers = [1, 2, 3, 4]; const sum = numbers.reduce((total, num) => total + num, 0); console.log(sum); // 10
当您需要总数、平均值或合并结果时使用。
循环遍历对象
对象的排序不像数组那样，所以我们循环遍历它们的键和值。
for...in（基本方法）
const user = { name: "Wisdom", age: 30, role: "Developer" };
for (let key in user) {
console.log(key, user[key]);
}它运行良好，但由于它包含继承的属性，因此对于初学者来说它并不总是最安全的选择。
Object.keys()，，Object.values()Object.entries()
一种更安全、更现代的方法是将对象转换为数组。
// name Wisdom, age 30, role Developer Object.keys(user).forEach(key => console.log(key, user[key])); // Wisdom, 30, Developer Object.values(user).forEach(value => console.log(value)); // name Wisdom, age 30, role Developer Object.entries(user).forEach(([key, value]) => console.log(key, value));
这些方法对初学者来说很友好并且可预测。
总结（实际例子）
假设我们有一个产品列表。我们想要：
查找有库存的产品。
计算它们的总价值。
const products = [
{ name: "Pen", price: 1.5, qty: 10 },
{ name: "Book", price: 12, qty: 2 },
{ name: "Notebook", price: 5, qty: 0 }
];
const totalValue = products.filter(p => p.qty > 0).map(p => p.price * p.qty).reduce((sum, value) => sum + value, 0);
// totalconsole.log(totalValue); // 39通过应用filter，然后map，最后reduce，我们创建了一个流程，其中每个方法都对下一个方法做出贡献，从而保持代码的可读性。
初学者的最佳实践
从符合您的目标的方法开始（转换：map，选择：filter，总计：）reduce。
用于forEach记录等简单的辅助任务。
当您需要提前停止时，请使用for或。for...of
对于对象，优先Object.keys/values/entries于for...in。
不要过分强调性能；专注于编写清晰、易懂的代码。
结论
循环是 JavaScript 编程的核心。对于初学者来说，最重要的一步是选择正确的方法：
学习基础知识时使用for和。for...of
当你感觉更舒服时，转到数组方法（forEach，，，，）map。filterfindreduce
对于对象，坚持使用Object.keys、、Object.values和Object.entries以保持简单。
在小问题上练习这些技巧，很快你就会发现循环数据变得自然而轻松。随着你的进步，你会发现无论是小型项目还是复杂项目，都高度依赖于这些循环模式。