一個(gè)朋友問對象如何轉(zhuǎn)為數(shù)組，當(dāng)我問他為啥要轉(zhuǎn)得時(shí)候，他告訴我，數(shù)組可以用js循環(huán)遍歷，而對象則不可以。其實(shí)呢，對象同樣可以循環(huán)遍歷的啊。不用轉(zhuǎn)換也可以循環(huán)！說明你對js或者jquery的某些操作不是很熟練！在這里我簡單介紹一下！

案例

我們看如下對象：

var data={
  張三：69，
  李四：72，
  王五：90，
  二麻子：88，
  前端博客：100，
  haorooms : 98,
  王大壯：99
}

假如上面是后臺返回的一個(gè)key，一個(gè)是value的對象（這種對象相信大家經(jīng)常遇到吧?。?，現(xiàn)在要把這個(gè)內(nèi)容，循環(huán)綁定到一個(gè)表格中。有的朋友對對象的循環(huán)就不知道怎么操作了！今天我給大家介紹兩個(gè)方法！

方法一：

用$.each的方式進(jìn)行循環(huán)！

假如你不知道$.each的話，建議大家網(wǎng)上搜一搜。當(dāng)然也可以搜索一下“jquery的$().each,$.each的區(qū)別”，關(guān)于他們的區(qū)別，我在這里就不詳細(xì)介紹了。可能有的朋友$().each這個(gè)方式用的比較多，今天主要給大家介紹$.each。

$.each()可以遍歷數(shù)組和對象。方式如下：

$.each([{“name”:”haorooms”,”email”:”bb@126.com”},{“name”:”qianduan”,”email”:”aa@hao.com”}],function(i,n)
{
alert(“索引:”+i,”對應(yīng)值為：”+n.name);
});

也可以這么遍歷：

var arr1 = [ “one”, “two”, “three”, “four”, “five” ];
$.each(arr1, function(){
alert(this);
});

輸出：one   two  three  four   five
最爽的是可以遍歷數(shù)組：

var obj =data;//上面復(fù)制的data
$.each(obj, function(key, val) {
alert(obj[key]);//可以輸出成績
console.log(key);//可以輸出姓名
});

方法二：

用for in循環(huán)，可以遍歷obj

對上面的對象，我們可以這么寫來循環(huán)！

for(var i in data){
 console.dir(i);//輸出姓名
 console.dir(data[i]);//輸出分?jǐn)?shù)
}

for in循環(huán)相信大家應(yīng)該不陌生！for循環(huán)我們用到比較多的是for(var i=0;i<array.length;i++)這樣，這個(gè)主要是針對數(shù)組來循環(huán)的。對于對象，我們通常用for in循環(huán)！

另外，假如我們遇到如下對象：

var data={
  張三：69，
  李四：72，
  王五：90，
  二麻子：88，
  前端博客：100，
  haorooms : 98,
  王大壯：99
}

我們可以用data.haorooms得到98,但是我們用“data.前端博客”會報(bào)錯(cuò)，因此，在我們用漢字做key值的時(shí)候，選取的時(shí)候應(yīng)該用data["前端博客"],這種方式來選擇，不要再用點(diǎn)號了。

以上就是jquery中object對象循環(huán)遍歷的方法，希望對大家的學(xué)習(xí)有所幫助。

最新評論