JavaScript中利用for循環(huán)遍歷數(shù)組
先看一段代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 一個(gè)普通的數(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>
這段代碼顯示出了 一點(diǎn) for循環(huán)遍歷數(shù)組 和for in 循環(huán)遍歷 數(shù)組的一點(diǎn)區(qū)別:

標(biāo)準(zhǔn)的for循環(huán)中的i是number類型,表示的是數(shù)組的下標(biāo),但是foreach循環(huán)中的i表示的是數(shù)組的key是string類型。
這還不是坑,只是一點(diǎn)區(qū)別。
再看一段代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// 一個(gè)普通的數(shù)組
var arr =[3,5,2,6];
// 在數(shù)組原型上擴(kuò)展一個(gè)方法
Array.prototype.extend = function(){
console.log("在數(shù)組原型擴(kuò)展一個(gè)方法");
}
// 普通的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ò)充。很簡單,只是添加了一個(gè)函數(shù)。但是我們來看運(yùn)行會(huì)出現(xiàn)了什么情況:

輸出的結(jié)果中,多出了一行,這一行就是我們擴(kuò)展的一個(gè)函數(shù),不是我們定義在數(shù)組中的值。到此這個(gè)問題就出來了。
綜上所述,用for...in...在通常情況下確實(shí)可以正確運(yùn)行。
但是如果我們?cè)陧?xiàng)目采用的是用foreach遍歷數(shù)組,假設(shè)有一天誰不小心自己為了擴(kuò)展js原生的Array類,或者引入一個(gè)外部的js框架也擴(kuò)展了原生Array。那問題就來了。
所以最好還是用for循環(huán)遍歷數(shù)組
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
原生JavaScript實(shí)現(xiàn)todolist功能
本篇文章給大家介紹了通過原生JavaScript實(shí)現(xiàn)todolist功能相關(guān)知識(shí)點(diǎn),對(duì)此有需要的朋友可以學(xué)習(xí)下。2018-03-03
JavaScript設(shè)計(jì)模式適配器模式實(shí)例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式適配器模式實(shí)例,適配器設(shè)計(jì)模式可以讓彼此不兼容的功能在一塊工作,有助于避免大規(guī)模的修改代碼,并且易于擴(kuò)展和兼容2022-06-06
Postman參數(shù)化實(shí)現(xiàn)過程及原理解析
這篇文章主要介紹了Postman參數(shù)化實(shí)現(xiàn)過程及原理解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-08-08
js判斷主流瀏覽器類型和版本號(hào)的簡單實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨s判斷主流瀏覽器類型和版本號(hào)的簡單實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
JS實(shí)現(xiàn)點(diǎn)擊按鈕可實(shí)現(xiàn)編輯功能
本文通過一段實(shí)例代碼給大家介紹了基于js實(shí)現(xiàn)點(diǎn)擊按鈕可編輯效果,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的的朋友參考下吧2018-07-07
Javascript遍歷Html Table示例(包括內(nèi)容和屬性值)
這篇文章主要介紹了Javascript如何遍歷Html Table(包括內(nèi)容和屬性值),需要的朋友可以參考下2014-07-07
javascript省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單實(shí)例演示
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單很詳細(xì)的代碼,解決了大家實(shí)現(xiàn)javascript省市區(qū)三級(jí)聯(lián)動(dòng)下拉框菜單的問題,感興趣的小伙伴們可以參考一下2015-11-11
JS加jquery簡單實(shí)現(xiàn)標(biāo)簽元素的顯示或隱藏
標(biāo)簽元素的顯示或隱藏在使用中還是挺頻繁的,下面有個(gè)不錯(cuò)的示例,大家可以參考下,或許有所幫助2013-09-09
微信小程序uniapp實(shí)現(xiàn)左滑刪除效果(完整代碼)
這篇文章通過實(shí)例代碼給大家講解了微信小程序uniapp實(shí)現(xiàn)左滑刪除效果,代碼簡單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2021-11-11

