js迴圈遍歷

2021-08-18 03:23:09 字數 1729 閱讀 4117

方式一

var arr = [1,2,3,4,5];

for(let i = 0;i方式一利用for迴圈來遍歷陣列的缺點就是:**不夠簡潔。

下面介紹乙個寫法更加簡潔的方式。

方式二var arr = [1,2,3,4,5];

arr.foreach(function (value,index) );

利用foreach迴圈**量少了很多,寫法更加簡潔,缺點就是:無法中斷停止整個迴圈。

方式三

var arr = [1,2,3,4,5];

for(let i in arr)

for...in迴圈更常用於物件的迴圈,如果用於陣列的迴圈,那麼就要注意了,上述**中每次迴圈中得到的i是字串型別,而不是預料中的數字型別,要想對它進行運算,那得先要進行型別轉換,造成不方便。

來看看for...of的是實現:

var arr = [1,2,3,4,5];

for(let value of arr)

//列印結果:依次輸出:1 2 3 4 5

看樣子是不是有點眼熟,很像for...in?確實很像。它的實現跟for...in很類似。

我們列舉一下for...of的優勢:

寫法比for迴圈簡潔很多;

可以用break來終止整個迴圈,或者continute來跳出當前迴圈,繼續後面的迴圈;

結合keys( )獲取到迴圈的索引,並且是數字型別,而不是字串型別。

分別來展示一下上述的幾個優點:

迴圈可以終止

var arr = [1,2,3,4,5];

for(let value of arr)

console.log(value);

}//列印結果:1 2

以上案例:用break實現了終止整個迴圈,不會繼續後面的遍歷,所以列印結果為:1  2。

可跳過當前迴圈

var arr = [1,2,3,4,5];

for(let value of arr)

console.log(value);

}//列印結果:1 2 4  5

用continue跳過當前迴圈,繼續後面的迴圈,所以列印結果為:1  2  4  5。

得到數字型別的索引

var arr = [1,2,3,4,5];

for(let index of arr.keys())

//列印結果:依次輸出:0 1 2 3 4

此外,相比於for...in迴圈專門為物件設計,for...of迴圈的適用範圍更廣。

遍歷字串

for...of 支援字串的遍歷。

let word = "我是前端小菜鳥";

for(let w of word)

//列印結果:我  是  前  端  小 菜 鳥

遍歷dom list

for...of支援類陣列的遍歷,例如dom list。

//假設有3個p元素

let plist = document.getelementsbytagname('p');

for(let p of plist)

// 列印結果:

//          

//

還有一些其它的遍歷 後續再新增~···

js 迴圈 遍歷方法 跳出迴圈

for有三個表示式 宣告迴圈變數 判斷迴圈條件 更新迴圈變數 三個表示式之間,用 分割,for迴圈三個表示式都可以省略,但是兩個 缺一 不可。for迴圈的執行特點 先判斷再執行,與while相同 for迴圈三個表示式都可以有多部分組成,第二部分多個判斷條件用 連線,第一三部分用逗號分割 for va...

js迴圈遍歷性能

定length for迴圈 有length 不定length for迴圈 使用陣列length 不定length for迴圈 判斷陣列length是否存在 foreach array自帶,對某些不適用例如 nodelist forof es6 mapforin 結論 普通for迴圈才是最優雅的 ps...

總結js中的迴圈遍歷

定義乙個陣列和物件 const arr a b c d e f const obj 經常用來遍歷陣列元素 遍歷值為陣列元素索引for let i 0 len arr.length,i len i 用來遍歷陣列元素 第乙個引數為陣列元素,第二個引數為陣列元素索引,第三個引數為陣列本身 可選 沒有返回值...