JavaScript 中的循环迭代方法（七种）
目录
一、普通循环
for 循环：
while 循环：
do...while 循环：
二、特殊循环
for...in 循环：
for...of 循环：
forEach()循环：
map方法
语法
属性
一、普通循环
1.for 循环：
for 循环是最常见和经典的循环结构之一。它允许你明确指定循环的起始条件、终止条件和每次迭代后进行的操作。
for (let i = 0; i < length; i++) {
// 循环体内的操作
}2.while 循环：
while 循环在每次迭代之前检查指定的条件，并在条件为真时执行循环体内的操作。
let i = 0;
while (i < length) {
// 循环体内的操作
i++;
}3.do...while 循环：
do...while 循环与 while 循环类似，但它在循环体的操作之后检查指定的条件。
let i = 0;
do {
// 循环体内的操作
i++;
} while (i < length);二、特殊循环
4.for...in 循环：
for...in 循环用于迭代对象的可枚举属性。它将遍历对象的属性，并对每个属性执行指定的操作。但需要注意遍历的顺序是不确定的，
写法：
for (let key in object) {
// 循环体内的操作
}案例：
1.遍历对象的属性：
const obj = {
name: 'John',
age: 30,
occupation: 'Developer'
};
for (let key in obj) {
console.log(key + ':', obj[key]);
}
/**
输出：
name: 'John',
age: 30,
occupation: 'Developer'
*/
// 该代码将遍历对象 obj 的可枚举属性，并打印每个属性的键和对应的值。
2.统计对象属性个数：
const obj = {
name: 'John',
age: 30,
occupation: 'Developer'
};
let count = 0;
for (let key in obj) {
count++;
}
console.log('Property count:', count);
/**
输出： Property count：3
*/
//该代码通过 for...in 循环遍历对象 obj 的属性，每遍历到一个属性就将计数器
//count 加一。最后，打印对象属性的个数。注意：
for...in 循环遍历的是对象的可枚举属性，包括原型链上的属性。如果不想遍历原型链上的属性，可以使用 hasOwnProperty() 方法进行过滤：
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
// 循环体内的操作
}
}
//这样可以确保只遍历对象自身的属性，而不包括继承的属性。5.for...of 循环：
for...of 循环是 ES6 中引入的新特性，用于迭代可迭代对象（如数组、字符串等）的元素。它可以更方便地遍历集合对象中的元素。
写法：
for (let element of iterable) {
// 循环体内的操作
}案例：
1.遍历数组元素：
const arr = [1, 2, 3, 4, 5];
for (let element of arr) {
console.log(element);
}
// 该代码将遍历数组 arr 的元素，并将每个元素打印到控制台。
2.遍历字符串的字符：
const str = "Hello";
for (let char of str) {
console.log(char);
}
// 该代码将遍历字符串 str 的字符，并将每个字符打印到控制台。
3.遍历可迭代对象的自定义类型：
const iterableObj = {
*[Symbol.iterator]() {
yield "a";
yield "b";
yield "c";
}
};
for (let element of iterableObj) {
console.log(element);
}
// 该代码定义了一个可迭代对象 iterableObj，它使用生成器函数（Generator）
// 定义了自己的迭代器。然后，通过 for...of 循环遍历该可迭代对象的元素，并打印每个元素。
注意： for...of 循环只能用于遍历可迭代对象，而不能用于遍历普通对象（非可迭代对象）。如果想要遍历普通对象的属性，请使用 for...in 循环。
6.forEach()循环：
forEach() 方法需要一个函数作参数
let perArr = ["孙悟空","红孩儿","猪八戒","二郎神","唐三藏","沙悟净"];
function fun (){
console.log("我有多少个"); // 执行6遍，因为有perArr 有6个元素
}
perArr.forEach(fun);但一般直接写函数
let perArr.forEach(function(){
console.log("我有多少个"); // 执行6遍，因为有perArr 有6个元素
});而这种函数是由开发人员创建，但却不是由开发人员调用的，称为回调函数
并且数组中有几个元素，改函数就执行多少遍，如果有添加上形参
1、遍历的元素
let perArr = ["孙悟空","红孩儿","猪八戒","二郎神","唐三藏","沙悟净"];
perArr.forEach(function(a){
console.log(a); // 孙悟空 红孩儿 猪八戒 二郎神 唐三藏 沙悟净
});2、遍历元素的索引（下标）
let perArr = ["孙悟空","红孩儿","猪八戒","二郎神","唐三藏","沙悟净"];
perArr.forEach(function(a,b){
console.log(b); // 0 1 2 3 4 5
});3、正在遍历的数组对象
let perArr = ["孙悟空","红孩儿","猪八戒","二郎神","唐三藏","沙悟净"];
perArr.forEach((a,b,c)=>{
console.log(c); // (孙悟空 红孩儿 猪八戒 二郎神 唐三藏 沙悟净)*6
});总结
let perArr = ["孙悟空","红孩儿","猪八戒","二郎神","唐三藏","沙悟净"];
perArr.forEach((value,index,object)=>{
console.log(value);
console.log(index);
console.log(object);
});注意：forEach() 方法它并不支持在循环中使用 break 或 return 来提前终止循环，
7.map方法
语法
array.map(function(currentValue, index, arr), thisValue)
/**
* currentValue：当前处理的元素；
* index：当前处理元素的索引；
* arr：当前处理元素的数组。
*/属性
-
不修改原数组：
map方法创建一个新数组，而不修改原始数组。这对于保持数据的不可变性很有用，因为你不必担心在处理数据时不小心更改原数组。 -
函数式编程：
map是函数式编程中的常见工具之一，它允许你以声明性的方式处理数据，从而使代码更易读和维护。 -
数据转换：在很多情况下，你可以使用
map来将一种数据格式转换为另一种，例如，将对象数组中的特定属性提取出来，以创建一个包含这些属性值的新数组。 -
转换数组元素：
map允许你将数组中的每个元素通过一个回调函数进行处理，从而创建一个新的数组，其中的元素是原数组经过处理后的结果。这可以用于将数组中的数据进行转换，修改或映射到一个新数组。
javascriptconst numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((num) => num * num);
// squaredNumbers 现在包含 [1, 4, 9, 16, 25]-
遍历数组：通过
map，你可以遍历数组中的元素，执行一些操作，而不需要显式的for循环或forEach方法。javascriptconst fruits = ['apple', 'banana', 'cherry']; fruits.map((fruit) => console.log(fruit)); // 输出每个水果