JavaScript中利用for循環(huán)遍歷數(shù)組
先看一段代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // 一個普通的數(shù)組 var arr =[3,5,2,6]; // 普通的for 循環(huán)遍歷 for(var i = 0 ; i < arr.length; i++){ console.log(i,"類型:"+typeof i,arr[i]); } // 用for in 遍歷數(shù)組 for(var k in arr){ console.log(k,"類型:"+typeof k,arr[k]); } </script> </body> </html>
這段代碼顯示出了 一點 for循環(huán)遍歷數(shù)組 和for in 循環(huán)遍歷 數(shù)組的一點區(qū)別:
標(biāo)準(zhǔn)的for循環(huán)中的i是number類型,表示的是數(shù)組的下標(biāo),但是foreach循環(huán)中的i表示的是數(shù)組的key是string類型。
這還不是坑,只是一點區(qū)別。
再看一段代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // 一個普通的數(shù)組 var arr =[3,5,2,6]; // 在數(shù)組原型上擴(kuò)展一個方法 Array.prototype.extend = function(){ console.log("在數(shù)組原型擴(kuò)展一個方法"); } // 普通的for 循環(huán)遍歷 for(var i = 0 ; i < arr.length; i++){ console.log(i,"類型:"+typeof i,arr[i]); } // 用for in 遍歷數(shù)組 for(var k in arr){ console.log(k,"類型:"+typeof k,arr[k]); } </script> </body> </html>
這段代碼就是在上邊的代碼的基礎(chǔ)上,為Array做了一下擴(kuò)充。很簡單,只是添加了一個函數(shù)。但是我們來看運行會出現(xiàn)了什么情況:
輸出的結(jié)果中,多出了一行,這一行就是我們擴(kuò)展的一個函數(shù),不是我們定義在數(shù)組中的值。到此這個問題就出來了。
綜上所述,用for...in...在通常情況下確實可以正確運行。
但是如果我們在項目采用的是用foreach遍歷數(shù)組,假設(shè)有一天誰不小心自己為了擴(kuò)展js原生的Array類,或者引入一個外部的js框架也擴(kuò)展了原生Array。那問題就來了。
所以最好還是用for循環(huán)遍歷數(shù)組
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
原生JavaScript實現(xiàn)todolist功能
本篇文章給大家介紹了通過原生JavaScript實現(xiàn)todolist功能相關(guān)知識點,對此有需要的朋友可以學(xué)習(xí)下。2018-03-03Postman參數(shù)化實現(xiàn)過程及原理解析
這篇文章主要介紹了Postman參數(shù)化實現(xiàn)過程及原理解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-08-08Javascript遍歷Html Table示例(包括內(nèi)容和屬性值)
這篇文章主要介紹了Javascript如何遍歷Html Table(包括內(nèi)容和屬性值),需要的朋友可以參考下2014-07-07javascript省市區(qū)三級聯(lián)動下拉框菜單實例演示
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)省市區(qū)三級聯(lián)動下拉框菜單很詳細(xì)的代碼,解決了大家實現(xiàn)javascript省市區(qū)三級聯(lián)動下拉框菜單的問題,感興趣的小伙伴們可以參考一下2015-11-11JS加jquery簡單實現(xiàn)標(biāo)簽元素的顯示或隱藏
標(biāo)簽元素的顯示或隱藏在使用中還是挺頻繁的,下面有個不錯的示例,大家可以參考下,或許有所幫助2013-09-09微信小程序uniapp實現(xiàn)左滑刪除效果(完整代碼)
這篇文章通過實例代碼給大家講解了微信小程序uniapp實現(xiàn)左滑刪除效果,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2021-11-11