遍历 JSON 数组的 for 循环语法详解

在前端开发中，我们经常需要遍历 JSON 数据。而对于 JSON 数组，我们通常使用 for 循环来进行遍历操作。本文将详细介绍 for 循环语法以及一些实用技巧。

for 循环的基本语法

for 循环是 JavaScript 中最基础、最常用的循环语句之一。它的语法格式如下：

for (初始化表达式; 条件表达式; 递增表达式) {
    // 循环体
}

其中，初始化表达式只会在循环开始执行时被执行一次；条件表达式会在每次循环开始时被计算，如果计算结果为 true，则执行循环体；递增表达式会在循环体执行完毕后被执行。

在遍历 JSON 数组时，我们通常使用 for 循环的几种形式：

第一种形式：使用 length 属性遍历数组

这种形式比较直接，也是最为常见的方式。示例如下：

const arr = [1, 2, 3];
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

第二种形式：使用 for...in 遍历对象属性

这种方式可以用于遍历对象属性，但不建议用于遍历数组。因为 for...in 会遍历对象的所有可枚举属性，包括原型链上的属性，而且不一定按照插入顺序访问元素。示例如下：

const arr = [1, 2, 3];
for (let i in arr) {
    console.log(arr[i]);
}

第三种形式：使用 for...of 遍历数组元素

这种方式可以用于遍历数组元素，也是 ES6 中新增的语法。示例如下：

const arr = [1, 2, 3];
for (let item of arr) {
    console.log(item);
}

遍历 JSON 数组的实用技巧

使用 forEach 方法代替 for 循环

在 ES5 中，我们可以使用 Array.prototype.forEach() 方法来遍历数组。它比 for 循环更简洁、易读，特别适合用于遍历大量数据。示例如下：

const arr = [1, 2, 3];
arr.forEach((item, index) => {
    console.log(`${index}: ${item}`);
});

使用解构语法获取数组元素

在 ES6 中，我们可以使用解构语法来获取数组的元素，使代码更加简洁优雅。示例如下：

const arr = [{name: 'Tom', age: 18}, {name: 'Jack', age: 20}];
for (let { name, age } of arr) {
    console.log(`My name is ${name}, and I am ${age} years old.`);
}

结合条件语句实现条件遍历

我们可以在循环体内部结合条件语句来实现条件遍历，例如只遍历数组中的偶数元素。示例如下：

const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 === 0) {
        console.log(arr[i]);
    }
}

结合 break 和 continue 实现跳出循环

我们可以在循环体内部结合 break 和 continue 来实现跳出循环、继续下一次循环的操作。示例如下：

-- -------------------- ---- -------
----- --- - --- -- -- -- ---
--- ---- - - -- - - ----------- ---- -
    -- ------- --- -- -
        ------
    -
    -- ------- --- -

- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------