在前端开发中，我们经常需要处理 JSON 数据。而遍历 JSON 对象以获取其数据是非常基础且重要的操作之一。下面我们将介绍几种遍历 JSON 对象以获取其数据的方法。
方法一：for...in 循环遍历
for...in 循环可以用于遍历对象的属性。对于 JSON 对象，我们可以将其转换为 JavaScript 对象后使用 for...in 循环来遍历其属性和值：
const json = '{"name":"Alice","age":20,"city":"New York"}';
const obj = JSON.parse(json);
for (let key in obj) {
console.log(`${key}: ${obj[key]}`);
}输出结果为：
name: Alice age: 20 city: New York
这种方法简单易懂，但存在一个问题：for...in 循环会遍历原型链上的属性，因此可能会遍历到不期望的属性。因此，在使用 for...in 循环遍历时应该加上 hasOwnProperty 判断，只遍历对象自身拥有的属性。
方法二：forEach() 方法
Array.prototype.forEach() 方法可以用于遍历数组，但也可以用于遍历 JSON 对象的属性和值。对于 JSON 对象，我们需要先将其转化为数组，然后使用 forEach() 方法遍历数组元素：
const json = '{"name":"Alice","age":20,"city":"New York"}';
const arr = Object.entries(JSON.parse(json)); // 将 JSON 对象转化为数组
arr.forEach(([key, value]) => {
console.log(`${key}: ${value}`);
});输出结果同上。
使用 forEach() 方法遍历的好处在于可以直接对每个元素进行操作，例如修改属性值。
方法三：递归遍历
对于嵌套的 JSON 对象，我们可以使用递归方法来遍历其所有的属性和值：
-- -------------------- ---- -------
----- ---- - ----------------------------------------------- -------------------------------------
-------- ------------- -
--- ---- --- -- ---- -
-- ------- -------- --- --------- -
------------------- -- ----
- ---- -
-------------------- --------------
-
-
-
---------------------------输出结果为：
name: Alice age: 20 city: New York 0: reading 1: music
递归遍历可以遍历任意深度的 JSON 对象，但需要注意避免死循环。
综上所述，以上三种方法可以灵活地应用于不同场景的遍历需求。在实际开发中，应根据具体情况选择最合适的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/913