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 相关文章推荐
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
Jul 01 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
Oct 15 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
Vue-cli配置打包文件本地使用的教程图解
Aug 02 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
Vue的状态管理vuex使用方法详解
Feb 05 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 Session存储到Redis的方法
2013/11/04 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
浅谈php提交form表单
2015/07/01 PHP
PHP版本升级到7.x后wordpress的一些修改及wordpress技巧
2015/12/25 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
JavaScript使用cookie
2007/02/02 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
jQuery实现径向动画菜单效果
2015/07/17 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
微信小程序 详解Page中data数据操作和函数调用
2017/01/12 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
js实现炫酷光感效果
2020/09/05 Javascript
[27:02]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第三场
2014/05/24 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
Python通过matplotlib绘制动画简单实例
2017/12/13 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
Python字符串内置函数功能与用法总结
2019/04/16 Python
django表单的Widgets使用详解
2019/07/22 Python
pandas数据拼接的实现示例
2020/04/16 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
日本乐天官方海外转运服务:Rakuten Global Express
2018/11/30 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
教师的实习鉴定
2013/12/15 职场文书
一份婚庆公司创业计划书
2014/01/11 职场文书
军训考核自我鉴定
2014/02/13 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
简历自我评价:教师师德表现自我评价
2019/04/24 职场文书
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript