1. 程式人生 > 程式設計 >JS中for,for...in,for...of和forEach的區別和用法例項

JS中for,for...in,for...of和forEach的區別和用法例項

for迴圈

基本語法格式:

for(初始化變數;條件表示式;操作表示式){

迴圈體語句;
}

普通for迴圈在Array和Object中都可以使用。for迴圈中可以使用return、break等來中斷迴圈。

//遍歷陣列
        var arr = [1,2,3,4,5];
        for(var i=0;i<arr.length;i++){
            console.log(arr[i]);
        }
//遍歷物件
        var obj={
            x0:10,x1:20,x2:30
        }
        for(var k=0;k<3;k++){
            console.log(obj['x'+k]);
        }

在遍歷物件時,顯然存在著很大的限制,對屬性的命名和k的值都存在限制。

forEach迴圈

基本語法格式:

arr.forEach(function(k){
console.log(k);
})

依次從陣列中取出元素放在k中,然後將k作為引數傳遞給函式

.forEach()是Array原型的一種方法,它允許您遍歷陣列的元素, .forEach()不能遍歷物件。forEach 方法沒辦法使用 break 語句跳出迴圈,或者使用return從函式體內返回。

//遍歷陣列
        var arr = [3,9,5];
         arr.forEach(function(value,arr){
            console.log(valueEflzWS
); })

for…in迴圈

基本語法格式:

for(var 變數 in 陣列名或集合名)
{
陣列名[變數]
}

變數中存放的陣列或集合的索引。

 //遍歷陣列
        var arr = [1,5];
        for(var i in arr){
            console.log(arr[i]);
        }
//遍歷物件
        var obj={
            x0:10,            x1:20,x2:30
        }
        for(var k in obj){
            console.log(obj[k]);
        }

1.下標的值可能會是字串(String)型別

2.迴圈不僅會遍歷陣列元素,還會遍歷任意其他自定義新增的屬性,如,obj上面包含自定義屬性,obj.name,那這次迴圈中也會出現此name屬性

3.某些情況下,上述程式碼會以隨機順序迴圈陣列

fohttp://www.cppcns.comr-in迴圈設計之初,是給普通以字串的值為key的物件使用的。而非陣列。

for…of迴圈

基本語法格式:

for(var 變數 of 陣列名或集合名)
&nbshttp://www.cppcns.comp; {
console.log(變數);
}

變數中存放的是陣列或集合中的元素EflzWS

 //遍歷陣列
         var arr = [3,5];
         for(var value of arr){
            console.log(value);
         }
//遍歷物件
        var obj={
            x0:10,x2:30
        }
        for(var k of Object.entries(obj)){
            console.log(k);
        }

entries() 方法返回一個數組的迭代物件,該物件包含陣列的鍵值對 (key/value)。

迭代物件中陣列的索引值作為 key, 陣列元素作為 value。

1.可以避免所有 for-in 迴圈的陷阱

2.不同於 forEach(),可以使用 break,continue 和 return

3.for-of 迴圈不僅僅支援陣列的遍歷。同樣適用於很多類似陣列的物件

4.它也支援字串的遍歷

5.for-of 並不適用於處理原有的原生物件

總結

1.'for…in'用於迭代物件的所有'可列舉'屬性,包括繼承的可列舉屬性,該迭代語句可用於陣列字串或普通物件,但不能用於Map或Set物件

2.'for…of'用於'可迭代'物件,迭代其值而不是其屬性,該迭代語句可以與陣列,字串Map或Set物件一起使用,但不能與普通物件一起使用。

到此這篇關於中for,for...in,for...of和forEach的區別和用法的文章就介紹到這了,更多相關JS中for,for...of,forEach區別內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!