數(shù)組類型的數(shù)據(jù)使用for或者JQ的map()方法;集合類型的數(shù)據(jù)使用forin或者JQ的each()方法;所以不論集合類型與數(shù)組類型的數(shù)據(jù)如何相互嵌套,遍歷使用時(shí)只看當(dāng)前遍歷的是其中哪個(gè)類型的。

集合數(shù)據(jù)有簡(jiǎn)單是鍵值對(duì)集合,比較復(fù)雜的數(shù)組套集合或集合套集合,更復(fù)雜的集合數(shù)組相互嵌套的集合。
根據(jù)不同類型集合數(shù)據(jù)的特點(diǎn)使用對(duì)應(yīng)的循環(huán)遍歷方法以獲取和應(yīng)用集合數(shù)據(jù)。
1、循環(huán)簡(jiǎn)單集合
簡(jiǎn)單的集合數(shù)據(jù)一般使用forin或者jQuery的each()方法,通過(guò)數(shù)組數(shù)據(jù)作對(duì)比。
//數(shù)組
var arr = ["河南", "河北", "山東"];
for (var i = 0; i < arr.length; i++) {
console.log('索引(下標(biāo)): ' + i + ' 值: ' + arr[i]);
}
//集合
var datas = { "hn": "河南", "hn": "河南", "hb": "河北", "sd": "山東" };
console.log('=======forin循環(huán)========');
for (var key in datas) {
//鍵:相當(dāng)于數(shù)組的索引(下標(biāo)) 值:下標(biāo)對(duì)應(yīng)的數(shù)據(jù)
console.log('鍵: ' + key + ' 值: ' + datas[key]);
}
//===============================================
console.log('=======JQ的 each()方法 ========');
$.each(datas, function (k, v) {
//k:對(duì)應(yīng)集合的key v:對(duì)應(yīng)集合的datas[key])
console.log('鍵: ' + k + ' 值: ' + v);
});
JQ的each()方法比f(wàn)orin循環(huán)優(yōu)化了對(duì)集合值的處理。

循環(huán)簡(jiǎn)單集合數(shù)據(jù)
2、循環(huán)數(shù)組集合
(1)使用for或者JQ的map()方法循環(huán)數(shù)組集合數(shù)據(jù)
var ps = [{ 'name': '張三', 'age': 18 }, { 'name': '李四', 'age': '20' }];
console.log('==========for循環(huán)============');
console.log('');
for (var i = 0; i < ps.length; i++) {
//p為當(dāng)前索引下的一個(gè)集合
var p = ps[i];
console.log(p);
//通過(guò)集合p點(diǎn)屬性名(或者中括號(hào)方式) 得到 集合對(duì)應(yīng)的值
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+'個(gè)集合,兩個(gè)屬性值為: '+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方式少了一個(gè)變量
map()方法: console.log('第'+index+'個(gè)集合,兩個(gè)屬性值為: '+item.name+' '+item.age);
//map()方法的item等價(jià)于B方式的ps[i]
對(duì)比后發(fā)現(xiàn)JQ的map()方法比f(wàn)or循環(huán)優(yōu)化了循環(huán)時(shí)下標(biāo)對(duì)應(yīng)集合名稱的處理

數(shù)組集合中,每個(gè)索引對(duì)應(yīng)的是一個(gè)對(duì)象集合,要得到對(duì)象中的值通過(guò)對(duì)象點(diǎn)屬性名或者中括號(hào)屬性名。
for與forin嵌套循環(huán)數(shù)組集合數(shù)據(jù),輸出結(jié)果類似不再截圖。
for (var i = 0; i < ps.length; i++) {
for (var item in ps[i]) {
var p = ps[i];
console.log('鍵: ' + item + ' 值: ' + p[item]);
//等價(jià)于下面的寫(xiě)法
console.log('鍵: ' +item+' 值: '+ ps[i][item]);
}
}
3、循環(huán)集合套集合
使用forin或者jQuery的map()或each()方法循環(huán)集合套集合數(shù)據(jù)
var ps = { "p1": { 'name': '張三', 'age': 18 }, "p2": { 'name': '李四', 'age': '20' } };
console.log('==========forin循環(huán)============');
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循環(huán),循環(huán)集合套集合數(shù)據(jù)。
var ps = { "p1": { 'name': '張三', 'age': 18 }, "p2": { 'name': '李四', 'age': '20' } };
for (var key in ps) {
console.log('鍵: ' + key + ' 得到集合: ' + ps[key]);
//key為 p1 時(shí) ps[key]對(duì)應(yīng)集合{ 'name': '張三', 'age': 18 }
//key為 p2 時(shí) ps[key]對(duì)應(yīng)集合{ 'name': '李四', 'age': '20' }
//下面的循環(huán)是為 key=p1時(shí)循環(huán)集合{ 'name': '張三', 'age': 18 }的值
for (var key2 in ps[key]) {
//第一次循環(huán)
//key2為 name 時(shí) 值為 張三
//key2為 age 時(shí) 值為 18
//第二次循環(huán)
//key2為 name 時(shí) 值為 李四
//key2為 age 時(shí) 值為 20
var pk=ps[key];
//ps[key][key2]
console.log('鍵: ' + key2 + ' 值: ' + pk[key2]);
}
}

雙層forin循環(huán)
小結(jié)
數(shù)組類型的數(shù)據(jù)使用for或者JQ的map()方法。
集合類型的數(shù)據(jù)使用forin或者JQ的each()方法。
所以不論集合類型與數(shù)組類型的數(shù)據(jù)如何相互嵌套,遍歷使用時(shí)只看當(dāng)前遍歷的是其中哪個(gè)類型的。