浏览器里不可不知的JS for循环

掌握 JavaScript 循环，驾驭数据处理的奥秘

概述

在 JavaScript 的浩瀚世界中，循环是不可或缺的利器，它赋予开发者处理数据、遍历数组和对象等任务的能力。从 for of 到 forEach，再到 map、every、reduce 和 set，掌握这些循环技巧将让你在编程世界中所向披靡。

for of：轻松遍历可迭代对象

想象你正在整理一叠书，你需要逐个检查它们的标题。for of 就像一个魔法棒，它允许你轻松地遍历任何可迭代对象，包括数组、字符串和 Set 集合。只需使用 for (const item of array) { ... } 语法，你就可以遍历每个元素，仿佛它们整齐地排列在你的面前。

const books = ['The Iliad', 'The Odyssey', 'Ulysses'];

for (const book of books) {
  console.log(`Time to read: ${book}!`);
}

forEach：简洁高效的遍历利器

forEach 就像一个更轻巧、更快速的 for of。它接受一个回调函数，让你可以对每个元素进行自定义的操作。想象一下你正在洗衣服，你需要将每件衣服都放进洗衣机。forEach 就像一个勤奋的小助手，它会遍历数组中的每一件衣服，并按照你的指令将它们放进洗衣机。

const laundry = ['shirts', 'pants', 'socks'];

laundry.forEach((item) => {
  console.log(`Washing: ${item}`);
});

map：数据转化的魔法师

有时候，你需要将数据转换成新的格式，就像将温度从华氏度转换成摄氏度。map 就像一个炼金术士，它可以将数组中的每个元素转化为一个新值，并返回一个全新的数组。只需使用 array.map((item, index, array) => { ... }) 语法，你就可以进行数据转换，仿佛它们是黏土，任你塑形。

const temperatures = [32, 50, 70];

const celsius = temperatures.map((temp) => {
  return (temp - 32) * 5 / 9;
});

every：检查条件的严苛裁判

想象你是一名考官，需要检查学生的试卷是否都及格。every 就像一位严厉的裁判，它会检查数组中的每个元素是否都满足某个条件。如果所有元素都通过考验，every 会宣布 "全部通过"，否则就会发出 "不及格" 的判决。

const scores = [75, 80, 90];

const allPassed = scores.every((score) => {
  return score >= 70;
});

reduce：从分散到统一

有时候，你希望将数组中的所有元素聚合在一起，就像将散落在地上的碎片拼成一个完整的花瓶。reduce 就充当了拼图大师的角色，它将数组中的每个元素累积成一个单一的值，仿佛它们是一块块拼图，最终拼成一个统一的杰作。

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

const sum = numbers.reduce((accumulator, number) => {
  return accumulator + number;
}, 0);

set：独一无二的元素集合

想象你正在整理一个收藏品，其中有一些重复的物品。set 就像一个精明的收藏家，它只允许独一无二的元素存在，就像珍贵的邮票或罕见的漫画书一样。使用 new Set([iterable]) 语法，你可以创建一个 set 集合，并利用它的 add、delete 和 has 等方法，管理和查询其中的元素。

const uniqueItems = new Set([1, 2, 3, 1, 2]);

console.log(uniqueItems.size); // 输出：3

结论：无限可能的数据处理

通过掌握这些循环技巧，你将解锁 JavaScript 循环世界的无限可能，就像一位熟练的园丁修剪树枝，塑造植物的形状一样。从简单的遍历到复杂的数据转换，这些循环方法将让你在编程世界中游刃有余，轻松处理各种数据任务。

常见问题解答

1. 如何使用循环遍历多维数组？

你可以使用嵌套循环或递归来遍历多维数组。

2. 我可以使用循环来查找数组中的最大值吗？

是的，你可以使用 reduce 或 Math.max() 来查找数组中的最大值。

3. 循环可以同时修改数组和返回新数组吗？

map 会返回一个新数组，而 forEach 会直接修改原始数组。

4. 我可以在循环中使用 break 或 continue 语句吗？

是的，你可以使用 break 或 continue 语句来控制循环的行为。

5. 如何对对象使用循环？

可以使用 Object.keys()、Object.values() 或 Object.entries() 来对对象进行循环。