JavaScript中利用for循环遍历数组

先看一段代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>

 <script>
  // 一个普通的数组
  var arr =[3,5,2,6];
  // 普通的for 循环遍历
  for(var i = 0 ; i < arr.length; i++){
   console.log(i,"类型："+typeof i,arr[i]);
  }
  // 用for in 遍历数组
  for(var k in arr){
   console.log(k,"类型："+typeof k,arr[k]);
  }
 </script>
</body>
</html>

这段代码显示出了 一点 for循环遍历数组 和for in 循环遍历 数组的一点区别：

标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型。

这还不是坑，只是一点区别。

再看一段代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>

 <script>
  // 一个普通的数组
  var arr =[3,5,2,6];
  // 在数组原型上扩展一个方法
  Array.prototype.extend = function(){
   console.log("在数组原型扩展一个方法");
  }
  // 普通的for 循环遍历
  for(var i = 0 ; i < arr.length; i++){
   console.log(i,"类型："+typeof i,arr[i]);
  }
  // 用for in 遍历数组
  for(var k in arr){
   console.log(k,"类型："+typeof k,arr[k]);
  }
 </script>
</body>
</html>

这段代码就是在上边的代码的基础上，为Array做了一下扩充。很简单，只是添加了一个函数。但是我们来看运行会出现了什么情况：

输出的结果中，多出了一行，这一行就是我们扩展的一个函数，不是我们定义在数组中的值。到此这个问题就出来了。

综上所述，用for...in...在通常情况下确实可以正确运行。

但是如果我们在项目采用的是用foreach遍历数组，假设有一天谁不小心自己为了扩展js原生的Array类，或者引入一个外部的js框架也扩展了原生Array。那问题就来了。

 所以最好还是用for循环遍历数组

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js for循环倒序输出数组元素的实例

    实例如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>倒序输出数组元素</title> </head> <body> <script type="text/javascript"> var a=[1,2,3,4] for(var i=a.length-1;i>=0;i--){

  • JS数组的遍历方式for循环与for...in

    JS数组的遍历方法有两种: 第一种:一般的for循环,例如: var a = new Array("first", "second", "third") for(var i = 0;i < a.length; i++) { document.write(a[i]+","); } 输出的结果:fitst,second,third 第一种:用for...in 这种遍历的方式,例如: var arr = new Array(&

  • js数组循环遍历数组内所有元素的方法

    例,for(){}遍历数组 复制代码 代码如下: <script type="text/javascript"> <!--var arr = new Array(13.5,3,4,5,6);for(var i=0;i<arr.length;i++){ arr[i] = arr[i]/2.0;}alert(arr); //--> </script> 例,for in循环遍历数组 复制代码 代码如下: <html><body>

  • js 数组的for循环到底应该怎么写？

    js 数组的for循环到底应该怎么写？

    然后来看看今天我开始怀疑哪个权威哦家伙了... 自从开始学编程,自从接触到数组这个东西,我就一直在不同的地点和不同的时间不断看到有人提醒:在用for遍历数组的时候一定要用 for(var i=0,n=arr2.length;i<n;i++)的方式哦,而不要用for(var i=0;i>arr.length;i++)的方式哦,因为用脑子想想也知道,第二种方法的第二部分会一直去计算数组的length,所以自然效率比较低. 哦?我们这里不说其他程序语言,而只讨论js,因为不同的语言,实现可能不同,其

  • JavaScript中利用for循环遍历数组

    JavaScript中利用for循环遍历数组

    先看一段代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> // 一个普通的数组 var arr =[3,5,2,6]; // 普通的for 循环遍历 for(var i = 0 ; i

  • JavaScript中关于for循环删除数组元素内容时出现的问题

    JavaScript中关于for循环删除数组元素内容时出现的问题

    昨天用for循环进行数组去重的时候出现的问题, 首先,用双重for循环把前一个和所有后面的元素进行比较,如果相等则删除. 但是,如果数组里面有三个以上连续相等的元素的时候,就会出现问题. var arr = [1,1,1,2,2]; for(var i=0; i<arr.length-1; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i] === arr[j]){ arr.splice(j,1); } } } document.write(&

  • JavaScript中利用各种循环进行遍历的方式总结

    为了方便例子讲解,现有数组和json对象如下 var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']; var demoObj = { aaa: 'Javascript', bbb: 'Gulp', ccc: 'CSS3', ddd: 'Grunt', eee: 'jQuery', fff: 'angular' }; for in for(var item in arr|obj){} 可以用于遍历数组和

  • JS中循环遍历数组的四种方式总结

    本文比较并总结遍历数组的四种方式: for 循环: for (let index=0; index < someArray.length; index++) { const elem = someArray[index]; // ··· } for-in 循环: for (const key in someArray) { console.log(key); } 数组方法 .forEach(): someArray.forEach((elem, index) => { console.log(

  • JavaScript中利用Array filter() 方法压缩稀疏数组

    什么是稀疏数组 数组元素的索引不一定要连续的,它们之间可以有空缺.每个javaScript数组都有一个length属性.针对非稀疏数组,该属性就是数组元素的个数:针对稀疏数组,length比所有元素的个数要大. Array filter() 方法会跳过稀疏数组中缺少的元素,它的返回数组总是稠密的. (1)压缩稀疏数组的空缺: var dense = sparse.filter( function(currentValue) { return true; } ); (2)压缩稀疏数组的空缺,并且删

  • JavaScript中for..in循环陷阱介绍

    大家都知道在JavaScript中提供了两种方式迭代对象: (1)for 循环: (2)for..in循环: 使用for循环进行迭代数组对象,想必大家都已经司空见惯了.但是,使用for.. in循环时,大家可要注意了,为什么这么说呢?大家听我娓娓道来.... javascript提供了一种特殊的循环(也就是for .. in循环),用来迭代对象的属性或数组的每个元素,for...in循环中的循环计数器是字符串,而不是数字.它包含当前属性的名称或当前数组元素的索引. 案例一: 复制代码 代码如下:

  • JavaScript中十种一步拷贝数组的方法实例详解

    JavaScript中十种一步拷贝数组的方法实例详解

    JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下. 1.扩展运算符(浅拷贝) 自从ES6出现以来,这已经成为最流行的方法.它是一个很简单的语法,但是当你在使用类似于React和Redux这类库时,你会发现它是非常非常有用的. numbers = [1, 2, 3]; numbersCopy = [...numbers]; 这个方法不能有效的拷贝多维数组.数组/对象值的拷贝是通过引用而不是值复制. // numbersCopy.push(4);

  • JavaScript 中的六种循环方法

    Javascript中的遍历循环 1.for循环 对于数值索引的数组来说,可以使用标准的for循环来遍历值 const arr=[1,2,3,4]; for(let i=0;i<arr.length;i++){ console.log(i); } 2.for...in循环 for...in循环可以用来遍历对象的可枚举属性列表(包括原型链上的属性) const myObject={}; Object.defineProperty(myobject,"a",{ //可枚举 enume

  • JavaScript几种常见循环遍历使用和区别

    目录 前言 1.“for” 循环:它是最常使用的循环形式 2."for..in" 循环:为了遍历一个对象的所有键(key) 3.for..of:不能获取当前元素的索引,只是获取元素值 4.forEach:允许为数组的每个元素都运行一个函数 5.Map and Set(映射和集合) 前言 在javascript语言中经常需要使用循环语法去获取数据中的一些值,例如,我们需要将列表中的商品逐个输出,或者运行相同的代码将数字 1 到 10 逐个输出.方法也比较多,该篇将讲解常见的循环遍历的使用

  • PHP循环遍历数组的3种方法list()、each()和while总结

    ①each()函数 each()函数需要传递一个数组作为参数,返回数组中当前元素的键/值对,并向后移动数组指针到下一个元素的位置.键/值对被返回带有4个元素的关联和索引混合的数组,键名分别为0.1.key和value.其中键名0和key对应的值是一样的,是数组元素的键名,1和value则包含有数组元素的值.如果内部指针越过了数组的末端,则each()返回FALSE.each()函数的使用如下所示: 复制代码 代码如下: <?php $contact = array("ID" =&

随机推荐