建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網營銷解決方案
JQuery-遍歷不同類型的集合數(shù)據(jù)
集合數(shù)據(jù)有簡單是鍵值對集合,比較復雜的數(shù)組套集合或集合套集合,更復雜的集合數(shù)組相互嵌套的集合。
根據(jù)不同類型集合數(shù)據(jù)的特點使用對應的循環(huán)遍歷方法以獲取和應用集合數(shù)據(jù)。
1、循環(huán)簡單集合
簡單的集合數(shù)據(jù)一般使用forin或者jQuery的each()方法,通過數(shù)組數(shù)據(jù)作對比。
//數(shù)組
var arr = ["河南", "河北", "山東"];
for (var i = 0; i < arr.length; i++) {
console.log('索引(下標): ' + i + ' 值: ' + arr[i]);
}
//集合
var datas = { "hn": "河南", "hn": "河南", "hb": "河北", "sd": "山東" };
console.log('=======forin循環(huán)========');
for (var key in datas) {
//鍵:相當于數(shù)組的索引(下標) 值:下標對應的數(shù)據(jù)
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循環(huán)優(yōu)化了對集合值的處理。
循環(huá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為當前索引下的一個集合
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]對比后發(fā)現(xiàn)JQ的map()方法比for循環(huán)優(yōu)化了循環(huán)時下標對應集合名稱的處理
數(shù)組集合中,每個索引對應的是一個對象集合,要得到對象中的值通過對象點屬性名或者中括號屬性名。
for與forin嵌套循環(huán)數(shù)組集合數(shù)據(jù),輸出結果類似不再截圖。
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、循環(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 時 ps[key]對應集合{ 'name': '張三', 'age': 18 }
//key為 p2 時 ps[key]對應集合{ 'name': '李四', 'age': '20' }
//下面的循環(huán)是為 key=p1時循環(huán)集合{ 'name': '張三', 'age': 18 }的值
for (var key2 in ps[key]) {
//第一次循環(huán)
//key2為 name 時 值為 張三
//key2為 age 時 值為 18
//第二次循環(huán)
//key2為 name 時 值為 李四
//key2為 age 時 值為 20
var pk=ps[key];
//ps[key][key2]
console.log('鍵: ' + key2 + ' 值: ' + pk[key2]);
}
}
雙層forin循環(huán)
小結
數(shù)組類型的數(shù)據(jù)使用for或者JQ的map()方法。
集合類型的數(shù)據(jù)使用forin或者JQ的each()方法。
所以不論集合類型與數(shù)組類型的數(shù)據(jù)如何相互嵌套,遍歷使用時只看當前遍歷的是其中哪個類型的。
標題名稱：JQuery-遍歷不同類型的集合數(shù)據(jù)
本文URL：http://www.dlmjj.cn/article/cdogsjd.html
