JavaScript 遍历 JSON 数据的全面指南
在 Web 开发中,JSON(JavaScript Object Notation)作为一种轻量级的数据交换格式,因其易读性和与 JavaScript 的天然兼容性而被广泛使用,无论是从服务器获取的 API 响应,还是本地存储的配置文件,数据常以 JSON 格式存在,而遍历 JSON 数据是处理这些数据的核心操作——提取所需信息、转换数据结构、渲染到页面等都离不开它,本文将详细介绍 JavaScript 中遍历 JSON 数据的各种方法,从基础到进阶,并附上实用示例,助你不同场景下的最佳实践。
JSON 数据的基础:对象与数组
在开始遍历前,需明确 JSON 数据的两种核心结构:对象(Object)和数组(Array)。
- 对象:用 表示,键值对形式存储数据,键必须是字符串(可省略引号),值可以是任意类型(字符串、数字、布尔值、数组、对象等)。
{ "name": "张三", "age": 25, "isStudent": false, "courses": ["数学", "英语"], "address": { "city": "北京", "district": "朝阳区" } } - 数组:用
[]表示,按顺序存储值的集合,值可以是任意类型(包括对象或数组)。[ {"id": 1, "name": "商品A", "price": 100}, {"id": 2, "name": "商品B", "price": 200}, {"id": 3, "name": "商品C", "price": 150} ]
遍历的核心思路是:针对对象,遍历其键;针对数组,遍历其索引或元素,下面结合具体方法展开说明。
遍历 JSON 对象的 4 种常用方法
JSON 对本质上是 JavaScript 的 Object 类型,遍历对象主要关注其“键值对”,以下是 4 种常用方法,各有适用场景。
for...in 循环:遍历对象的可枚举属性
for...in 是专门用于遍历对象 enumerable(可枚举)属性的循环方式,会遍历对象自身及从原型链继承的可枚举属性(需注意过滤继承属性)。
语法:
for (const key in object) {
if (object.hasOwnProperty(key)) { // 过滤继承属性(推荐)
// 处理 key 和 object[key]
}
}
示例:
假设有如下 JSON 对象(存储用户信息):
const user = {
"name": "张三",
"age": 25,
"isStudent": false,
"courses": ["数学", "英语"],
"address": {
"city": "北京",
"district": "朝阳区"
}
};
遍历对象并打印键值对:
for (const key in user) {
if (user.hasOwnProperty(key)) { // 确保只遍历对象自身的属性
console.log(`键: ${key}, 值:`, user[key]);
}
}
输出:
键: name, 值: 张三
键: age, 值: 25
键: isStudent, 值: false
键: courses, 值: ["数学", "英语"]
键: address, 值: {city: "北京", district: "朝阳区"}
注意事项:
for...in遍历顺序可能因 JavaScript 引擎而异(现代引擎多按属性添加顺序遍历,但不可完全依赖)。- 必须用
hasOwnProperty过滤,避免遍历到原型链上的属性(如toString、valueOf)。
Object.keys() + forEach:获取键后遍历
Object.keys() 方法返回一个包含对象自身可枚举属性名(键)的数组,结合数组方法 forEach 可遍历键,再通过键取值。
语法:
Object.keys(object).forEach(key => {
// 处理 key 和 object[key]
});
示例:
仍用 user 对象,遍历并打印键值对:
Object.keys(user).forEach(key => {
console.log(`键: ${key}, 值:`, user[key]);
});
输出:
与 for...in 一致,遍历顺序为 Object.keys() 返回的数组顺序(即属性添加顺序)。
优势:
- 代码更简洁,适合需要数组方法的场景(如
map、filter后再遍历)。 - 不会遍历原型链属性,无需
hasOwnProperty过滤。
Object.values():直接遍历值
如果只需要遍历对象的值(不关心键),Object.values() 返回包含对象自身可枚举值的数组,可直接遍历。
语法:
Object.values(object).forEach(value => {
// 处理 value
});
示例:
遍历 user 对象的值:
Object.values(user).forEach(value => {
console.log("值:", value);
});
输出:
值: 张三
值: 25
值: false
值: ["数学", "英语"]
值: {city: "北京", district: "朝阳区"}
适用场景:
- 仅需处理值,无需键的场景(如计算所有值的和、筛选特定值等)。
Object.entries() + forEach:同时遍历键和值
Object.entries() 返回一个包含对象自身可枚举键值对数组的数组(格式为 [[key1, value1], [key2, value2], ...]),适合同时需要键和值的场景。
语法:
Object.entries(object).forEach(([key, value]) => {
// 处理 key 和 value
});
示例:
遍历 user 对象的键值对:
Object.entries(user).forEach(([key, value]) => {
console.log(`键: ${key}, 值:`, value);
});
输出:
与 for...in 和 Object.keys() 一致。
优势:
- 代码更直观,通过解构直接获取键和值,减少
object[key]的重复调用。
遍历 JSON 数组的 3 种常用方法
JSON 数组本质上是 JavaScript 的 Array 类型,遍历数组的核心是访问每个元素,以下是 3 种常用方法,各有特点。
for 循环:基础灵活,适合索引操作
for 循环是最基础的遍历方式,通过索引访问数组元素,适合需要索引的场景(如根据索引修改元素、计算相邻元素关系等)。
语法:
for (let i = 0; i < array.length; i++) {
// 处理 array[i] 和索引 i
}
示例:
假设有如下 JSON 数组(存储商品列表):
const products = [
{"id": 1, "name": "商品A", "price": 100},
{"id": 2, "name": "商品B", "price": 200},
{"id": 3, "name": "商品C", "price": 150}
];
遍历数组并打印商品信息(含索引):
for (let i = 0; i < products.length; i++) {
const product = products[i];
console.log(`索引: ${i}, 商品: ${product.name}, 价格: ${product.price}`);
}
输出:
索引: 0, 商品: 商品A, 价格: 100
索引: 1, 商品: 商品B, 价格: 200
索引: 2, 商品: 商品C, 价格: 150
注意事项:
- 需手动管理索引,适合需要精确控制循环逻辑的场景。
- 性能较好,适合超长数组(但现代 JS 引擎中,其他遍历方法性能差距已很小)。
forEach:简洁优雅,无返回值
forEach 是数组内置方法,接收一个回调函数,对数组每个元素执行一次操作,无需手动管理索引。
语法:
array.forEach((value, index, array) => {
// value: 当前元素
// index: 当前索引
// array: 原数组(可选)
});
示例:
遍历 products 数组:
products.forEach((product, index) => {
console.log(`索引: ${index}, 商品: ${product.name}, 价格: ${product.price}`);
});
输出:
与 for �



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