JavaScript：循环与遍历

在JavaScript中，循环与遍历是编程过程中常见的操作，用于重复执行一段代码或访问集合中的每个元素。以下是JavaScript中常见的几种循环与遍历方法

循环

For

最通用的循环结构，可以用于任何需要重复执行代码的情况。
可以精确控制迭代次数和迭代变量（索引）。
适用于数组、字符串等线性数据结构的遍历。

let array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

For-of (ES6)

针对可迭代对象设计，如数组、Set、Map、生成器函数返回的迭代器等。
直接迭代值而非索引，简化了迭代过程。
不支持非可迭代对象或类数组对象的遍历。

let array = [1, 2, 3, 4, 5];

for (let item of array) {
  console.log(item);
}

For-in

主要用于遍历对象的可枚举属性，包括原型链上的属性（通过hasOwnProperty可以过滤掉原型链上的属性）。
不适用于数组遍历，因为数组的索引也会被视为属性被遍历，且顺序可能与预期不符。

let obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key + ': ' + obj[key]);
  }
}

While

区别：只要条件表达式为真，就会一直执行循环体。初始化和更新操作通常放在循环体内部。适合当循环次数未知，只知道需要持续执行直到满足某个条件为止的情况。

let counter = 0;
while (counter < 5) {
  console.log(counter);
  counter++;
}

Do-While

在 do-while 循环中，无论条件是否满足，循环体内的代码至少会被执行一次。

let counter = 0;
do {
  console.log(counter);
  counter++;
} while (counter < 5);

在这个例子中，即使一开始 counter 的值为 0（不满足条件），它仍然会先执行一次循环体，然后检查条件并决定是否继续下一次循环。与 while 循环相同，这里也会输出从 0 到 4 的数字。

注意以上for与while方法均支持break与continue

使用 break 语句可以立即退出整个循环，而 continue 语句则会跳过当前循环体剩余的代码，并进入下一次循环（如果条件满足）。

另外return，不仅结束循环还结束整个函数

数组遍历(不支持break与continue，return只是结束当前的回调函数执行)

Array.prototype.forEach()

数组方法，遍历数组中的每个元素并对其执行回调函数。
回调函数接收三个参数：当前元素值、元素索引和原数组本身。
无法使用break语句跳出循环，也无法在forEach内部直接return来结束整个循环。
在forEach回调函数内部的return只能用于提前结束当前的回调函数执行，而不是跳出整个forEach循环。
不会创建新的数组，而是直接操作原数组。

let array = [1, 2, 3, 4, 5];

array.forEach((item, index) => {
  console.log(item);
});

Array.prototype.map()

对数组中的每个元素应用一个函数，并返回一个新的数组，包含应用函数后的结果。

let numbers = [1, 2, 3, 4, 5];

let squaredNumbers = numbers.map(number => number * number);

console.log(squaredNumbers); // 输出: [1, 4, 9, 16, 25]

Array.prototype.filter()

根据提供的测试函数过滤数组元素，并返回通过测试的元素组成的新数组

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let evenNumbers = numbers.filter(number => number % 2 === 0);

console.log(evenNumbers); // 输出: [2, 4, 6, 8]

Array.prototype.reduce()

从左到右对数组的每个元素应用一个累积函数（累计器），将其结果与下一个元素结合，最后返回单个输出值。

let numbers = [1, 2, 3, 4, 5];

let sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
//这里的0就是accumulator的初始值。
//如果没有提供初始值，则reduce()会使用数组的第一个元素作为初始值，并从数组的第二个元素开始迭代。
console.log(sum); // 输出: 15

Array.prototype.find()

查找数组中满足给定测试函数的第一个元素，如果找到则返回该元素，否则返回 undefined。

let users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

let user = users.find(user => user.id === 2);
console.log(user); // 输出: { id: 2, name: 'Bob' }

对象遍历（配合forEach使用）

Object.keys(), values(), entries()

用于获取对象的键名、键值或键值对数组，之后可以配合forEach或其他迭代方法遍历。

let obj = { a: 1, b: 2, c: 3 };

Object.keys(obj).forEach(key => {
  console.log(key + ': ' + obj[key]);
});

Object.values(obj).forEach(value => {
  console.log(value);
});

Object.entries(obj).forEach(([key, value]) => {
  console.log(key + ': ' + value);
});