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

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

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

解决方案

1. 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引擎的实现。如果对顺序有严格要求，这种方法就不太合适了。

2. 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() 返回的是一个数组，可以方便地进行各种数组操作。

3. Object.entries()：键值对数组，更简洁

   Object.entries() 方法会返回一个包含对象所有自身可枚举属性的键值对数组。每个键值对都是一个数组，第一个元素是键名，第二个元素是键值。

   

   ModelGate

   一站式AI模型管理与调用工具

   下载

   const myJson = {
     "name": "Alice",
     "age": 30,
     "city": "New York"
   };
   
   Object.entries(myJson).forEach(([key, value]) => {
     console.log(`Key: ${key}, Value: ${value}`);
   });

   这种方式最简洁，可以直接拿到键名和键值，避免了通过键名再去对象里取值的步骤。而且，它也保证了遍历的顺序和对象属性定义的顺序一致。

4. 递归遍历：处理嵌套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);

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

如何选择合适的遍历方法？

选择哪种遍历方法，取决于你的具体需求。如果只是简单地遍历对象自身的属性，Object.keys() 或者 Object.entries() 是不错的选择，它们更简洁，而且保证了遍历顺序。如果需要处理嵌套的JSON对象，那么递归遍历是唯一的选择。

性能考虑：哪种遍历方式更快？

理论上，for...in 循环的性能可能略低于 Object.keys() 和 Object.entries()，因为它需要检查原型链上的属性。但是，在实际应用中，这种性能差异通常可以忽略不计。更重要的是选择适合你需求的遍历方式，而不是过度关注性能。

兼容性问题：老版本浏览器怎么办？

Object.keys() 和 Object.entries() 是ES6新增的方法，在一些老版本的浏览器中可能不支持。如果需要兼容这些浏览器，可以使用polyfill。例如，可以使用 babel-polyfill 或者手动实现这两个方法。

如何避免遍历过程中修改JSON对象？

在遍历JSON对象时，如果修改了对象本身的结构，可能会导致一些意想不到的问题。例如，如果在 for...in 循环中删除了一个属性，那么循环可能会跳过一些属性。为了避免这种情况，最好在遍历之前先复制一份JSON对象，然后在副本上进行修改。