在 JavaScript 中，常见的循环结构有7种，每种结构适用于不同的场景。故在此列举7种常见的 JavaScript 循环类型：
目录
一、完整示例
1、for 循环
1）JavaScript
2）效果
2、while 循环
1）JavaScript
2）效果
3. do...while 循环
1）JavaScript
2）效果
4. for...in 循环
1）JavaScript
2）效果
5. for...of 循环
1）JavaScript
2）效果
6. forEach() 方法
1）JavaScript
2）效果
7. map() 方法
1）JavaScript
2）效果
二、总结
欢迎关注VX公众号：前端小知识营地
一、完整示例
1、for 循环
最常见的循环结构，通常用于已知循环次数或需要手动控制索引的情况。
语法：for (初始化; 条件; 更新)
1）JavaScript
for (let i = 0; i < 10; i++) {
console.log(i); // 输出 0 到 9
}
2）效果
2、while 循环
当你想在某个条件为真时持续执行循环时，while 循环很有用。它在每次循环之前都会先检查条件。语法：while (条件)
1）JavaScript
let i = 0;
while (i < 5) {
console.log(i); // 输出 0 到 4
i++;
}
2）效果
3. do...while 循环
和 while 循环类似，不同的是，do...while 循环会先执行一次循环体，然后再检查条件。无论条件是否成立，循环体至少会执行一次。语法：do { 循环体 } while (条件);
1）JavaScript
let i = 0;
do {
console.log(i); // 输出 0 到 5
i++;
} while (i < 6);
2）效果
4. for...in 循环
用于遍历对象的可枚举属性。它通常用于对象（而不是数组）时。语法：for (let key in object)
1）JavaScript
const person = { name: "John", age: 30 };
for (let key in person) {
console.log(key, person[key]); // 输出 "name John" 和 "age 30"
}
2）效果
5. for...of 循环
用于遍历可迭代对象（如数组、字符串、Map、Set 等）。它会遍历数组中的每个元素。语法：for (let item of iterable)
1）JavaScript
const arr = [10, 20, 30];
for (let item of arr) {
console.log(item); // 输出 10, 20, 30
}
2）效果
6. forEach() 方法
forEach() 是数组的方法，用于遍历数组中的每个元素。它提供了更简洁的语法，但不像 for...of 那样能中断循环（无法使用 break、continue）。语法：array.forEach(callback(currentValue, index, array))
1）JavaScript
const arr = [10, 20, 30];
arr.forEach((item, index) => {
console.log(index, item); // 输出 0 10, 1 20, 2 30
});
2）效果
7. map() 方法
map() 不是严格意义上的循环，而是对数组的每个元素进行操作并返回一个新数组。它非常适合处理数组转换或映射操作。语法：array.map(callback(currentValue, index, array))
1）JavaScript
const arr = [1, 2, 3];
const doubled = arr.map(num => num * 2);
console.log(doubled); // 输出 [2, 4, 6]
2）效果
二、总结
for 循环适用于索引控制。while 循环适用于不确定循环次数的情况。do...while 确保循环至少执行一次。for...in 用于对象的属性遍历。for...of 用于可迭代对象的元素遍历。forEach() 和 map() 是数组专用方法，分别用于执行操作和转换。
这些循环方法和方法适用于不同场景，选择合适的循环结构可以提高代码的可读性和性能。
欢迎关注VX公众号：前端小知识营地