JavaScript中利用for循环遍历数组


Posted in Javascript onJanuary 15, 2017

先看一段代码

<!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 循环遍历 数组的一点区别:

JavaScript中利用for循环遍历数组

标准的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做了一下扩充。很简单,只是添加了一个函数。但是我们来看运行会出现了什么情况:

JavaScript中利用for循环遍历数组

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

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

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

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

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

Javascript 相关文章推荐
Jquery中给animation加更多的运作效果实例
Sep 05 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
jQuery animate easing使用方法图文详解
Jun 17 Javascript
第一次接触神奇的Bootstrap基础排版
Jul 26 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
Java Varargs 可变参数用法详解
Jan 28 Javascript
微信小程序换肤功能实现代码(思路详解)
Aug 25 Javascript
基于Bootstrap的Java开发问题汇总(Spring MVC)
Jan 15 #Javascript
JavaScript调试的多个必备小Tips
Jan 15 #Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 #Javascript
js实现密码强度检验
Jan 15 #Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 #Javascript
vue实现简单实时汇率计算功能
Jan 15 #Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 #Javascript
You might like
PHP 加密解密内部算法
2010/04/22 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
Yii框架登录流程分析
2014/12/03 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
学习jquery之一
2007/04/27 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
2016/07/28 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
2016/09/06 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
Vue 实现展开折叠效果的示例代码
2018/08/27 Javascript
vue 的点击事件获取当前点击的元素方法
2018/09/15 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
Python3利用SMTP协议发送E-mail电子邮件的方法
2017/09/30 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
python scipy卷积运算的实现方法
2019/09/16 Python
python如何把字符串类型list转换成list
2020/02/18 Python
python多进程使用函数封装实例
2020/05/02 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
简历中自我评价分享
2013/10/09 职场文书
优秀共产党员先进事迹
2014/01/27 职场文书
接待员岗位责任制
2014/02/10 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
观看建国大业观后感
2015/06/01 职场文书
活动简报范文
2015/07/22 职场文书
Python time库的时间时钟处理
2021/05/02 Python
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python