国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

for循環和for in在遍歷數組中的區別

wangbinke / 675人閱讀

摘要：舉個例子，如果你的數組中有一個可枚舉屬性，循環將額外執行一次，遍歷到名為的索引。就連數組原型鏈上的屬性都能被訪問到。某些情況下，可能按照隨機順序遍歷數組元素。

困惑

在練習數組操作的時候，希望實現刪除數組中特定元素（比如刪除字符“1”）的功能
很容易地就想到了利用for循環和splice方法

for (let i = 0; i < hobbies.length; i++) {
        if (hobbies[i] == "1") {
            hobbies.splice(i, 1);
            i--;
        }
    }

測試結果
"1", "2", "3","1", "1", "4", "1"
"2", "3", "4"

如愿達成目標，不過想起來還有for in這個東西，似乎寫起來更簡潔
那用for in行不行呢

for(var i in hobbies)
    {
        if(hobbies[i]=="1")
        {
            hobbies.splice(i,1);
            i--;
        }
    }
    
測試結果
"1", "2", "3", "1", "1","4"
"2", "3", "1", "4"

為什么中間多了一個"1"出來？發生了什么？

測試

添加console.log語句觀測i值的變化

for(var i in hobbies)
    {
        console.log("判斷前"+i);
        if(hobbies[i]=="1")
        {
            hobbies.splice(i,1);
            i=i+1;
        }
        console.log("判斷后"+i)
    }
結果
判斷前0
判斷后-1
判斷前1
判斷后1
判斷前2
判斷后1
判斷前3
判斷后3

可以看到，在第一次刪去1后，i--由0變成了-1
但下一次判斷的時候，i直接由-1跳到了1

隱藏的陷阱

在查詢資料之后，才發現問題出在了i的類型上

標準的for循環中的i是number類型,表示的是數組的下標
但是for in循環中的i, 表示的是數組的key是string類型!

由于隱式類型轉換的機制，這個區別被隱藏了起來
因為我測試的時候，用的是i--
而字符串，在運用遞增遞減符號的時候，會把它轉換成number類型
因此雖然i是字符”1“，但也變成了0
如果我用的是i=i+1
字符串加數字，會把數字轉化成字符串拼接，出現01這樣的結果
那么這個區別就會被我監測到
另外，在splice函數中，參數用了字符串也并沒有影響最后的結果，因為也進行了隱式轉換

實際發生的事

在先前，我們刪除了元素后，給i--，想當然地覺得下一次變量的值會+1，變回i，就可以對刪除的元素后面的一個元素進行判斷（因為它的角標數值由i+1，變成了i）
在for循環中是沒事的，但在for in里面
i--這個操作其實沒有任何意義，即便給i隨便賦一個值，它的下一次取值依然是i+1
因為它是根據數組的元素鍵值（索引）來進行遍歷的，string類型的0，1，2，3，4...arr.length-1已經排好了，并不會因為中途i的值有所變化而改變

除此之外，for in還有一些坑

?作用于數組的for-in循環體除了遍歷數組元素外，還會遍歷自定義屬性。舉個例子，如果你的數組中有一個可枚舉屬性myArray.name，循環將額外執行一次，遍歷到名為“name”的索引。就連數組原型鏈上的屬性都能被訪問到。
?某些情況下，for in可能按照隨機順序遍歷數組元素。

因此不適合用for in來遍歷數組
for in適合用來遍歷對象

P.S

如果用forEach呢
結果如下

hobbies.forEach(function(value,index,hobbies){
        console.log("判斷前"+index);
        if(value=="1")
        {
            hobbies.splice(index,1);
            console.log(typeof index);
            index=index-1;
            // console.log("二"+i);
        }
        console.log("判斷后"+index);
    });
["1", "2", "3", "1", "1", "4", "1"]
判斷前0
number
判斷后-1
判斷前1
判斷后1
判斷前2
number
判斷后1
判斷前3
判斷后3
判斷前4
number
判斷后3
["2", "3", "1", "4"]

數組中有幾項，那么傳遞進去的匿名回調函數就執行幾次

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103127.html

相關文章

  • JS 數組循環遍歷方法的對比

    摘要：循環方法方法不改變原數組方法會給原數組中的每個元素都按順序調用一次函數。篩選出過濾出數組中符合條件的項組成新數組代碼方法方法為數組中的每個元素執行一次函數，直到它找到一個使返回表示可轉換為布爾值的值的元素。 showImg(https://segmentfault.com/img/bV2QTD?w=1600&h=500); 前言 JavaScript 發展至今已經發展出多種數組的循環遍...

    BlackFlagBin 評論0 收藏0

  • 【快速入門系列】簡述 for...in 和 for...of 區別

    摘要：像和使用內置構造函數所創建的對象都會繼承自和的不可枚舉屬性，例如的方法或的方法。循環將遍歷對象本身的所有可枚舉屬性，以及對象從其構造函數原型中繼承的屬性更接近原型鏈中對象的屬性覆蓋原型屬性。遍歷數組時推薦使用，其中為數組每一項的值。 引言 在對數組或對象進行遍歷時，我們經常會使用到兩種方法：for...in 和 for...of，那么這兩種方法之間的區別是什么呢？讓我們來研究研究。 一...

    ashe 評論0 收藏0

  • 數組常見的遍歷循環方法、數組的循環遍歷的效率對比

    摘要：場景檢查數組中是否含有某個東西和是對立的案例案例是否包含為對象循環遍歷效率對比參考參考原生實現等方法其他參考 1 遍歷數組的方法 1-1、for / while 最普通的循環 效率最高 兼容ie6tips:for循環更適用于循環的開始和結束已知，循環次數固定的場合；while循環更適合于條件不確定的場合 1-2、for in 兼容ie6，效率最差（效率可看最下面的對比） for in...

    xfee 評論0 收藏0

  • 關于JS循環遍歷

    摘要：關于循環遍歷寫下這篇文章的目的，主要是想總結一下關于對于集合對象遍歷的方式方法，以及在實際應用場景中怎樣去使用它們。的作用主要是去遍歷對象的可枚舉屬性。例如索引，數值打印結果為當第二項不滿足條件式跳出循環，返回。 關于JS循環遍歷 寫下這篇文章的目的，主要是想總結一下關于JS對于集合對象遍歷的方式方法，以及在實際應用場景中怎樣去使用它們。本文會主要介紹：while,for,forEac...

    eternalshallow 評論0 收藏0

  • JS中輕松遍歷對象屬性的幾種方式

    摘要：當普通對象要轉換成時就很有用，因為返回的格式與構造函數接受的格式完全相同。使用常規的構造函數可以將一個二維鍵值對數組轉換成一個對象。在和早期標準中，根本沒有指定屬性的順序。此函數還可以輕松地將純對象屬性映射到對象中。 為了保證的可讀性，本文采用意譯而非直譯。 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ 自身可枚舉屬性 Object.keys() 方法會返回一個...

    isLishude 評論0 收藏0

發表評論

0條評論

wangbinke

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<