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); // 输出: 15

7.2 使用初始值

reduce 方法接受一个可选的初始值参数。

示例

计算数组中所有数字的乘积，并使用初始值 1：

javascript

深色版本

1const numbers = [1, 2, 3, 4, 5];
2const product = numbers.reduce((accumulator, currentValue) => accumulator * currentValue, 1);
3console.log(product); // 输出: 120

8. 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 中常用的循环遍历方法。每种方法都有其适用场景，选择合适的方法可以使代码更加简洁、高效。如果你有任何疑问或需要进一步的帮助，请随时提问！