JavaScript 循环遍历方法总结
引言
JavaScript 提供了多种循环遍历数组、对象等数据结构的方法。掌握这些方法不仅能够帮助你写出更加高效、简洁的代码，还能让你更好地理解 JavaScript 的核心概念。本文将总结 JavaScript 中常见的循环遍历方法，并提供具体的使用示例。
1. for 循环
1.1 基本用法
for 循环是最常见的循环结构之一，适用于遍历已知长度的数组。
示例
遍历数组：
javascript
深色版本
1const numbers = [1, 2, 3, 4, 5];
2for (let i = 0; i < numbers.length; i++) {
3 console.log(numbers[i]);
4}1.2 遍历对象键值对
for 循环也可以用来遍历对象的属性。
示例
遍历对象的属性：
javascript
深色版本
1const person = { name: 'Alice', age: 30, city: 'New York' };
2for (const key in person) {
3 if (person.hasOwnProperty(key)) {
4 console.log(`${key}: ${person[key]}`);
5 }
6}2. while 循环
2.1 基本用法
while 循环会在条件为真时重复执行一段代码。
示例
遍历数组直到找到特定元素：
javascript
深色版本
1const numbers = [1, 2, 3, 4, 5];
2let index = 0;
3
4while (numbers[index] !== 3) {
5 index++;
6}
7
8console.log(`Found at index: ${index}`);3. do...while 循环
3.1 基本用法
do...while 循环至少会执行一次循环体，然后检查条件。
示例
遍历数组直到找到特定元素（至少执行一次）：
javascript
深色版本
1const numbers = [1, 2, 3, 4, 5];
2let index = 0;
3
4do {
5 index++;
6} while (numbers[index] !== 3 && index < numbers.length);
7
8console.log(`Found at index: ${index}`);4. forEach 方法
4.1 基本用法
forEach 方法是数组的一个方法，用于遍历数组中的每个元素。
示例
遍历数组并打印每个元素：
javascript
深色版本
1const numbers = [1, 2, 3, 4, 5];
2numbers.forEach(function (item) {
3 console.log(item);
4});4.2 使用箭头函数
forEach 通常与箭头函数一起使用，使代码更简洁。
示例
使用箭头函数遍历数组：
javascript
深色版本
1const numbers = [1, 2, 3, 4, 5];
2numbers.forEach(item => console.log(item));5. map 方法
5.1 基本用法
map 方法创建一个新数组，其结果是调用一个提供的函数处理原数组的每个元素。
示例
将数组中的每个元素乘以 2：
javascript
深色版本
1const numbers = [1, 2, 3, 4, 5];
2const doubled = numbers.map(x => x * 2);
3console.log(doubled); // 输出: [2, 4, 6, 8, 10]6. filter 方法
6.1 基本用法
filter 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。
示例
筛选数组中大于 2 的元素：
javascript
深色版本
1const numbers = [1, 2, 3, 4, 5];
2const filtered = numbers.filter(x => x > 2);
3console.log(filtered); // 输出: [3, 4, 5]7. reduce 方法
7.1 基本用法
reduce 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行)，将其结果汇总为单个返回值。
示例
计算数组中所有数字的总和：
javascript
深色版本
1const numbers = [1, 2, 3, 4, 5];
2const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
3console.log(sum); // 输出: 157.2 使用初始值
reduce 方法接受一个可选的初始值参数。
示例
计算数组中所有数字的乘积，并使用初始值 1：
javascript
深色版本
1const numbers = [1, 2, 3, 4, 5];
2const product = numbers.reduce((accumulator, currentValue) => accumulator * currentValue, 1);
3console.log(product); // 输出: 1208. for...of 循环
8.1 基本用法
for...of 循环可以直接迭代数组或类似数组的对象。
示例
遍历数组并打印每个元素：
javascript
深色版本
1const numbers = [1, 2, 3, 4, 5];
2for (const number of numbers) {
3 console.log(number);
4}8.2 遍历字符串
for...of 循环也可以用于遍历字符串。
示例
遍历字符串并打印每个字符：
javascript
深色版本
1const str = 'Hello, World!';
2for (const char of str) {
3 console.log(char);
4}9. for...in 循环
9.1 基本用法
for...in 循环用于遍历对象的可枚举属性。
示例
遍历对象的属性：
javascript
深色版本
1const person = { name: 'Alice', age: 30, city: 'New York' };
2for (const key in person) {
3 if (person.hasOwnProperty(key)) {
4 console.log(`${key}: ${person[key]}`);
5 }
6}10. 结语
通过本文的学习，你应该已经熟悉了 JavaScript 中常用的循环遍历方法。每种方法都有其适用场景，选择合适的方法可以使代码更加简洁、高效。如果你有任何疑问或需要进一步的帮助，请随时提问！