成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

for循環(huán)和for in在遍歷數(shù)組中的區(qū)別

wangbinke / 703人閱讀

摘要：舉個(gè)例子，如果你的數(shù)組中有一個(gè)可枚舉屬性，循環(huán)將額外執(zhí)行一次，遍歷到名為的索引。就連數(shù)組原型鏈上的屬性都能被訪(fǎng)問(wèn)到。某些情況下，可能按照隨機(jī)順序遍歷數(shù)組元素。

困惑

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

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

測(cè)試結(jié)果
"1", "2", "3","1", "1", "4", "1"
"2", "3", "4"

如愿達(dá)成目標(biāo)，不過(guò)想起來(lái)還有for in這個(gè)東西，似乎寫(xiě)起來(lái)更簡(jiǎn)潔
那用for in行不行呢

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

為什么中間多了一個(gè)"1"出來(lái)？發(fā)生了什么？

測(cè)試

添加console.log語(yǔ)句觀測(cè)i值的變化

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

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

隱藏的陷阱

在查詢(xún)資料之后，才發(fā)現(xiàn)問(wèn)題出在了i的類(lèi)型上

標(biāo)準(zhǔn)的for循環(huán)中的i是number類(lèi)型,表示的是數(shù)組的下標(biāo)
但是for in循環(huán)中的i, 表示的是數(shù)組的key是string類(lèi)型!

由于隱式類(lèi)型轉(zhuǎn)換的機(jī)制，這個(gè)區(qū)別被隱藏了起來(lái)
因?yàn)槲覝y(cè)試的時(shí)候，用的是i--
而字符串，在運(yùn)用遞增遞減符號(hào)的時(shí)候，會(huì)把它轉(zhuǎn)換成number類(lèi)型
因此雖然i是字符”1“，但也變成了0
如果我用的是i=i+1
字符串加數(shù)字，會(huì)把數(shù)字轉(zhuǎn)化成字符串拼接，出現(xiàn)01這樣的結(jié)果
那么這個(gè)區(qū)別就會(huì)被我監(jiān)測(cè)到
另外，在splice函數(shù)中，參數(shù)用了字符串也并沒(méi)有影響最后的結(jié)果，因?yàn)橐策M(jìn)行了隱式轉(zhuǎn)換

實(shí)際發(fā)生的事

在先前，我們刪除了元素后，給i--，想當(dāng)然地覺(jué)得下一次變量的值會(huì)+1，變回i，就可以對(duì)刪除的元素后面的一個(gè)元素進(jìn)行判斷（因?yàn)樗慕菢?biāo)數(shù)值由i+1，變成了i）
在for循環(huán)中是沒(méi)事的，但在for in里面
i--這個(gè)操作其實(shí)沒(méi)有任何意義，即便給i隨便賦一個(gè)值，它的下一次取值依然是i+1
因?yàn)樗歉鶕?jù)數(shù)組的元素鍵值（索引）來(lái)進(jìn)行遍歷的，string類(lèi)型的0，1，2，3，4...arr.length-1已經(jīng)排好了，并不會(huì)因?yàn)橹型緄的值有所變化而改變

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

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

因此不適合用for in來(lái)遍歷數(shù)組
for in適合用來(lái)遍歷對(duì)象

P.S

如果用forEach呢
結(jié)果如下

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"]

數(shù)組中有幾項(xiàng)，那么傳遞進(jìn)去的匿名回調(diào)函數(shù)就執(zhí)行幾次

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/103127.html

相關(guān)文章

  • JS 數(shù)組循環(huán)遍歷方法的對(duì)比

    摘要：循環(huán)方法方法不改變?cè)瓟?shù)組方法會(huì)給原數(shù)組中的每個(gè)元素都按順序調(diào)用一次函數(shù)。篩選出過(guò)濾出數(shù)組中符合條件的項(xiàng)組成新數(shù)組代碼方法方法為數(shù)組中的每個(gè)元素執(zhí)行一次函數(shù)，直到它找到一個(gè)使返回表示可轉(zhuǎn)換為布爾值的值的元素。 showImg(https://segmentfault.com/img/bV2QTD?w=1600&h=500); 前言 JavaScript 發(fā)展至今已經(jīng)發(fā)展出多種數(shù)組的循環(huán)遍...

    BlackFlagBin 評(píng)論0 收藏0

  • 【快速入門(mén)系列】簡(jiǎn)述 for...in 和 for...of 區(qū)別

    摘要：像和使用內(nèi)置構(gòu)造函數(shù)所創(chuàng)建的對(duì)象都會(huì)繼承自和的不可枚舉屬性，例如的方法或的方法。循環(huán)將遍歷對(duì)象本身的所有可枚舉屬性，以及對(duì)象從其構(gòu)造函數(shù)原型中繼承的屬性更接近原型鏈中對(duì)象的屬性覆蓋原型屬性。遍歷數(shù)組時(shí)推薦使用，其中為數(shù)組每一項(xiàng)的值。 引言 在對(duì)數(shù)組或?qū)ο筮M(jìn)行遍歷時(shí)，我們經(jīng)常會(huì)使用到兩種方法：for...in 和 for...of，那么這兩種方法之間的區(qū)別是什么呢？讓我們來(lái)研究研究。 一...

    ashe 評(píng)論0 收藏0

  • 數(shù)組常見(jiàn)的遍歷循環(huán)方法、數(shù)組的循環(huán)遍歷的效率對(duì)比

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

    xfee 評(píng)論0 收藏0

  • 關(guān)于JS循環(huán)遍歷

    摘要：關(guān)于循環(huán)遍歷寫(xiě)下這篇文章的目的，主要是想總結(jié)一下關(guān)于對(duì)于集合對(duì)象遍歷的方式方法，以及在實(shí)際應(yīng)用場(chǎng)景中怎樣去使用它們。的作用主要是去遍歷對(duì)象的可枚舉屬性。例如索引，數(shù)值打印結(jié)果為當(dāng)?shù)诙?xiàng)不滿(mǎn)足條件式跳出循環(huán)，返回。 關(guān)于JS循環(huán)遍歷 寫(xiě)下這篇文章的目的，主要是想總結(jié)一下關(guān)于JS對(duì)于集合對(duì)象遍歷的方式方法，以及在實(shí)際應(yīng)用場(chǎng)景中怎樣去使用它們。本文會(huì)主要介紹：while,for,forEac...

    eternalshallow 評(píng)論0 收藏0

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

    摘要：當(dāng)普通對(duì)象要轉(zhuǎn)換成時(shí)就很有用，因?yàn)榉祷氐母袷脚c構(gòu)造函數(shù)接受的格式完全相同。使用常規(guī)的構(gòu)造函數(shù)可以將一個(gè)二維鍵值對(duì)數(shù)組轉(zhuǎn)換成一個(gè)對(duì)象。在和早期標(biāo)準(zhǔn)中，根本沒(méi)有指定屬性的順序。此函數(shù)還可以輕松地將純對(duì)象屬性映射到對(duì)象中。 為了保證的可讀性，本文采用意譯而非直譯。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你！ 自身可枚舉屬性 Object.keys() 方法會(huì)返回一個(gè)...

    isLishude 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<