JQuery- 遍历不同类型的集合数据

数组类型的数据使用 for 或者 JQ 的 map()方法；集合类型的数据使用 forin 或者 JQ 的 each()方法；所以不论集合类型与数组类型的数据如何相互嵌套, 遍历使用时只看当前遍历的是其中哪个类型的。

集合数据有简单是键值对集合, 比较复杂的数组套集合或集合套集合, 更复杂的集合数组相互嵌套的集合。

根据不同类型集合数据的特点使用对应的循环遍历方法以获取和应用集合数据。

1、循环简单集合

简单的集合数据一般使用 forin 或者 jQuery 的 each()方法, 通过数组数据作对比。

// 数组
var arr = ["河南", "河北", "山东"];
 for (var i = 0; i 

JQ 的 each()方法比 forin 循环优化了对集合值的处理。

循环简单集合数据

2、循环数组集合

（1）使用 for 或者 JQ 的 map()方法循环数组集合数据

var ps = [{'name': '张三', 'age': 18}, {'name': '李四', 'age': '20'}];
console.log('==========for 循环 ============');
console.log('');
for (var i = 0; i 

 A 方式:   var p = ps[i];   console.log('p.name:' + p.name + 'p.age:' + p.age);
B 方式:   console.log('ps[i].name:' + ps[i].name + 'ps[i].age:' + ps[i].age);
// B 方式比 A 方式少了一个变量
map()方法: console.log('第'+index+'个集合, 两个属性值为:'+item.name+' '+item.age);
//map()方法的 item 等价于 B 方式的 ps[i]

对比后发现 JQ 的 map()方法比 for 循环优化了循环时下标对应集合名称的处理

数组集合中, 每个索引对应的是一个对象集合, 要得到对象中的值通过对象点属性名或者中括号属性名。

for 与 forin 嵌套循环数组集合数据, 输出结果类似不再截图。

for (var i = 0; i 

3、循环集合套集合

使用 forin 或者 jQuery 的 map()或 each()方法循环集合套集合数据

var ps = {"p1": { 'name': '张三', 'age': 18}, "p2": {'name': '李四', 'age': '20'} };
console.log('==========forin 循环 ============');
for (var key in ps) {var psi = ps[key];
    console.log('键:' + key + '得到集合:' + psi);
    //psi.nameps[key].name 或者 ps[key]["name"]
    console.log('值:' + psi.name + '值:' + psi.age);
}
console.log('==========map()方法 ============');
$.map(ps, function (item, index) {console.log('键:' + index + '得到集合:' + ps[index]);
    console.log('值:' + item.name + '值:' + item.age);
});
console.log('==========each()方法 ============');
$.each(ps, function (k, v) {console.log('键:' + k + '得到集合:' + v);
    console.log('值:' + v.name + '值:' + v.age);
});

使用双层 forin 循环, 循环集合套集合数据。

var ps = {"p1": { 'name': '张三', 'age': 18}, "p2": {'name': '李四', 'age': '20'} };
 for (var key in ps) {console.log('键:' + key + '得到集合:' + ps[key]);
     //key 为 p1 时  ps[key]对应集合{'name': '张三', 'age': 18}
     //key 为 p2 时  ps[key]对应集合{'name': '李四', 'age': '20'} 
     // 下面的循环是为 key=p1 时循环集合 {'name': '张三', 'age': 18} 的值
     for (var key2 in ps[key]) {                    
         // 第一次循环
         //key2 为 name 时 值为 张三
         //key2 为 age  时  值为 18
         // 第二次循环
         //key2 为 name 时 值为 李四
         //key2 为 age  时  值为 20
         var pk=ps[key];
         //ps[key][key2]
         console.log('键:' + key2 + '值:' + pk[key2]);
     }
 }

双层 forin 循环

小结

数组类型的数据使用 for 或者 JQ 的 map()方法。

集合类型的数据使用 forin 或者 JQ 的 each()方法。

所以不论集合类型与数组类型的数据如何相互嵌套, 遍历使用时只看当前遍历的是其中哪个类型的。