JavaScript 遍历数组

在 JavaScript 中，想要遍历数组的所有元素，最常用的方式有以下 3 种。

使用 for 循环。
使用 for...of 循环。
使用 forEach() 方法。

使用 for 循环遍历数组

在 JavaScript 中，遍历数组最常见的方式，就是使用 “for 循环” 来实现。

示例 1：使用 for 循环

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const colorArr = ["红", "橙", "黄", "绿", "蓝"];

        for (let i = 0; i < colorArr.length; i++) {
            console.log(colorArr[i]);
        }
    </script>
</body>
</html>

运行结果如下。

红
橙
黄
绿
蓝

使用 for...of 循环遍历数组

for...of 循环，是 ES6 中新引入的一种遍历数组的方法。

语法：

for (const element of array) {
    // 访问数组元素
}

说明：

for...of 循环与 for 循环类似，不过它语法更加简洁，这是因为它不需要手动管理循环计数器。

示例 2：使用 for...of 循环

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const colorArr = ["红", "橙", "黄", "绿", "蓝"];

        for (const color of colorArr) {
            console.log(color);
        }
    </script>
</body>
</html>

运行结果如下。

红
橙
黄
绿
蓝

使用 forEach() 遍历数组

forEach() 是 JavaScript 数组的一个方法，它用于遍历一个数组。forEach() 方法会为数组每个元素依次执行一次相同的函数。

语法：

arr.forEach(callbackFn, thisArg)

说明：

forEach() 方法可以接收 2 个参数。

callbackFn（必选）：是一个回调函数，所有数组元素都会依次执行该函数。
thisArg（可选）：回调函数中 this 指向的值，默认值为 undefined。该参数一般不需要手动设置。

callbackFn 这个回调函数的形式如下：

function (element, index, array) {
    ……
}

callbackFn 回调函数接收 3 个参数，说明如下。

element（必选）：表示当前处理的数组元素。
index（可选）：表示当前处理的元素下标。
array（可选）：表示当前数组对象（代表整个数组）。

注意: forEach() 方法有一个重要的特性：它无法中途停止循环。我们不能在 forEach 中使用 break 语句来强制跳出循环，也不能使用 continue。如果需要在满足条件时提前退出循环，我们应该使用 for 循环或 for...of 循环，或者使用 some() 方法或 every() 方法。

示例 3：forEach() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const arr = [3, 9, 1, 12, 50, 21];
        const result = [];

        arr.forEach(function (element) {
            if (element > 10) {
                result.push(element);
            }
        });

        console.log(result);
    </script>
</body>
</html>

运行结果如下。

[ 12, 50, 21 ]

分析：

forEach() 方法本质上是一个高阶函数。所谓的高阶函数，指的是一个函数的参数又是一个函数。在实际开发中，我们更推荐使用 “ES6 箭头函数” 的方式书写 forEach() 的回调函数。下面两种方式是等价的。

// 方式1：不使用箭头函数
arr.forEach(function (element) {
    if (element > 10) {
        result.push(element);
    }
});

// 方式2：使用箭头函数
arr.forEach((element) => {
    if (element > 10) {
        result.push(element);
    }
});

示例 4：forEach() 代替 for

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script>
        const arr = [3, 9, 1, 12, 50, 21];

        arr.forEach(function (element) {
            console.log(element);
        });
    </script>
</body>
</html>

运行结果如下。