集合数据有简单是键值对集合,比力复杂的数组套集合或集合套集合,更复杂的集合数组彼此嵌套的集合

按照差别类型集合数据的特点利用对应的轮回遍历办法以获取和应用集合数据

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轮回优化了对集合值的处置

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

轮回简单集合数据

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轮回优化了轮回时下标对应集合名称的处置

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

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

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);});jQuery- 遍历不同类型的集合数据 294 第3张

利用双层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]); } }jQuery- 遍历不同类型的集合数据 294 第4张

双层forin轮回

小结

数组类型的数据利用for或者JQ的map()办法

集合类型的数据利用forin或者JQ的each()办法

所以不管集合类型与数组类型的数据若何彼此嵌套,遍历利用时只看当前遍历的是此中哪个类型的