18种灵活用法！JS遍历技巧全面盘点了

踏入JS循环之旅，开启高效数据处理之门

在软件开发的广阔世界中，数据处理是重中之重。而循环遍历，作为处理数据的基本功，更是编程中不可或缺的利器。JavaScript（JS），作为一门强大而灵活的语言，为我们提供了丰富的循环遍历方法，满足不同数据结构和场景的需要。掌握这些方法，将让你如虎添翼，轻松驾驭数据大世界。

1. forEach()：让数组元素一一而过

forEach() 专为数组而生，它可以对数组中的每个元素执行指定的回调函数，从而进行遍历。它不仅使用起来简单直观，而且还能充分利用数组的特性。

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  console.log(number); // 输出：1 2 3 4 5
});

2. for...in：探寻对象属性的奥秘

for...in 适用于对象，它会遍历对象的属性并返回属性名称。有了它，你可以轻松获取对象的详细信息。

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

for (const key in person) {
  console.log(key); // 输出：name age city
}

3. for...of：遍历可迭代对象的利器

for...of 是遍历可迭代对象的绝佳选择。它可以遍历数组、字符串、Map、Set 等对象，返回元素值。它让遍历变得更加灵活和通用。

const fruits = ["apple", "banana", "orange"];
for (const fruit of fruits) {
  console.log(fruit); // 输出：apple banana orange
}

4. while：循环的起点，直到条件满足为止

while 循环是一个经典的控制结构，它在指定条件为真时执行指定的语句。它可以帮助你重复执行代码，直到达到预期的目标。

let count = 0;
while (count < 5) {
  console.log(count); // 输出：0 1 2 3 4
  count++;
}

5. do...while：确保至少执行一次

do...while 与 while 类似，但它有一个关键区别：它会在检查条件之前先执行一次指定的语句。这确保了即使条件不满足，也能执行一次代码。

let count = 0;
do {
  console.log(count); // 输出：0
  count++;
} while (count < 0);

6. Array.prototype.map()：映射数组元素，创造新数组

Array.prototype.map() 允许你对数组中的每个元素执行一个函数，并返回一个新数组，其中包含转换后的元素。它是一种将数组元素转换为新形式的便捷方法。

const numbers = [1, 2, 3, 4, 5];
const doubledNumbers = numbers.map((number) => number * 2);
console.log(doubledNumbers); // 输出：[2, 4, 6, 8, 10]

7. Array.prototype.filter()：筛选数组元素，只保留满足条件的

Array.prototype.filter() 允许你对数组中的每个元素执行一个函数，并返回一个新数组，其中只包含满足指定条件的元素。它是一种从数组中提取特定元素的强大工具。

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => number % 2 === 0);
console.log(evenNumbers); // 输出：[2, 4]

8. Array.prototype.reduce()：将数组元素归并，计算最终结果

Array.prototype.reduce() 允许你对数组中的每个元素执行一个函数，并累积一个最终值。它可以用于计算数组元素的和、平均值或其他聚合值。

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, number) => total + number, 0);
console.log(sum); // 输出：15

9. Array.prototype.some()：检查数组中是否存在满足条件的元素

Array.prototype.some() 允许你对数组中的每个元素执行一个函数，并检查是否至少有一个元素满足指定条件。它是一种快速确定数组中是否存在特定元素的简单方法。

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some((number) => number % 2 === 0);
console.log(hasEvenNumber); // 输出：true

10. Array.prototype.every()：检查数组中是否所有元素都满足条件

Array.prototype.every() 允许你对数组中的每个元素执行一个函数，并检查是否所有元素都满足指定条件。它是一种确定数组中所有元素是否都具有特定特征的可靠方法。

const numbers = [1, 2, 3, 4, 5];
const allEvenNumbers = numbers.every((number) => number % 2 === 0);
console.log(allEvenNumbers); // 输出：false

11. Array.prototype.find()：查找数组中第一个满足条件的元素

Array.prototype.find() 允许你对数组中的每个元素执行一个函数，并返回第一个满足指定条件的元素。它是一种快速从数组中找到特定元素的便捷方法。

const numbers = [1, 2, 3, 4, 5];
const firstEvenNumber = numbers.find((number) => number % 2 === 0);
console.log(firstEvenNumber); // 输出：2

12. Array.prototype.findIndex()：查找数组中第一个满足条件的元素的索引

Array.prototype.findIndex() 允许你对数组中的每个元素执行一个函数，并返回第一个满足指定条件的元素的索引。它是一种确定特定元素在数组中的位置的方便方法。

const numbers = [1, 2, 3, 4, 5];
const firstEvenNumberIndex = numbers.findIndex((number) => number % 2 === 0);
console.log(firstEvenNumberIndex); // 输出：1

13. for (const [key, value] of obj.entries())：遍历对象的键值对

for (const [key, value] of obj.entries()) 允许你遍历对象的键值对。它是一种访问对象属性和值的简洁且强大的方法。

const person = {
  name: "John",
  age: 30,
  city: "New York"
};

for (const [key, value] of Object.entries(person)) {
  console.log(key, value); 
  // 输出：
  // name John
  // age 30
  // city New York
}

14. for (const item of iterable)：遍历可迭代对象

for (const item of iterable) 允许你遍历可迭代对象，如数组、字符串、Map 和 Set。它是一种处理可迭代对象元素的通用方法。

const fruits = ["apple", "banana", "orange"];

for (const fruit of fruits) {
  console.log(fruit); 
  // 输出：
  // apple
  // banana
  // orange
}

15. Array.from()：将类数组对象转换为数组

Array.from() 允许你将类数组对象（如 NodeList 和 Arguments）转换为数组。它提供了一种将类数组对象转换为数组的便捷方法。

const nodeList = document.querySelectorAll("li");
const array = Array.from(nodeList);

console.log(array); 
// 输出：
// [<li>, <li>, <li>]

16. Set.prototype.forEach()：遍历 Set 对象

Set.prototype.forEach() 允许你遍历 Set 对象中的每个元素。它提供了一种处理 Set 对象元素的简单方法。

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

set.forEach((item) => {
  console.log(item); 
  // 输出：
  // 1
  // 2
  // 3
});

17. Map.prototype.forEach()：遍历 Map 对象

Map.prototype.forEach() 允许你遍历 Map 对象中的每个键值对。它提供了一种处理 Map 对象键值对的方便方法。

const map = new Map([
  ["name", "John"],
  ["age", 30],
  ["city", "New York"]
]);

map.forEach((value,