后台返回的JSON数据遍历全攻略
在现代Web开发中,前端与后端的数据交互几乎离不开JSON(JavaScript Object Notation)格式,后端接口返回的JSON数据往往包含复杂嵌套的结构,如何高效、安全地遍历这些数据,是前端开发者必须的核心技能,本文将从JSON的基础特性出发,结合JavaScript原生方法、循环语法及现代ES6+特性,系统介绍遍历后台返回JSON数据的多种方式,并附实用场景案例,助你轻松应对各种数据结构。
JSON数据结构:遍历前的“必修课”
要遍历JSON数据,首先要明确其结构特性,JSON本质上是键值对的集合,分为两种核心类型:
- 对象(Object):用 表示,键为字符串,值可以是任意JSON支持的类型(字符串、数字、布尔值、数组、对象或null)。
- 数组(Array):用
[]表示,元素可以是任意JSON支持的类型,元素通过索引(0,1,2...)访问。
后端返回的典型JSON数据可能如下:
{
"code": 200,
"message": "success",
"data": {
"userList": [
{
"id": 1,
"name": "张三",
"age": 25,
"hobbies": ["篮球", "编程"],
"address": {
"city": "北京",
"district": "朝阳区"
}
},
{
"id": 2,
"name": "李四",
"age": 30,
"hobbies": ["阅读", "旅行"],
"address": {
"city": "上海",
"district": "浦东新区"
}
}
],
"total": 2
}
}
遍历前需明确:目标数据是对象还是数组?是否需要处理嵌套结构? 基于这些信息,才能选择合适的遍历方法。
遍历JSON数据的“三大核心武器”
原生方法:for...in(遍历对象键)与 for...of(遍历数组值)
(1)for...in:遍历对象的“可枚举属性”
for...in 用于遍历对象的所有可枚举属性(包括原型链上的属性,需配合 hasOwnProperty 过滤),语法:
for (const key in object) {
if (object.hasOwnProperty(key)) { // 过滤掉原型链属性
const value = object[key];
console.log(key, value);
}
}
示例:遍历用户对象
const user = { id: 1, name: "张三", age: 25 };
for (const key in user) {
if (user.hasOwnProperty(key)) {
console.log(`${key}: ${user[key]}`); // 输出: id: 1, name: 张三, age: 25
}
}
注意:for...in 不适合遍历数组(遍历的是索引,且顺序可能不是数字顺序),更适合遍历对象键。
(2)for...of:遍历数组/类数组的“元素值”
for...of 用于遍历可迭代对象(数组、字符串、Map、Set等),直接获取元素的值,无需索引,语法:
for (const value of array) {
console.log(value);
}
示例:遍历用户列表
const userList = [
{ id: 1, name: "张三" },
{ id: 2, name: "李四" }
];
for (const user of userList) {
console.log(user.name); // 输出: 张三, 李四
}
优势:语法简洁,直接访问元素值,无需手动管理索引。
高阶函数:函数式遍历,代码更简洁
对于数组或对象,JavaScript提供了多个高阶函数,支持函数式遍历,代码更简洁、可读性更强。
(1)数组遍历:forEach、map、filter、reduce
-
forEach:基础遍历,无返回值
遍历数组每个元素,执行回调函数,适合“仅遍历不返回”的场景。const hobbiesList = ["篮球", "编程", "阅读"]; hobbiesList.forEach(hobby => { console.log(`爱好: ${hobby}`); // 输出: 爱好: 篮球, 爱好: 编程, 爱好: 阅读 }); -
map:映射新数组,保留原数组
遍历数组并返回一个新数组,新数组元素为回调函数的返回值,适合“数据转换”场景(如提取某个字段)。const userList = [{ id: 1, name: "张三" }, { id: 2, name: "李四" }]; const names = userList.map(user => user.name); console.log(names); // 输出: ["张三", "李四"] -
filter:过滤数组,返回符合条件的元素
遍历数组并返回一个新数组,仅保留回调函数返回true的元素,适合“数据筛选”场景(如筛选成年用户)。const users = [{ id: 1, name: "张三", age: 25 }, { id: 2, name: "李四", age: 16 }]; const adults = users.filter(user => user.age >= 18); console.log(adults); // 输出: [{ id: 1, name: "张三", age: 25 }] -
reduce:累计计算,返回最终值
遍历数组并累计计算,返回一个最终值(如求和、统计数量),适合“聚合操作”场景。const scores = [85, 90, 78, 92]; const total = scores.reduce((sum, score) => sum + score, 0); console.log(total); // 输出: 345
(2)对象遍历:Object.keys()、Object.values()、Object.entries()
ES6提供了3个静态方法,可将对象转换为数组,再结合高阶函数遍历:
-
Object.keys(obj):返回对象所有键的数组const user = { id: 1, name: "张三", age: 25 }; const keys = Object.keys(user); console.log(keys); // 输出: ["id", "name", "age"] keys.forEach(key => console.log(`${key}: ${user[key]}`)); -
Object.values(obj):返回对象所有值的数组const values = Object.values(user); console.log(values); // 输出: [1, "张三", 25]
-
Object.entries(obj):返回键值对数组([key, value])
最灵活的方式,可直接遍历键值对:Object.entries(user).forEach(([key, value]) => { console.log(`${key}: ${value}`); // 输出: id: 1, name: 张三, age: 25 });
递归:处理“无限嵌套”的JSON
当JSON数据存在多层嵌套(如对象中嵌套数组、数组中嵌套对象)时,普通循环难以遍历所有层级,此时需使用递归,递归的核心思想是:函数调用自身,直到遍历到最内层的基本类型(字符串、数字、布尔值等)。
示例:递归遍历嵌套JSON,提取所有值
function deepTraverse(obj) {
let result = [];
// 判断是否为对象或数组(需遍历的类型)
if (typeof obj === 'object' && obj !== null) {
// 如果是数组,用for...of遍历
if (Array.isArray(obj)) {
for (const item of obj) {
result = result.concat(deepTraverse(item)); // 递归处理数组元素
}
}
// 如果是对象,用Object.entries遍历
else {
for (const [key, value] of Object.entries(obj)) {
result.push(key); // 可选:将键也加入结果
result = result.concat(deepTraverse(value)); // 递归处理对象值
}
}
}
// 如果是基本类型,直接加入结果
else {
result.push(obj);
}
return result;
}
// 测试嵌套JSON
const nestedData = {
a: 1


还没有评论,来说两句吧...