JavaScript中利用for循环遍历数组

 更新时间:2017年01月15日 12:16:22   作者:浪迹灬天涯  
这篇文章主要为大家详细介绍了JavaScript中利用for循环遍历数组,最好不要使用for in遍历,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

先看一段代码

<!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循环遍历数组

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

相关文章

  • 原生JavaScript实现todolist功能

    原生JavaScript实现todolist功能

    本篇文章给大家介绍了通过原生JavaScript实现todolist功能相关知识点,对此有需要的朋友可以学习下。
    2018-03-03
  • JavaScript设计模式适配器模式实例

    JavaScript设计模式适配器模式实例

    这篇文章主要介绍了JavaScript设计模式适配器模式实例,适配器设计模式可以让彼此不兼容的功能在一块工作,有助于避免大规模的修改代码,并且易于扩展和兼容
    2022-06-06
  • Postman参数化实现过程及原理解析

    Postman参数化实现过程及原理解析

    这篇文章主要介绍了Postman参数化实现过程及原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-08-08
  • js判断主流浏览器类型和版本号的简单实现代码

    js判断主流浏览器类型和版本号的简单实现代码

    下面小编就为大家带来一篇js判断主流浏览器类型和版本号的简单实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • JS实现点击按钮可实现编辑功能

    JS实现点击按钮可实现编辑功能

    本文通过一段实例代码给大家介绍了基于js实现点击按钮可编辑效果,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的的朋友参考下吧
    2018-07-07
  • Javascript遍历Html Table示例(包括内容和属性值)

    Javascript遍历Html Table示例(包括内容和属性值)

    这篇文章主要介绍了Javascript如何遍历Html Table(包括内容和属性值),需要的朋友可以参考下
    2014-07-07
  • JS自定义打印及静默打印的实现方法

    JS自定义打印及静默打印的实现方法

    在浏览器上打印应该一个比较常见的操作, 最简单的打印方式就是直接点击浏览器右上角,找到“打印”按钮或者调用window.print(), 然而,实际情况下大多数需求都不会如此简单,所以本文给大家介绍了使用JS自定义打印及静默打印的方法实现,需要的朋友可以参考下
    2024-01-01
  • javascript省市区三级联动下拉框菜单实例演示

    javascript省市区三级联动下拉框菜单实例演示

    这篇文章主要为大家详细介绍了javascript实现省市区三级联动下拉框菜单很详细的代码,解决了大家实现javascript省市区三级联动下拉框菜单的问题,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • JS加jquery简单实现标签元素的显示或隐藏

    JS加jquery简单实现标签元素的显示或隐藏

    标签元素的显示或隐藏在使用中还是挺频繁的,下面有个不错的示例,大家可以参考下,或许有所帮助
    2013-09-09
  • 微信小程序uniapp实现左滑删除效果(完整代码)

    微信小程序uniapp实现左滑删除效果(完整代码)

    这篇文章通过实例代码给大家讲解了微信小程序uniapp实现左滑删除效果,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2021-11-11

最新评论