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数据显示插件整合实现代码
Oct 24 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
JavaScript中setAttribute用法介绍
Jul 20 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
js实现自定义进度条效果
Mar 15 Javascript
angular中的cookie读写方法
Aug 02 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
vue父组件向子组件传递多个数据的实例
Mar 01 Javascript
React路由管理之React Router总结
May 10 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 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
缅甸的咖啡简史
2021/03/04 咖啡文化
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
关于Blog顶部的滚动导航条代码
2006/09/25 Javascript
一个用js实现控制台控件的代码
2007/09/04 Javascript
善用事件代理,警惕闭包的性能陷阱。
2011/01/20 Javascript
jquery实现弹出层完美居中效果
2014/03/03 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
2015/08/05 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
jQuery实现表格元素动态创建功能
2017/01/09 Javascript
简单实现vue验证码60秒倒计时功能
2017/10/11 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
2020/04/26 Javascript
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
Python字符串切片操作知识详解
2016/03/28 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
python判断链表是否有环的实例代码
2020/01/31 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
python爬虫用mongodb的理由
2020/07/28 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
公司授权委托书范本
2014/04/03 职场文书
财务会计专业求职信
2014/06/09 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
团日活动总结格式
2015/05/11 职场文书
保外就医申请书范文
2015/08/06 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
MySQL之DML语言
2021/04/05 MySQL
Python初学者必备的文件读写指南
2021/06/23 Python
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python
Python Flask实现进度条
2022/05/11 Python