json怎么遍历取值

JSON遍历取值完全指南：从基础到进阶

在Web开发和数据处理中,JSON（JavaScript Object Notation）因其轻量级、易读易写的特性，已成为数据交换的主流格式，无论是从API接口获取数据，还是处理配置文件，我们经常需要遍历JSON结构并提取所需值，本文将详细介绍JSON遍历取值的多种方法，从基础的JavaScript原生操作到现代框架的高级用法，助你轻松驾驭JSON数据处理。

JSON基础：理解数据结构

在遍历之前,我们先简单回顾一下JSON的基本结构，JSON数据主要由两种结构组成：

对象（Object）：使用花括号包裹，由键值对组成，如 {"name": "张三", "age": 30}
数组（Array）：使用方括号 [] 包裹，由有序值列表组成，如 [{"name": "李四"}, {"name": "王五"}]

实际应用中,这两种结构常常嵌套使用，形成复杂的数据层级。

JavaScript原生遍历方法

遍历对象

对于JSON对象,可以使用以下几种方式遍历：

a. for...in 循环

const jsonObj = {"name": "张三", "age": 30, "city": "北京"};
for (let key in jsonObj) {
    if (jsonObj.hasOwnProperty(key)) {
        console.log(key + ": " + jsonObj[key]);
    }
}

b. Object.keys() + forEach

const jsonObj = {"name": "张三", "age": 30, "city": "北京"};
Object.keys(jsonObj).forEach(key => {
    console.log(key + ": " + jsonObj[key]);
});

c. Object.entries() + for...of

const jsonObj = {"name": "张三", "age": 30, "city": "北京"};
for (const [key, value] of Object.entries(jsonObj)) {
    console.log(`${key}: ${value}`);
}

遍历数组

对于JSON数组,标准的数组方法同样适用：

a. for 循环

const jsonArr = [{"name": "李四"}, {"name": "王五"}, {"name": "赵六"}];
for (let i = 0; i < jsonArr.length; i++) {
    console.log(jsonArr[i].name);
}

b. forEach 方法

const jsonArr = [{"name": "李四"}, {"name": "王五"}, {"name": "赵六"}];
jsonArr.forEach(item => {
    console.log(item.name);
});

c. for...of 循环

const jsonArr = [{"name": "李四"}, {"name": "王五"}, {"name": "赵六"}];
for (const item of jsonArr) {
    console.log(item.name);
}

嵌套JSON的深度遍历

当JSON结构嵌套多层时,通常需要递归或迭代方法进行深度遍历：

递归示例

function deepTraverse(obj) {
    for (let key in obj) {
        if (typeof obj[key] === 'object' && obj[key] !== null) {
            deepTraverse(obj[key]);
        } else {
            console.log(key + ": " + obj[key]);
        }
    }
}
const nestedJson = {
    "name": "测试",
    "info": {
        "age": 25,
        "contact": {
            "email": "test@example.com",
            "phone": "1234567890"
        }
    }
};
deepTraverse(nestedJson);

现代JavaScript的JSON处理技巧

使用JSON.parse()解析JSON字符串

从API或文件获取的JSON通常是字符串形式,需要先解析：

const jsonString = '{"name": "张三", "age": 30}';
const jsonObj = JSON.parse(jsonString);
console.log(jsonObj.name); // 输出: 张三

可选链操作符（?.）和空值合并运算符（??）

ES2020引入的新特性让深层属性访问更安全：

const user = {
    name: "张三",
    address: {
        city: "北京",
        street: null
    }
};
// 可选链避免TypeError
console.log(user.address?.city); // 输出: 北京
console.log(user.address?.street?.name); // 输出: undefined
// 空值合并提供默认值
console.log(user.address?.street ?? "未填写"); // 输出: 未填写

使用Object.values()和Object.entries()

const user = {name: "张三", age: 30};
console.log(Object.values(user)); // 输出: ["张三", 30]
console.log(Object.entries(user)); // 输出: [["name", "张三"], ["age", 30]]

实战案例：从复杂JSON中提取数据

假设我们有以下复杂的JSON数据：

const apiData = {
    "status": "success",
    "data": {
        "users": [
            {
                "id": 1,
                "name": "张三",
                "roles": ["admin", "editor"],
                "profile": {
                    "age": 28,
                    "email": "zhangsan@example.com"
                }
            },
            {
                "id": 2,
                "name": "李四",
                "roles": ["user"],
                "profile": {
                    "age": 25,
                    "email": "lisi@example.com"
                }
            }
        ],
        "total": 2
    }
};

提取所有用户的姓名和邮箱：

apiData.data.users.forEach(user => {
    console.log(`姓名: ${user.name}, 邮箱: ${user.profile.email}`);
});

查找特定角色的用户：

const adminUsers = apiData.data.users.filter(user => 
    user.roles.includes('admin')
);
console.log(adminUsers); // 输出张三的信息

获取所有角色列表（去重）：

const allRoles = [...new Set(apiData.data.users.flatMap(user => user.roles))];
console.log(allRoles); // 输出: ["admin", "editor", "user"]

常见错误与注意事项

未解析JSON字符串：直接遍历JSON字符串会导致错误，务必先用JSON.parse()解析
属性访问不存在：使用可选链避免"Cannot read property 'xxx' of undefined"错误
循环引用：JSON本身不支持循环引用，但处理时要小心避免无限递归
类型判断：使用typeof或Array.isArray()准确判断数据类型
性能考虑：对于大型JSON，优先使用循环而非递归，避免堆栈溢出

JSON遍历取值是开发中的基础技能,不同场景下的处理方法能极大提升效率，从基础的for...in和forEach，到现代ES6+的语法糖，再到递归处理复杂嵌套结构，每种方法都有其适用场景，在实际开发中，应根据数据结构复杂度、性能需求和代码可读性选择合适的遍历方式，随着JavaScript的不断发展，如可选链、空值合并等新特性让JSON处理变得更加简洁和安全，希望本文能帮助你更好地理解和应用JSON遍历取值的各种技巧。