（一）for...in引發(fā)的一個報錯

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

for

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

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

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

（二）for...in細(xì)節(jié)

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

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

const

打印：

0

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

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

const

輸出：

a

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

3. 細(xì)節(jié)三：遍歷順序是對象屬性的枚舉順序，并不一定按數(shù)組的下標(biāo)順序遍歷

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

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

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

作者：MuMa

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。