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

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

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

1 循环简单集合

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

//数组
var arr = ["河南", "河北", "山东"];
 for (var i = 0; i < arr.length; i++) {
     console.log('索引(下标): ' + i + ' 值: ' + arr[i]);
 }
//集合
 var datas = { "hn": "河南", "hn": "河南", "hb": "河北", "sd": "山东" };
 console.log('=======forin循环========');
 for (var key in datas) {
     //键:相当于数组的索引(下标)   值:下标对应的数据
     console.log('键: ' + key + ' 值: ' + datas[key]);
 }
//===============================================
 console.log('=======JQ的 each()方法 ========');
 $.each(datas, function (k, v) {
   //k:对应集合的key     v:对应集合的datas[key])
     console.log('键: ' + k + ' 值: ' + v);
 });

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

循环简单集合数据

2 循环数组集合

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

var ps = [{ 'name': '张三', 'age': 18 }, { 'name': '李四', 'age': '20' }];
console.log('==========for循环============');
console.log('');
for (var i = 0; i < ps.length; i++) {
    //p为当前索引下的一个集合
    var p = ps[i];
    console.log(p);
    //通过集合p点属性名(或者中括号方式) 得到 集合对应的值
    console.log('p.name: ' + p.name + '  p.age: ' + p.age);
    console.log('p["name"]: ' + p["name"] + '   p["age"]: ' + p["age"]);
    console.log('');
}
//=======JQ的map()方法================
$.map(ps, function (item, index) {  
    console.log('第'+index+'个集合,两个属性值为:  '+item.name+' '+item.age);
});

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 < ps.length; i++) {
    for (var item in ps[i]) {
        var p = ps[i];
        console.log('键: ' + item + '  值: ' + p[item]);
        //等价于下面的写法
        console.log('键: ' +item+'  值: '+ ps[i][item]);
    }
}

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.name<===>ps[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()方法

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