在開始解剖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
并沒有進行加法運算,而是進行了字符串拼接孤个?難道index
是string
類型剃允?
別著急,我們來驗證一下齐鲤,添加如下代碼:
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)這樣的問題了辽故,但是并不建議這樣使用徒仓。