《ES6解剖課》for-of的前世今生(1)

在開始解剖ES6之前瘦麸,我們首先需要知道:

任何一次版本的迭代狞换,必然是彌補以前的不足,或者為了更好發(fā)展的鋪墊裕坊。而對于ES6的第一位成員for-of來說包竹,是為了彌補什么,又或者在鋪墊什么呢?

首先我們來看以下代碼:

需求:我們需要比較當前循環(huán)的item與下一項item的大小

var arr1 = [1,2,3,4,5];
for(var index in arr1){
        console.info(arr1[index] < arr1[index+1]);
        if(index === 3){
                break;
        }
}

對于這段最簡單的js代碼周瞎,我們先來目測一下苗缩,比較結(jié)果貌似肯定是后面的值大于前面,輸出結(jié)果自然也就是true了声诸,所以酱讶,理論上的輸出結(jié)果是這樣的:

true
true
true
true

然而,實際上卻是這樣的:

false
false
false
false
false

什么鬼彼乌?
我們可以很明顯的看到泻肯,這兒不止是輸出結(jié)果是false,而且很明顯慰照,break也沒有起到作用软免,竟然輸出了5次,問題出在什么地方焚挠?

為了找出問題,我們不得不在循環(huán)內(nèi)添加這個代碼來判斷arr1[index+1]究竟是什么:

console.info("index:"+arr1[index] +" -- index2"+ arr1[index+1]);

輸出結(jié)果是這樣的:

index:1 -- index2:undefined
index:2 -- index2:undefined
index:3 -- index2:undefined
index:4 -- index2:undefined
index:5 -- index2:undefined

What? arr1[index+1]undefined? 1+1=undefined?
顯然不可能漓骚,那么問題肯定是出在了index+1上了蝌衔,接下來我們看看這個index+1究竟是個什么玩意:
添加以下代碼:

console.info(index+1);

結(jié)果如下:

01
11
21
31
41

很顯然,和我們預(yù)計中的結(jié)果不一樣蝌蹂,而且非常明顯噩斟,index+1并沒有進行加法運算,而是進行了字符串拼接孤个?難道indexstring類型剃允?
別著急,我們來驗證一下齐鲤,添加如下代碼:

console.info(typeof(index));

結(jié)果如下:

string
string
string
string
string

這個時候斥废,答案已經(jīng)呼之欲出了,沒錯的给郊,index的值是string類型的牡肉,哦買噶的...

沒錯,使用for-in進行迭代的時候淆九,我們得到的索引值并非是int類型统锤,而是string類型

所以,使用for-in的小伙伴們以后可要注意嘍炭庙,別掉進這個坑里面了饲窿。

至于如何解決這個問題,我們會在后面進行講解焕蹄。

那么為什么循環(huán)了5次逾雄,而不是4次呢?這是因為在===這樣嚴格相等的模式下,js解析器是會判斷變量類型的嘲驾,當然淌哟,如果使用==這樣的非嚴格模式,就不會出現(xiàn)這樣的問題了辽故,但是并不建議這樣使用徒仓。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市誊垢,隨后出現(xiàn)的幾起案子掉弛,更是在濱河造成了極大的恐慌,老刑警劉巖喂走,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件殃饿,死亡現(xiàn)場離奇詭異,居然都是意外死亡芋肠,警方通過查閱死者的電腦和手機乎芳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來帖池,“玉大人奈惑,你說我怎么就攤上這事∷冢” “怎么了肴甸?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長囚巴。 經(jīng)常有香客問我原在,道長,這世上最難降的妖魔是什么彤叉? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任庶柿,我火速辦了婚禮,結(jié)果婚禮上秽浇,老公的妹妹穿的比我還像新娘澳泵。我一直安慰自己,他們只是感情好兼呵,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布兔辅。 她就那樣靜靜地躺著,像睡著了一般击喂。 火紅的嫁衣襯著肌膚如雪维苔。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天懂昂,我揣著相機與錄音介时,去河邊找鬼。 笑死,一個胖子當著我的面吹牛沸柔,可吹牛的內(nèi)容都是我干的循衰。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼褐澎,長吁一口氣:“原來是場噩夢啊……” “哼会钝!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起工三,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤迁酸,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后俭正,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體奸鬓,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年掸读,在試婚紗的時候發(fā)現(xiàn)自己被綠了串远。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡儿惫,死狀恐怖澡罚,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情姥闪,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布砌烁,位于F島的核電站筐喳,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏函喉。R本人自食惡果不足惜避归,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望管呵。 院中可真熱鬧梳毙,春花似錦、人聲如沸捐下。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽坷襟。三九已至奸柬,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間婴程,已是汗流浹背廓奕。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人桌粉。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓蒸绩,卻偏偏與公主長得像,于是被迫代替她去往敵國和親铃肯。 傳聞我的和親對象是個殘疾皇子患亿,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容