如何在JavaScript中遍历JSON？寻求与PHP等效的循环实现方法

嘿，刚好我对PHP和JS的JSON遍历逻辑都熟，这就给你把PHP里的操作对应到JavaScript里～

首先，不管是PHP还是JS，第一步都是把JSON字符串解析成可操作的数据结构：

• PHP用 json_decode() 把JSON转成对象或数组
• JavaScript用 JSON.parse() 把JSON转成对象或数组

接下来分两种常见场景给你对比示例：

1. 遍历JSON解析后的对象 #

PHP 示例 #

假设你之前在PHP里是这么遍历对象的：

$jsonStr = '{"username": "john_doe", "email": "john@example.com", "role": "admin"}';
$userData = json_decode($jsonStr);

foreach ($userData as $key => $value) {
    echo "{$key}: {$value}\n";
}

JavaScript 等效实现 #

在JS里，你可以用 for...in 循环（记得加hasOwnProperty避免遍历原型链上的属性），或者更简洁的Object.entries（ES6+）：

方法一：for...in 循环

const jsonStr = '{"username": "john_doe", "email": "john@example.com", "role": "admin"}';
const userData = JSON.parse(jsonStr);

for (const key in userData) {
    // 确保只遍历对象自身的属性，跳过原型链上的继承属性
    if (userData.hasOwnProperty(key)) {
        console.log(`${key}: ${userData[key]}`);
    }
}

方法二：Object.entries + for...of（更推荐）

ES6之后可以用Object.entries直接拿到键值对数组，遍历起来更清爽：

for (const [key, value] of Object.entries(userData)) {
    console.log(`${key}: ${value}`);
}

2. 遍历JSON解析后的数组 #

PHP 示例 #

如果是遍历JSON数组，PHP里通常这么写：

$jsonArrayStr = '["JavaScript", "PHP", "Python", "Java"]';
$langs = json_decode($jsonArrayStr);

foreach ($langs as $index => $lang) {
    echo "索引 {$index}: {$lang}\n";
}

JavaScript 等效实现 #

JS里遍历数组的方式更多，比如forEach、for...of或者普通的for循环：

方法一：forEach 方法

最常用的数组遍历方法，自带索引和元素参数：

const jsonArrayStr = '["JavaScript", "PHP", "Python", "Java"]';
const langs = JSON.parse(jsonArrayStr);

langs.forEach((lang, index) => {
    console.log(`索引 ${index}: ${lang}`);
});

方法二：for...of 循环

如果需要中断循环（比如用break），for...of比forEach更灵活：

for (const [index, lang] of langs.entries()) {
    console.log(`索引 ${index}: ${lang}`);
    // 可以随时用break终止循环
    if (lang === "PHP") break;
}

方法三：普通for循环

如果需要兼容旧环境，普通for循环是最稳妥的：

for (let i = 0; i < langs.length; i++) {
    console.log(`索引 ${i}: ${langs[i]}`);
}

内容的提问来源于stack exchange，提问作者user9646331