JavaScript 發展至今已經發展出多種數組的循環遍歷的方法,不同的遍歷方法運行起來哪個比較快,不同循環方法使用在哪些場景,小萌簡單總結了下,如果有什么不合適不對的地方還望指出。

for 循環

循環可以將代碼塊執行指定的次數。

關于具體for循環的介紹小萌這里就不啰嗦了,相信小伙伴兒都是比較清楚的,下面是標準for循環的寫法也是最傳統的語句。這里不一定是數組,字符串也是支持的,但是不支持遍歷對象。先定義一個變量i作為索引,以跟蹤訪問的位置,條件就是i不能超過數組的長度,一旦超過,跳出循環體,結束循環。

for (var i=0;i<arr.length;i++){
  document.write(arr[i] + "<br>");
}

While 循環

While 循環會在指定條件為真時循環執行代碼塊。即只要指定條件為 true,循環就可以一直執行代碼。

var i=0;
while (i<5){
  x=x + "The number is " + i + "<br>";
  i++;
}

do while 循環

do-while 循環是 while 循環的變體。所不同的是,它先執行循環語句,再判斷條件是否滿足,也就是說,循環語句至少能執行一次,即使條件是 false。

var text = "";
var i = 0;
do {
  text += "The number is " + i;
  i++;
}
while (i < 3);

for 和 while 的區別

在for循環中,for語句將初始化,循環條件和每次循環后對循環變量的修改放在一起,較清晰直觀,形式較簡潔,常用于能夠預先判斷循環次數的循環或遍歷中

在while循環中,循環控制變量的初始化一般放在while語句之前,循環控制變量的修改一般放在循環體中,形式上不如for語句簡潔,但它比較常用于無法事先判斷循環次數的循環或遍歷中(用某一條件控制循環)。

兩種形式各有優點,但它們在功能上是等價的,可以相互轉換。

for in 循環

前面我們說到for循環不能循環對象,那么如果我們想要循環對象應用什么呢?不著急,for in 可用于遍歷數組或者對象的屬性(對數組或者對象的屬性進行循環操作)。它輸出的只是數組的索引和對象的key, But我們可以通過索引和key來取到對應的值。需要注意的是數組Array實際上也是對象。

  • 語法:for(var item in arr|obj){}
    遍歷數組時,item表示索引值, arr表示當前索引值對應的元素 arr[item]
    遍歷對象時,item表示key值,arr表示key值對應的value值 obj[item]
var obj = {name: "xm",age: "23",sex: "girl",};
for(var item in obj){
  console.log(item);
}
var arr = [1,2,3,4];
for(var item in arr){
  console.log(item);
}

注意:for in對Array的循環得到的是String而不是Number。

for of 循環 (ES 6)

for of 循環遍歷集合,循環遍歷的是對象的值,和for in遍歷key相反。for of語句是ES6新引入的特性,修復了ES5中的for in的不足。需要注意的是,這里不能只能直接for(var value of obj){}?;岬齟砦筇崾?code>obj is not iterable。iterable類型是ES6標準引入一個新的類型。具有iterable類型的集合可以通過新的for of循環來遍歷。 Array,Map,Set,String,TypedArray,arguments 對象等等都屬于iterable類型。

var arr = [1,2,3,4];
for(var value of arr){
  console.log(value);
}

這里我們做一個小延伸,遍歷數組arr,當我們手動給Array添加了額外的屬性arr.name = 'text',再分別查看上面寫的兩個循環:

for(var item in arr){
  console.log(item);// '0', '1', '2','3', 'name'
}
for(var value of arr){
  console.log(value);// 1,2,3,4
}

for in循環打印結果中把name包括在內,所以說,作用于數組的for in循環除了遍歷數組元素以外,還會遍歷自定義屬性。但Array的length屬性是原數組的長度,并不包括自定義屬性。for of循環則修復了這個問題,它只循環集合本身的元素,所以打印結果是不包括自定義屬性的值的,也因此for of循環不能循環遍歷普通對象,但是如果想用for of來遍歷普通對象的屬性或者值的話,可以通過和Object.keys()搭配使用,先獲取對象的所有key的數組,然后遍歷。

var obj = {name: "xm",age: "23",sex: "girl",};
for(var key of Object.keys(obj)){//使用Object.keys()方法獲取對象key的數組
    console.log(key + ":" + obj[key]);
}

forEach 循環

  • 語法:array.forEach(callback[, thisObject])。forEach的回調function默認有三個參數: item(數組元素), index(元素的索引), array(數組本身)。
var arr = [1,2,3,4];
arr.forEach(function(item){//參數item表示數組每一項的元素,從頭到尾把數組遍歷一遍。
    console.log(item);// 1,2,3,4
})
  • 使用forEach循環有幾點需要特別注意:
    1)forEach無法遍歷對象
    2)forEach無法在IE中使用,只是在firefox和chrome中實現了該方法
    3)forEach無法使用break,continue跳出循環,使用return時,效果和在for循環中使用continue一致

注意:forEach無法在所有元素都傳遞給調用的函數之前終止(而for循環卻有break方法)。

map 方法

map() 方法指的是映射,即原數組被“映射”成對應新數組,map() 方法會給原數組中的每個元素都按順序調用一次 callback 函數。callback 每次執行后的返回值(包括 undefined)組合起來形成一個新數組。 callback 函數只會在有值的索引上被調用;那些從來沒被賦過值或者使用 delete 刪除的索引則不會被調用。另外,map() 方法不會對空數組進行檢測。map() 方法讓數組通過某種計算產生一個新數組,影射成一個新的數組,新數組中的元素為原始數組元素順序依次調用函數處理后的值。map的回調function跟forEach一樣接收三個參數:array.map(function(currentValue,index,arr), thisValue)。

  • 語法:array.map(callback,[ thisArg])。
    callback (執行數組中每個值的函數,包含三個參數)

    • currentValue:必需,當前元素的值;
    • currentIndex:可選,當前元素的索引值;
    • arr:可選,當期元素屬于的數組對象。
var arr=[1, 2, 3, 4];
var square = arr.map(function(val){
  return val*val;
})
console.log(square);//1, 4, 9, 16

注意:ie9以下的瀏覽器還不支持map和forEach這兩個方法,不過可以從Array原型擴展可以實現以上的功能。

reduce 方法

reduce() 方法接收一個函數作為累加器(accumulator),數組中的每個值(從左到右)開始縮減,最終為一個值。reduce() 方法為數組中的每一個元素依次執行回調函數,不包括數組中被刪除或從未被賦值的元素,接受四個參數:初始值(或者上一次回調函數的返回值),當前元素值,當前索引,調用 reduce 的數組。

  • 語法:arr.reduce(callback,[initialValue])
    callback (執行數組中每個值的函數,包含四個參數)

    • total:必需,初始值(initialValue)或者計算結束后的返回值(上一次調用回調返回的值);
    • currentValue:必需,當前元素的值;
    • currentIndex:可選,當前元素的索引值;
    • array:可選,當前元素所屬的數組對象。
var arr = [1, 2, 3, 4];
var total = arr.reduce(function (x, y) {
  return x + y;
});
console.log(total)// 10

filter 方法

filter() 方法創建一個新的數組,新數組中的元素是通過檢查指定數組中符合條件的所有元素。filter() 方法為數組中的每個元素調用一次 callback 函數,并利用所有使得 callback 返回 true 或 等價于 true 的值 的元素創建一個新數組。callback 只會在已經賦值的索引上被調用,對于那些已經被刪除或者從未被賦值的索引不會被調用。另外,filter() 方法不會對空數組進行檢測。那些沒有通過 callback 測試的元素會被跳過,不會被包含在新數組中,篩選出過濾出數組中符合條件的項,組成新數組。

  • 語法:arr.filter(callback[, thisArg])
    callback (執行數組中每個值的函數,包含三個參數)

    • currentValue:必須。當前元素的值;
    • currentIndex:可選,當前元素的索引;
    • array:可選,當前元素所屬的數組對象。
var arr = [1, 2, 4, 9, 34, 21];
var result = arr.filter(function (x) {
 return x % 2 !== 0;
});
console.log(result) // [1, 9, 21]

every 方法

every() 方法用于檢測數組所有元素是否都符合指定條件(通過函數提供)。every() 方法為數組中的每個元素執行一次 callback 函數,直到它找到一個使 callback 返回 false(表示可轉換為布爾值 false 的值)的元素。如果發現了一個這樣的元素,every 方法將會立即返回 false,且剩余的元素不會再進行檢測。否則every() 就會返回 true。callback 只會為那些已經被賦值的索引調用,不會為那些被刪除或從來沒被賦值的索引調用。另外,every() 方法不會對空數組進行檢測。

  • 語法:arr.every(callback[, thisArg])
    callback (執行數組中每個值的函數,包含三個參數)

    • currentValue:必須。當前元素的值;
    • currentIndex:可選,當前元素的索引;
    • array:可選,當前元素所屬的數組對象。
var arr = [1, 2, 3, 4];
var result = arr.every(function(item,index,array){
return item > 2;
});
console.log(result)//false

some 方法

some() 方法用于檢測數組中的元素是否滿足指定條件(函數提供)。。為數組中的每一個元素執行一次 callback 函數,直到找到一個使得 callback 返回一個“真值”(即可轉換為布爾值 true 的值)。如果找到了這樣一個值,some 將會立即返回 true,且剩余的元素不會再進行檢測。否則,some() 返回 false。檢測數組中的每一項是否符合條件,如果每一項都符合條件,就會返回true,否則返回false,有點像遍歷數組且操作callback。callback 只會在那些”有值“的索引上被調用,不會在那些被刪除或從來未被賦值的索引上調用。另外,some() 方法不會對空數組進行檢測。

  • 語法:arr.every(callback[, thisArg])
    callback (執行數組中每個值的函數,包含三個參數)

    • currentValue:必須。當前元素的值;
    • currentIndex:可選,當前元素的索引;
    • array:可選,當前元素所屬的數組對象。
var arr = [1, 2, 3, 4];
var result = arr.some(function(item,index,array){
return item > 3;
});
console.log(result)//true
  • 遍歷數組和對象的幾種方法簡單的介紹完,小結如下:
    1)for in 既支持對象也支持數組遍歷;
    2)for , do/while , forEach 只支持數組;
    3)Array.prototype.map, Array.prototype.every 只支持數組和形似數組的對象;
    4)forEach不能退出循環,只能通過return來進入到下一個元素的遍歷中(相當于for循環的continue),且在IE沒有實現該方法;
    5)$.each循環只能通過return false 來退出循環,使用return 或 return true 將跳過一個元素,繼續執行后面的循環。

以上就是這篇文章的全部內容了, 如果發現本文有不對之處, 歡迎批評斧正。同時也希望本文內容對大家的學習或者工作能帶來幫助,如有疑問大家可以留言交流,謝謝大家對小萌的支持。