js如何遍历JSON对象 JSON对象遍历的4种实用方案-小浪学习网

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

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

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

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

解决方案

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);

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