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 相关文章推荐
node.js中的http.createClient方法使用说明
Dec 15 Javascript
node.js中的fs.realpath方法使用说明
Dec 16 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
Mar 13 Javascript
微信公众平台 发送模板消息(Java接口开发)
Apr 17 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 Javascript
js回到页面指定位置的三种方式
Dec 17 Javascript
ztree+ajax实现文件树下载功能
May 18 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
PHP创建多级目录的两种方法
2016/10/28 PHP
DEFER怎么用?
2006/07/01 Javascript
javascript 网页跳转的方法
2008/12/24 Javascript
自用js开发框架小成 学习js的朋友可以看看
2010/11/16 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
微信公众平台开发教程(六)获取个性二维码的实例
2016/12/02 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
浅谈 Vue 项目优化的方法
2017/12/16 Javascript
vue路由对不同界面进行传参及跳转的总结
2019/04/20 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
python类中super()和__init__()的区别
2016/10/18 Python
django 修改server端口号的方法
2018/05/14 Python
基于python生成器封装的协程类
2019/03/20 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
最新PyCharm从安装到PyCharm永久激活再到PyCharm官方中文汉化详细教程
2020/11/17 Python
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
六道php面试题附答案
2014/06/05 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
公司节能减排方案
2014/05/16 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
发布会邀请函
2015/01/31 职场文书
孔子观后感
2015/06/08 职场文书
python字符串常规操作大全
2021/05/02 Python
Pytorch实现图像识别之数字识别(附详细注释)
2021/05/11 Python
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python