for循環(huán)

基本語(yǔ)法格式：

 for(初始化變量;條件表達(dá)式;操作表達(dá)式){
    
        循環(huán)體語(yǔ)句;
    }

普通for循環(huán)在Array和Object中都可以使用。for循環(huán)中可以使用return、break等來(lái)中斷循環(huán)。

//遍歷數(shù)組
        var arr = [1,2,3,4,5];
        for(var i=0;i<arr.length;i++){
            console.log(arr[i]);
        }

//遍歷對(duì)象
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k=0;k<3;k++){
            console.log(obj['x'+k]);
        }

在遍歷對(duì)象時(shí)，顯然存在著很大的限制，對(duì)屬性的命名和k的值都存在限制。

forEach循環(huán)

基本語(yǔ)法格式：

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

依次從數(shù)組中取出元素放在k中,然后將k作為參數(shù)傳遞給函數(shù)

.forEach()是Array原型的一種方法，它允許您遍歷數(shù)組的元素， .forEach()不能遍歷對(duì)象。forEach 方法沒(méi)辦法使用 break 語(yǔ)句跳出循環(huán)，或者使用return從函數(shù)體內(nèi)返回。

//遍歷數(shù)組
        var arr = [3,2,3,9,5];
         arr.forEach(function(value,arr){
            console.log(value);
         })

for…in循環(huán)

基本語(yǔ)法格式：

for(var 變量  in  數(shù)組名或集合名)
   {
      數(shù)組名[變量]
   }

變量中存放的數(shù)組或集合的索引。

 //遍歷數(shù)組
        var arr = [1,2,3,4,5];
        for(var i in arr){
            console.log(arr[i]);
        }

//遍歷對(duì)象
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k in obj){
            console.log(obj[k]);
        }

1.下標(biāo)的值可能會(huì)是字符串（String）類型

2.循環(huán)不僅會(huì)遍歷數(shù)組元素，還會(huì)遍歷任意其他自定義添加的屬性，如，obj上面包含自定義屬性，obj.name，那這次循環(huán)中也會(huì)出現(xiàn)此name屬性

3.某些情況下，上述代碼會(huì)以隨機(jī)順序循環(huán)數(shù)組

for-in循環(huán)設(shè)計(jì)之初，是給普通以字符串的值為key的對(duì)象使用的。而非數(shù)組。

for…of循環(huán)

基本語(yǔ)法格式：

 for(var 變量 of 數(shù)組名或集合名)
   {
       console.log(變量);
   }

變量中存放的是數(shù)組或集合中的元素。

 //遍歷數(shù)組
         var arr = [3,2,3,9,5];
         for(var value of arr){
            console.log(value);
         }

//遍歷對(duì)象
        var obj={
            x0:10,
            x1:20,
            x2:30
        }
        for(var k of Object.entries(obj)){
            console.log(k);
        }

entries() 方法返回一個(gè)數(shù)組的迭代對(duì)象，該對(duì)象包含數(shù)組的鍵值對(duì) (key/value)。

迭代對(duì)象中數(shù)組的索引值作為 key， 數(shù)組元素作為 value。

1.可以避免所有 for-in 循環(huán)的陷阱

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

3.for-of 循環(huán)不僅僅支持?jǐn)?shù)組的遍歷。同樣適用于很多類似數(shù)組的對(duì)象

4.它也支持字符串的遍歷

5.for-of 并不適用于處理原有的原生對(duì)象

總結(jié)

1.'for…in'用于迭代對(duì)象的所有'可枚舉'屬性，包括繼承的可枚舉屬性, 該迭代語(yǔ)句可用于數(shù)組字符串或普通對(duì)象，但不能用于Map或Set對(duì)象

2.'for…of'用于'可迭代'對(duì)象，迭代其值而不是其屬性，該迭代語(yǔ)句可以與數(shù)組，字符串Map或Set對(duì)象一起使用，但不能與普通對(duì)象一起使用。

到此這篇關(guān)于JS中for,for...in,for...of和forEach的區(qū)別和用法的文章就介紹到這了,更多相關(guān)JS中for,for...in,for...of,forEach區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論