JavaScript 循环语句

1. for 循环

for循环是最常用的循环结构之一，它适合在循环开始前就知道循环次数的情况。

基本语法

for (初始化表达式; 条件表达式; 迭代后表达式) {
  // 循环体
  // 这里的代码会在每次迭代时执行
}

如何工作

1. 初始化：首先执行初始化表达式，通常用来设置循环控制变量。
2. 条件测试：然后，程序检查条件表达式是否为真（即，是否返回true）。
3. 执行循环体：如果条件为真，执行循环体内的代码。
4. 迭代后表达式：执行完循环体后，执行迭代后表达式，通常用于更新循环控制变量。
5. 重复测试和执行：再次检查条件表达式，如果条件仍为真，重复步骤3和4。一旦条件变为假，循环终止。

示例

for (let i = 0; i < 5; i++) {
  console.log(i);
}

// 输出：
// 0
// 1
// 2
// 3
// 4

注意事项

• 初始化表达式、条件表达式和迭代后表达式是可选的，但圆括号是必需的。
• 确保条件表达式最终会变为假，否则将导致无限循环。
• 迭代后表达式通常用于更新循环控制变量。

应用场景

for循环广泛应用于各种场景，例如：

• 遍历数组或列表中的每个元素。
• 执行固定次数的计算或操作。
• 在已知的迭代次数下处理数据。

for循环的结构使其非常适合处理已知大小的集合，如数组或列表，以及需要精确控制迭代次数的场景。

2. while 循环

while循环在条件为真时执行循环体，直到条件不再满足。

基本语法

while (条件表达式) {
  // 循环体
  // 这里的代码会在每次循环时执行
}

如何工作

1. 条件检查：在执行任何循环体内的代码之前，判断条件是否成立。
2. 执行循环体：如果条件成立，则立即执行循环体中的代码。
3. 再次检查条件：执行完循环体中的代码后，再修改变量的值，然后将修改后的值再带入到条件中。
4. 重复执行：再次判断条件是否成立，如果成立则继续执行循环体中的代码。

5. 结束循环：只要条件不成立，那么循环体中的代码不会执行。

示例

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); // 仍然会打印一次5

do...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(item, index, self) {});

// ES6写法
array.forEach((item, index, self) => {});

• item：表示数组中的每一项。
• index：表示数组的每一项的索引，这个形参可选。
• self：表示当前遍历的这个数组，这个形参可选。

示例

const numbers = [1, 2, 3, 4, 5];
numbers.forEach(item=> console.log(item));
// 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: '已发布'}