1. for 循环
for循环是最常用的循环结构之一，它适合在循环开始前就知道循环次数的情况。
基本语法
for (初始化表达式; 条件表达式; 迭代后表达式) {
// 循环体
// 这里的代码会在每次迭代时执行
}如何工作
- 初始化：首先执行初始化表达式，通常用来设置循环控制变量。
- 条件测试：然后，程序检查条件表达式是否为真（即，是否返回true）。
- 执行循环体：如果条件为真，执行循环体内的代码。
- 迭代后表达式：执行完循环体后，执行迭代后表达式，通常用于更新循环控制变量。
- 重复测试和执行：再次检查条件表达式，如果条件仍为真，重复步骤3和4。一旦条件变为假，循环终止。
示例
for (let i = 0; i < 5; i++) {
console.log(i);
}
// 输出：
// 0
// 1
// 2
// 3
// 4注意事项
- 初始化表达式、条件表达式和迭代后表达式是可选的，但圆括号是必需的。
- 确保条件表达式最终会变为假，否则将导致无限循环。
- 迭代后表达式通常用于更新循环控制变量。
应用场景
for循环广泛应用于各种场景，例如：
- 遍历数组或列表中的每个元素。
- 执行固定次数的计算或操作。
- 在已知的迭代次数下处理数据。
for循环的结构使其非常适合处理已知大小的集合，如数组或列表，以及需要精确控制迭代次数的场景。
2. while 循环
while循环在条件为真时执行循环体，直到条件不再满足。
基本语法
while (条件表达式) {
// 循环体
// 这里的代码会在每次循环时执行
}如何工作
- 条件检查：在执行任何循环体内的代码之前，判断条件是否成立。
- 执行循环体：如果条件成立，则立即执行循环体中的代码。
- 再次检查条件：执行完循环体中的代码后，再修改变量的值，然后将修改后的值再带入到条件中。
- 重复执行：再次判断条件是否成立，如果成立则继续执行循环体中的代码。
-
结束循环：只要条件不成立，那么循环体中的代码不会执行。
示例
let number = 1;
while (number <= 5) {
console.log(number);
number++; // 递增操作，避免无限循环
}
// 输出：
// 1
// 2
// 3
// 4
// 5注意事项
- 确保循环有退出条件，以避免无限循环。
- 更新循环条件中的变量是关键，否则循环将永远不会终止。
应用场景
while循环在很多场景中都非常有用，例如：
- 读取文件中的所有行，直到文件末尾。
- 在未知具体次数的情况下处理用户输入，直到满足某种条件。
- 处理动态生成的数据，直到特定条件满足。
while循环一般在实际开发中用来解决循环次数不确定, 不确定要循环多少次,推荐使用while循环。
3. do...while 循环
与
while循环类似，但区别在于do...while循环至少会执行一次，即使条件一开始就是假的。
基本语法：
do {
// 循环体内的代码
} while (条件);示例：
let k = 5;
do {
console.log(k);
k++;
} while (k < 5); // 仍然会打印一次5do...while循环与while循环的比较
while循环在每次迭代之前检查条件，如果条件为假，则循环体一次也不执行。do...while循环至少执行一次循环体，因为条件检查是在循环体执行之后进行的。
注意事项
- 在使用
do...while循环时，需要确保循环条件最终能够变为假，以避免无限循环。 - 同时，如果循环体内部有可能修改影响循环条件的变量，也需要特别注意循环的终止逻辑。
应用场景
do...while循环可以用于那些需要至少一次用户输入或处理的情况，例如：
- 在用户输入验证之前，程序需要至少显示一次提示信息。
- 此外，当循环的终止条件在循环开始时不可知时，
do...while循环也非常有用。
4. for...of 循环
for...of循环用于遍历可迭代对象的每一个元素。
基本语法：
for (变量 of 可迭代对象) {
// 使用变量
}示例：
// 遍历数组
const arr = [1, 2, 3, 4, 5];
for (const value of arr) {
console.log(value);
}
// 1
// 2
// 3
// 4
// 5
// 遍历字符串
const str = "hello";
for (const char of str) {
console.log(char);
}
// h
// e
// l
// l
// o
// 遍历Map
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
for (const [key, value] of map) {
console.log(key, value);
}
// a 1
// b 2
// c 3
// 遍历Set数值去重
const set = new Set([1, 2, 2, 3]);
for (const element of set) {
console.log(element);
}
// 1
// 2
// 3注意事项
for...of循环不适用于遍历普通对象的属性，除非对象实现了可迭代接口。- 在使用
for...of循环时，不需要担心数组索引或对象属性名，可以直接操作值。 - 如果尝试对一个非可迭代对象使用
for...of循环，会抛出TypeError。
应用场景
- 当需要遍历数组或字符串中的每个元素时，
for...of循环提供了一种清晰简洁的语法。 - 对于Map和Set等新的数据结构，
for...of循环是标准的遍历方式。 - 它可以与
break和continue语句一起使用，以控制循环的执行流程。 for...of循环不会遍历原型链上的属性，这使得它在处理数组时更加安全。
5. for...in 循环
for...in循环用于遍历对象的所有可枚举属性，包括继承自原型链的属性。
基本语法：
for (变量 in 对象) {
// 可以访问对象的属性
}示例：
const obj = {
name: 'Alice',
age: 25,
city: 'New York'
};
for (let key in obj) {
if (obj.hasOwnProperty(key)) { // 确保属性是对象自身的，而不是原型链上的
console.log(key + ': ' + obj[key]);
}
}
// name: Alice
// age: 25
// city: New York注意事项
- 使用
hasOwnProperty方法来检查属性是否是对象自身的，以避免遍历原型链上的属性。 for...in循环不适用于遍历数组，因为它会遍历数组索引作为属性名，而不是数组值。for...in循环的遍历顺序不是保证的，可能会根据不同的JavaScript引擎而变化。
与for...of循环的区别
for...of循环用于遍历可迭代对象的元素值，如数组、Map、Set等，而for...in循环用于遍历对象的属性名。for...of不会遍历原型链上的属性，且顺序是确定的，通常是数组索引的顺序。
6. forEach 方法
forEach方法是JavaScript数组的一个高阶函数，用于遍历数组中的每个元素。它接受一个回调函数作为参数，该回调函数会为数组中的每个元素执行一次。forEach方法不返回任何值，主要用于执行数组元素上的副作用操作，如打印、修改等。
基本语法
array.forEach(function(currentValue, index, array) {
// 循环体
}, thisArg);currentValue：当前遍历到的数组元素的值。index（可选）：当前遍历到的数组元素的索引。array（可选）：当前正在遍历的数组对象。thisArg（可选）：指定回调函数运行时的this关键字的值。
示例
const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
console.log(number);
});
// 1
// 2
// 3
// 4
// 5注意事项
- forEach方法不能使用break或continue来控制循环流程，因为它不提供这些控制语句的支持。
- 在forEach的回调函数中，不能修改数组的长度，但可以修改元素的值。
- 如果需要在循环中访问当前元素的索引，可以在回调函数中直接使用第二个参数index。
- forEach方法适用于执行数组元素上的操作，但如果需要在循环中根据条件跳过某些元素或提前结束循环，建议使用传统的for循环或for...of循环。
使用场景举例
假设你有一个博客数组，需要给每个博客对象添加一个status字段，表示该博客是否已发布，可以使用forEach如下：
let blogs = [
{ title: "js循环语句", time: "2021-05-06", id: 1 },
{ title: "js数据类型", time: "2022-09-05", id: 2 }
];
blogs.forEach(item => {
item.status = "已发布";
});
// {title: 'js循环语句', time: '2021-05-06', id: 1, status: '已发布'}
// {title: 'js数据类型', time: '2022-09-05', id: 2, status: '已发布'}