json如何使用each循环

JSON数据遍历指南：如何使用each循环高效处理JSON对象

在JavaScript开发中,JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，广泛应用于前后端数据交互，当我们需要处理JSON中的数据时，遍历其属性或数组元素是常见操作，虽然原生JavaScript提供了for...in循环、forEach()等方法，但jQuery库中的$.each()方法（常简称为“each循环”）凭借其简洁的语法和跨浏览器兼容性，成为许多开发者的首选，本文将详细介绍如何使用$.each()循环遍历JSON对象和数组，并对比原生方法，帮助你在不同场景下选择合适的遍历方式。

JSON基础：对象与数组的结构

在开始遍历前,需明确JSON的两种核心结构：

JSON对象

无序的键值对集合,用花括号包裹，键必须是字符串（可加引号），值可以是字符串、数字、布尔值、数组、对象或null。
示例：

{
  "name": "张三",
  "age": 25,
  "isStudent": false,
  "courses": ["数学", "英语"],
  "address": {
    "city": "北京",
    "district": "海淀区"
  }
}

JSON数组

有序的值列表,用方括号[]包裹，值可以是任意JSON数据类型。
示例：

[
  {"id": 1, "product": "手机", "price": 3999},
  {"id": 2, "product": "电脑", "price": 6999},
  {"id": 3, "product": "平板", "price": 2599}
]

jQuery的$.each()方法：语法与参数

$.each()是jQuery提供的通用遍历方法，可用于遍历对象、数组、类数组对象（如DOM元素集合），其基本语法为：

$.each( collection, callback( index, value ) )

参数说明：

• collection：要遍历的目标，可以是JSON对象、数组或类数组对象。
• callback：遍历执行的回调函数，接收两个参数：
  • index（或key）：对于数组，是当前元素的索引（数字）；对于对象，是当前属性的键（字符串）。
  • value：当前元素或属性的值。

返回值：

• 如果回调函数返回false，提前终止遍历（类似break）；
• 返回true或其他值，则继续遍历（类似continue）。

遍历JSON对象：提取键值对

当处理JSON对象时,$.each()会遍历每个键值对，回调函数中的index参数为键（字符串），value为对应的值。

示例：遍历用户信息对象

var userInfo = {
  "name": "张三",
  "age": 25,
  "isStudent": false,
  "courses": ["数学", "英语"],
  "address": {
    "city": "北京",
    "district": "海淀区"
  }
};
$.each(userInfo, function(key, value) {
  console.log("键：" + key + "，值：" + value);
});

输出结果：

键：name，值：张三
键：age，值：25
键：isStudent，值：false
键：courses，值：数学,英语
键：address，值：[object Object]  // 注意：对象会被转为字符串

注意事项：

• 如果值是对象或数组,直接输出会得到[object Object]或[object Array]，需进一步处理（如JSON.stringify()）。
• 修改回调函数中的value不会影响原对象（因为value是值的副本），若需修改原对象，应通过userInfo[key]操作。

遍历JSON数组：处理有序数据

遍历JSON数组时,$.each()的index参数是当前元素的索引（从0开始），value是数组元素本身。

示例：遍历商品数组并筛选

var products = [
  {"id": 1, "product": "手机", "price": 3999},
  {"id": 2, "product": "电脑", "price": 6999},
  {"id": 3, "product": "平板", "price": 2599}
];
var affordableProducts = []; // 存储价格低于5000的商品
$.each(products, function(index, product) {
  if (product.price < 5000) {
    affordableProducts.push(product.product);
  }
});
console.log("低价商品：" + affordableProducts.join("、"));

输出结果：

低价商品：手机、平板

实战技巧：

• 结合条件判断实现数据筛选（如示例）。
• 通过return false提前终止遍历（例如找到目标元素后不再继续）。
• 若需修改数组元素,可通过products[index] = newValue操作。

与原生JavaScript遍历方法的对比

虽然$.each()简洁，但在现代JavaScript开发中，原生方法（如for...in、Object.keys()、forEach()）更推荐，因为它们无需依赖jQuery，且性能更优，以下是常见原生方法的对比：

遍历对象

（1）for...in循环

遍历对象的可枚举属性（包括原型链上的属性，需用hasOwnProperty过滤）。

for (var key in userInfo) {
  if (userInfo.hasOwnProperty(key)) { // 过滤原型属性
    console.log("键：" + key + "，值：" + userInfo[key]);
  }
}

（2）Object.keys() + forEach()

获取对象自身的所有键（不包括原型属性），再用forEach遍历。

Object.keys(userInfo).forEach(function(key) {
  console.log("键：" + key + "，值：" + userInfo[key]);
});

遍历数组

（1）for循环（传统方式）

最灵活,支持break和continue，但代码稍显冗长。

for (var i = 0; i < products.length; i++) {
  console.log("索引：" + i + "，商品：" + products[i].product);
}

（2）forEach()方法

数组原生方法,直接遍历元素，无法用break终止（需抛出异常或使用some()/every()）。

products.forEach(function(product, index) {
  console.log("索引：" + index + "，商品：" + product.product);
});

实战案例：动态渲染JSON数据到页面

假设后端返回一个商品列表的JSON数据,我们需要在前端页面中动态渲染为表格，以下是使用$.each()的实现：

HTML结构

<table id="productTable" border="1">
  <thead>
    <tr>
      <th>ID</th>
      <th>商品名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScript代码（使用$.each()）

// 模拟后端返回的JSON数据
var products = [
  {"id": 1, "product": "手机", "price": 3999},
  {"id": 2, "product": "电脑", "price": 6999},
  {"id": 3, "product": "平板", "price": 2599}
];
// 使用$.each()遍历并渲染
$.each(products, function(index, product) {
  var row = "<tr>";
  row += "<td>" + product.id + "</td>";
  row += "<td>" + product.product + "</td>";
  row += "<td>¥" + product.price + "</td>";