javaScript中各種遍歷的整理

當(dāng)我們要對數(shù)組或者是集合進(jìn)行讀取數(shù)據(jù)的時候,就會用到遍歷,那么,各種遍歷都有什么特點呢,今天小編就帶領(lǐng)大家一探j(luò)avaScript中的遍歷.首先介紹數(shù)組的定義方法


</br>

  • 第一種:構(gòu)造函數(shù)法 ,通過 new 關(guān)鍵字 定義數(shù)組
    var array = new Array();
  • 第二種:直接定義法,這里 [] 里面的值,可有 可無,這種定義方式下的數(shù)組 長度是可擴(kuò)展的
    //注意:若[]中有元素時,需要用"," 分隔,否則 就是 一個元素了
    var array2 = [];
  • 聲明一系列數(shù)據(jù)結(jié)構(gòu)
  • 構(gòu)造函數(shù)
    function Person ( name ){
    this.name = name;
    }
    //數(shù)組:數(shù)組元素是構(gòu)造函數(shù)生成的對象
    var arr = [ new Person("小王") , new Person ("小紅") , newPerson("小李") ];
    //字面量對象
    //注意:字面量對象中有多個元素的時候 用"," 逗號隔開
    var game = {
    "name" : "lili",
    "type" : "USA"
    }

1.普通的 for 循環(huán)遍歷

第一種:最常用的 for 循環(huán)遍歷 ,適合 所有的情況 ( 有Length 屬性)
//這種遍歷需要通過下標(biāo)的方式讀取對象
for ( var i =0 ; i < arr.length ; i++ ) {
console.log( arr[i]);
}

2.for ..in 循環(huán)遍歷

//遍歷數(shù)組注意: 以后 能不用 for..in 遍歷數(shù)組,就不用, for..in性能不好,而且容易造成下標(biāo)錯亂問題
//tempIdx 表示數(shù)組的下標(biāo)
//arr 表示要遍歷的數(shù)組
for( var tempIdx in arr ){
console.log( arr[tempIdx].name);
}
//遍歷對象:for..in非常適合去遍歷字面量對象
//左邊變量:是這個對象的每一個屬性
//右邊變量:要遍歷的對象
for ( var tempProp in game ){
//這里要注意:當(dāng)屬性為變量的時候,要用方括號[]去訪問!!!
//game.tempProp 訪問game下的 tempProp屬性 undefined
console.log( game[tempProp] );
}

注意:用for..in遍歷 字面的對象的時候 , 假如key是 數(shù)值 或者 數(shù)值字符串, 這個時候 for..in遍歷是會優(yōu)先輸出的, 優(yōu)先級如下:
數(shù)值 -> 數(shù)值字符串 -> 正常的key

3. forEach( ) 遍歷

//遍歷數(shù)組
//如果遍歷數(shù)組,這個方法其實是Array.prototype.forEach( )
//數(shù)組的原型方法
//forEach 的參數(shù) 是一種匿名函數(shù)
//這個匿名函數(shù)的參數(shù)
//第一個參數(shù): 數(shù)組的每個元素
//第二個參數(shù): 數(shù)組的下標(biāo)
//第三個參數(shù): 當(dāng)前數(shù)組對象
//注意:forEach 遍歷有一個致命的 缺陷, 不能使用 break continue return
arr.forEach ( function( ele , idx , array ){
console.log ( ele) ;//每個元素
console.log ( idx );//下標(biāo)
console.log ( array );//當(dāng)前數(shù)組
});
//遍歷Map
//如果遍歷 Map,這個方法其實是 Map.prototype.forEach
//forEach 的參數(shù): 是一個匿名回調(diào) 函數(shù)
//這個匿名 函數(shù)的參數(shù)
//第一個參數(shù): value值
//第二個參數(shù): key值
//第三個參數(shù): 當(dāng)前的對象
map.forEach( function( value , key , map ){
console.log( key ":" value );
}

4. for..of 遍歷

//遍歷數(shù)組
//第一個變量: 數(shù)組中的每一個元素
//第二個遍歷: 要遍歷的數(shù)組對象
for( var temple of arr ) {
console.log( tempEle.name );
}
//遍歷map
//第一個參數(shù): 是一個數(shù)組,數(shù)組中有兩個元素 ,分別是key 和 value
//第二個參數(shù): 要遍歷的map對象
for( var [ key , value ] of map ){
console.log( key "--" value );
}
//另一種方式
for( var keyAndValue of map ){
console.log( keyAndValue[0] "--" keyAndValue[1] );
}
注意:for..of 不能遍歷 object 集合,假如要遍歷 object集合,需要先用普通的for循環(huán)遍歷object集合,添加到數(shù)組,再對其進(jìn)行下一步操作
for..of 兼容性很差,很多 瀏覽器不兼容 , 所以還是乖乖使用 基本的 for 循環(huán)吧

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容