數組類型的數據使用for或者JQ的map()方法；集合類型的數據使用forin或者JQ的each()方法；所以不論集合類型與數組類型的數據如何相互嵌套,遍歷使用時只看當前遍歷的是其中哪個類型的。
集合數據有簡單是鍵值對集合,比較復雜的數組套集合或集合套集合,更復雜的集合數組相互嵌套的集合。
根據不同類型集合數據的特點使用對應的循環遍歷方法以獲取和應用集合數據。
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、循環數組集合
（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()方法。
所以不論集合類型與數組類型的數據如何相互嵌套,遍歷使用時只看當前遍歷的是其中哪個類型的。
