JS遍歷數(shù)組和對(duì)象的區(qū)別及遞歸遍歷對(duì)象、數(shù)組、屬性的方法詳解

更新時(shí)間：2016年06月14日 15:59:03 作者：yun007

本文給大家js遍歷數(shù)組和遍歷對(duì)象的區(qū)別，一般來(lái)說(shuō)for用來(lái)遍歷數(shù)組對(duì)象而for-in用來(lái)遍歷非數(shù)組對(duì)象。接下來(lái)小編給大家?guī)?lái)了js遍歷數(shù)組和對(duì)象的區(qū)別及js遞歸遍歷對(duì)象、數(shù)組、屬性的方法詳解，一起看下吧

廢話不多說(shuō)了，直奔主題，你，具體代碼如下所示：

<script>
 //----------------for用來(lái)遍歷數(shù)組對(duì)象--
 var i,myArr = [1,2,3];
 for (var i = 0; i < myArr.length; i++) {
  console.log(i+":"+myArr[i]);
 };
 //---------for-in 用來(lái)遍歷非數(shù)組對(duì)象
 var man ={hands:2,legs:2,heads:1};
 //為所有的對(duì)象添加clone方法，即給內(nèi)置原型(object,Array,function)增加原型屬性,該方法很強(qiáng)大，也很危險(xiǎn)
 if(typeof Object.prototype.clone ==="undefined"){
  Object.prototype.clone = function(){}; 
 }
 //
 for(var i in man){
  if (man.hasOwnProperty(i)) { //filter,只輸出man的私有屬性
   console.log(i,":",man[i]);
  };
 }
 //輸出結(jié)果為print hands:2,legs:2,heads:1
 for(var i in man) {//不使用過(guò)濾
  console.log(i,":",man[i]);
 } 
 //輸出結(jié)果為
 //hands : 2 index.html:20
 //legs : 2 index.html:20
 //heads : 1 index.html:20
 //clone : function (){} 
 for(var i in man) {
  if(Object.prototype.hasOwnProperty.call(man,i)) { //過(guò)濾
   console.log(i,":",man[i]);
  }
 } //輸出結(jié)果為print hands:2,legs:2,heads:1 </script>

接下來(lái)給大家介紹js 遞歸遍歷對(duì)象、數(shù)組、屬性

在前端工作時(shí)，有時(shí)我們需要遍歷一些未知類型的對(duì)象。代碼如下：

//js遍歷對(duì)象
function TraversalObject(obj)
{
    for (var a in obj) {
        if (typeof (obj[a]) == "object") {
            TraversalObject(obj[a]); //遞歸遍歷
        }
        else {
            alert(a + "=" + obj[a]);//值就顯示
        }
    }
}

//遍歷對(duì)象中所有Ur的值
function TraversalObject(obj)
{
for (var a in obj) {

        if(a=="Url")    alert(obj[a]);/ /顯示URL的值
        if (typeof (obj[a]) == "object") {
            TraversalObject(obj[a]); //遞歸遍歷
        }
    }
}

這種遍歷方法在對(duì)象不規(guī)則但需要獲取相同屬性時(shí)起到非常好的作用。

您可能感興趣的文章:

相關(guān)文章

用js實(shí)現(xiàn)終止瀏覽器對(duì)頁(yè)面HTML的繼續(xù)解析即停止解析兼容firefox
用js實(shí)現(xiàn)終止瀏覽器對(duì)頁(yè)面HTML的繼續(xù)解析即停止解析兼容firefox...
2007-11-11
詳解promise.then,process.nextTick, setTimeout 以及 setImmediate的
這篇文章主要介紹了詳解promise.then,process.nextTick, setTimeout 以及 setImmediate的執(zhí)行順序
2018-11-11
使用bootstrap實(shí)現(xiàn)多窗口和拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了使用bootstrap實(shí)現(xiàn)多窗口和拖動(dòng)效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
微信小程序?qū)崿F(xiàn)帶放大效果的輪播圖
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)帶放大效果的輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
javascript實(shí)現(xiàn)計(jì)算指定范圍內(nèi)的質(zhì)數(shù)示例
這篇文章主要介紹了javascript實(shí)現(xiàn)計(jì)算指定范圍內(nèi)的質(zhì)數(shù),涉及javascript數(shù)值計(jì)算與判斷相關(guān)操作技巧,需要的朋友可以參考下
2018-12-12
JavaScript常用8種數(shù)組去重代碼實(shí)例
這篇文章主要介紹了JavaScript常用8種數(shù)組去重代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-09-09
簡(jiǎn)述凍結(jié)JS對(duì)象方法技術(shù)
本文主要介紹了凍結(jié)JS對(duì)象方法技術(shù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
微信小程序全局配置以及頁(yè)面配置詳解
微信小程序中我們創(chuàng)建頁(yè)面時(shí)會(huì)自動(dòng)創(chuàng)建四個(gè)文件分別為js文件,wxml文件wxss文件最后還有我們今天的主角json配置文件,下面這篇文章主要給大家介紹了關(guān)于微信小程序全局配置以及頁(yè)面配置的相關(guān)資料,需要的朋友可以參考下
2022-07-07
JavaScript常見(jiàn)的跨標(biāo)簽頁(yè)通信方式總結(jié)
跨標(biāo)簽頁(yè)通信是指在瀏覽器中的不同標(biāo)簽頁(yè)之間進(jìn)行數(shù)據(jù)傳遞和通信的過(guò)程,這篇文章為大家整理了前端常見(jiàn)的跨標(biāo)簽頁(yè)通信方式,有需要的小伙伴可以了解下
2023-10-10
Bootstrap Fileinput文件上傳組件用法詳解
這篇文章主要介紹了Bootstrap Fileinput文件上傳組件用法詳解的相關(guān)資料
2016-05-05