怎么在JavaScript中利用for循環(huán)對(duì)數(shù)組進(jìn)行遍歷

發(fā)布時(shí)間：2020-12-22 15:18:56 來源：億速云閱讀：289 作者：Leah 欄目：web開發(fā)

這篇文章給大家介紹怎么在JavaScript中利用for循環(huán)對(duì)數(shù)組進(jìn)行遍歷，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

先看一段代碼

<!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ū)別：

怎么在JavaScript中利用for循環(huán)對(duì)數(shù)組進(jìn)行遍歷

標(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)了什么情況：

怎么在JavaScript中利用for循環(huán)對(duì)數(shù)組進(jì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ù)組

關(guān)于怎么在JavaScript中利用for循環(huán)對(duì)數(shù)組進(jìn)行遍歷就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

怎么在JavaScript中利用for循環(huán)對(duì)數(shù)組進(jìn)行遍歷

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽