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数独游戏解析(一)-页面布局
Nov 05 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
让人印象深刻的10个jQuery手风琴效果应用
May 08 Javascript
DWZ刷新dialog解决方法
Mar 03 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
jQuery图片加载显示loading效果
Nov 04 Javascript
很棒的vue弹窗组件
May 24 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
Vue组件化开发思考
Feb 02 Javascript
JavaScript中this关键字用法实例分析
Aug 24 Javascript
element ui分页多选,翻页记忆的实例
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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php XMLWriter类的简单示例代码(RSS输出)
2011/09/30 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
PHP 网站修改默认访问文件的nginx配置
2017/05/27 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
js读写json文件实例代码
2014/10/21 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
js实现微博发布小功能
2017/01/12 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
JS判断微信扫码的方法
2017/08/07 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
详解Vue.js 作用域、slot用法(单个slot、具名slot)
2019/10/15 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
javascript实现点击按钮切换轮播图功能
2020/09/23 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python实现用户登陆邮件通知的方法
2015/07/09 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
python实现贪吃蛇小游戏
2020/03/21 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
Linux文件系统类型
2012/02/15 面试题
上班睡觉检讨书
2014/01/09 职场文书
保护野生动物倡议书
2014/05/16 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL