js如何遍历JSON对象 JSON对象遍历的4种实用方案-js教程-PHP中文网

js如何遍历JSON对象 JSON对象遍历的4种实用方案

冰火之心

发布： 2025-06-22 18:39:02

原创

665人浏览过

遍历json对象的方法有四种：1.for...in循环结合hasownproperty()可遍历自身属性，但顺序不确定；2.object.keys()返回键名数组，确保顺序一致并支持数组操作；3.object.entries()返回键值对数组，简洁且顺序一致；4.递归遍历用于处理嵌套对象，但需注意栈溢出风险。应根据是否需兼容老浏览器、是否要求顺序、是否存在嵌套结构等场景选择合适方法。性能差异通常可忽略，兼容性问题可通过polyfill解决，修改对象时建议操作副本以避免异常。

js如何遍历JSON对象 JSON对象遍历的4种实用方案

JSON对象遍历，简单来说，就是把JSON对象里的每个键值对都走一遍。这事儿听起来简单，但实际应用场景五花八门，所以掌握几种不同的遍历方式还是很有必要的。

解决方案

for...in 循环：最基础，也最常用

这是JavaScript里最经典的遍历对象的方式。它会遍历对象所有可枚举的属性，包括从原型链上继承来的。但通常我们只关心对象自身的属性，所以需要加上 hasOwnProperty() 方法来过滤。
```
const myJson = {
  "name": "Alice",
  "age": 30,
  "city": "New York"
};

for (let key in myJson) {
  if (myJson.hasOwnProperty(key)) {
    console.log(`Key: ${key}, Value: ${myJson[key]}`);
  }
}
```
登录后复制
这里需要注意的是，for...in 循环的顺序是不确定的，取决于JavaScript引擎的实现。如果对顺序有严格要求，这种方法就不太合适了。
Object.keys()：获取键名数组，再遍历

Object.keys() 方法会返回一个包含对象所有自身可枚举属性键名的数组。然后，我们就可以用普通的 for 循环或者 forEach 方法来遍历这个数组。
```
const myJson = {
  "name": "Alice",
  "age": 30,
  "city": "New York"
};

Object.keys(myJson).forEach(key => {
  console.log(`Key: ${key}, Value: ${myJson[key]}`);
});
```
登录后复制
这种方式的好处是，可以保证遍历的顺序和对象属性定义的顺序一致（在大多数现代浏览器中）。而且，Object.keys() 返回的是一个数组，可以方便地进行各种数组操作。
Object.entries()：键值对数组，更简洁

Object.entries() 方法会返回一个包含对象所有自身可枚举属性的键值对数组。每个键值对都是一个数组，第一个元素是键名，第二个元素是键值。
```
const myJson = {
  "name": "Alice",
  "age": 30,
  "city": "New York"
};

Object.entries(myJson).forEach(([key, value]) => {
  console.log(`Key: ${key}, Value: ${value}`);
});
```
登录后复制
这种方式最简洁，可以直接拿到键名和键值，避免了通过键名再去对象里取值的步骤。而且，它也保证了遍历的顺序和对象属性定义的顺序一致。

递归遍历：处理嵌套JSON

如果JSON对象里嵌套了其他的JSON对象或者数组，那么就需要用到递归遍历了。

function traverseJson(obj) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      const value = obj[key];
      console.log(`Key: ${key}, Value: ${value}`);

      if (typeof value === 'object' && value !== null) {
        traverseJson(value); // 递归调用
      }
    }
  }
}

const nestedJson = {
  "name": "Alice",
  "address": {
    "street": "123 Main St",
    "city": "New York"
  }
};

traverseJson(nestedJson);

登录后复制

递归遍历的核心思想是，如果当前的值还是一个对象，就再次调用遍历函数来处理它。需要注意的是，递归深度太深可能会导致栈溢出，所以要谨慎使用。