（一）for...in引發的一個報錯

兩年前寫的一個文章目錄生成插件vue-outline，一直用著沒出啥問題（本站的文章目錄也是用該插件生成的）。但是最近一個網友在使用的時候卻出現了異常報錯，異常代碼使用了一個for...in遍歷數組：

for

代碼本意是，通過用戶給定的選擇器列表selectors確定哪些元素可以提取出來作為標題，比如傳一個['h1', 'h3', 'div.title']。網友的使用方法完全正確，selectors傳遞的都是合法的選擇器，但是會出現以下報錯：

一個函數不是一個合法的選擇器？selectors里傳遞的都是選擇器。最后這位網友找到了原因，可能和for...in有關系，因為他在數組的原型上添加了一些便捷的方法：

而for...in會遍歷出原型上的這些方法，這就導致在執行前面的代碼時，把一個函數作為參數傳遞給了querySelectorAll，導致報錯！

（二）for...in細節

for...in本身是Object的遍歷方法，JS中的數組也繼承自Object，所以自然而然也能使用for...in遍歷出屬性。然而for...in有一些難以注意到的細節，稍不注意就可能被坑。

1. 細節一： 遍歷的的屬性值是字符串，而不是數字！（相信初接觸JS的人都要被坑一次吧）

const

打印：

0

可以看到typeof i的返回值是“string”，這個最坑的地方在于我們通過下標加減想取別的元素時，就會出現異常，像上述輸出的i + 1一樣，并不是數字相加，而是字符串拼接！

2. 細節二：遍歷的是對象的枚舉屬性，包括自身屬性以及原型鏈上的屬性

const

輸出：

a

可以看到，原型上的屬性c也打印出來了，但是通過Object.defineProperty定義的不可枚舉屬性d（enumerable: false）沒有被遍歷到。

3. 細節三：遍歷順序是對象屬性的枚舉順序，并不一定按數組的下標順序遍歷

for...in的遍歷順序是枚舉順序，對于數組而言，規范并沒有約束各瀏覽器的實現。因此即便在一定范圍內是按順序遍歷的，也應該盡量不依賴for...in遍歷的順序。MDN文檔也明確指出，不建議使用for...in遍歷數組，特別是想按照索引順序遍歷的時候：

此外，因為有稀疏數組的存在，其實JS里的數組不一定是順序結構存儲的。當數組的鍵分布較為稀疏，為了充分節約空間，數組可能會退化為像對象一樣的哈希表存儲結構。

因為for...in本身是對象的遍歷方法，并不適用于數組，對于數組，還是for...of、for循環、forEach等遍歷比較好。

作者：MuMa

鏈接：為什么不推薦用for...in遍歷數組 - 沐碼小站

總結

以上是生活随笔為你收集整理的@value 数组_为什么不推荐用for...in遍历数组的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。