看到一篇內容還不錯,但是排版實在糟糕,
逼死強迫症患者啊,直接拉下去找原文連接,找到了,但是已經消失了···500錯誤...
第一次因為實在看不下去一篇博客的排版,
為了排版而轉載...
正文↓
js數組遍歷相信大家都不陌生,很多人會想到for循環和 for...in...循環,但是千萬不要使用for...in...循環遍歷數組,特別是如果你想寫點有用的,能夠移植的代碼時。下面我們來看看這個可惡的for...in...。
1、語法
for (variable in object) { //do sth ... }
這個語法中有個object,我們知道在javascript中對象這個概念是很寬泛的,那這個地方的對象可以是數組嗎?當然可以,下面是一個例子:
var a = [1, 2, 3, 4]; for(var i in a){ console.log(a[i]); }
這段代碼並不出人所料,會輸出 1 2 3 4,一點問題都沒有,並且是非常正確的用法。但是這只是通常是正確的。
2、for...in...遍歷數組的問題
先上代碼:
Array.prototype.searchItem = function(value){//函數已被簡化 return right; } var a = [1, 2, 3, 4]; for(var i in a){ console.log(a[i]); }
這段代碼就是在上邊的代碼的基礎上,為Array做了一下擴充。很簡單,只是添加了一個用於搜索的函數(這個函數已被我簡化成和上邊那樣)。但是我們來看運行會出現什么情況:
function (value){ return right; }
輸出的結果中,多出了一行,這一行是一個函數,不是我們定義在數組中的值。到此這個問題就出來了。這個真的是你的本意嗎?答案是否定的。
綜上所述,用for...in...在通常情況下確實可以正確運行,但是如果我們的代碼時放到別人的環境中也想跑,那請不要使用for...in...來循環數組。並且這種錯誤往往真的很隱蔽。
3、如何解決上述問題——老老實實寫for循環
在上述的兩種(一種正確,一種錯誤)情況下,for循環總是可以很好的運行,代碼如下:
1 Array.prototype.searchItem = function(value){ 2 return right; 3 } 4 5 var a = [1, 2, 3, 4]; 6 for(var i = 0; i< a.length; i++){ 7 console.log(a[i]); 8 }
老老實實寫好for循環是避免這個錯誤的最好的做法了。當然還有別的辦法,這是這個辦法可以在未來可用,
使用 for...of...語句,但是這個只能在未來使用,而不是現在,
可以參考https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of 。
總結一下,用簡單的方法去解決復雜的問題是我們程序員的基本思路,當然如果你為了花哨而落入陷阱那你只能自己爬出來。