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限制输入字数,并提示剩余字数实现代码
Dec 24 Javascript
如何使用jQuery Draggable和Droppable实现拖拽功能
Jul 05 Javascript
网页中表单按回车就自动提交的问题的解决方案
Nov 03 Javascript
angular实现图片懒加载实例代码
Jun 08 Javascript
全选复选框JavaScript编写小结(附代码)
Aug 16 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
JS实现websocket长轮询实时消息提示的效果
Oct 10 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
JS处理一些简单计算题
Feb 24 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 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使用ODBC连接数据库的方法
2015/07/18 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
PHP学习记录之常用的魔术常量详解
2019/12/12 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
JQuery实现鼠标滑过显示导航下拉列表
2013/09/12 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
jQuery实现新消息在网页标题闪烁提示
2015/06/23 Javascript
Bootstrap企业网站实战项目4
2016/10/14 Javascript
通过原生JS实现为元素添加事件的方法
2016/11/23 Javascript
javascript显示系统当前时间代码
2016/12/29 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
vue.js实现数据动态响应 Vue.set的简单应用
2017/06/15 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
2018/07/27 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
Python base64编码解码实例
2015/06/21 Python
Python探索之SocketServer详解
2017/10/28 Python
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
Python使用sqlalchemy模块连接数据库操作示例
2019/03/13 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Django框架 querySet功能解析
2019/09/04 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
北京某科技有限公司C# .net笔试题
2014/09/27 面试题
党校自我鉴定范文
2013/10/02 职场文书
法制宣传日活动总结
2014/04/29 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
退学证明范本3篇
2014/10/29 职场文书
自信主题班会
2015/08/14 职场文书