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 new 需不需要继续使用
Jul 02 Javascript
爆炸式的JS圆形浮动菜单特效代码
Mar 03 Javascript
jquery获取input表单值的代码
Apr 19 Javascript
jQuery根据用户电脑是mac还是pc加载对应样式的方法
Jun 26 Javascript
基于jquery实现全屏滚动效果
Nov 26 Javascript
AngularJS实用开发技巧(推荐)
Jul 13 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
Jan 02 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
JavaScript字符串转数字的简单实现方法
Nov 27 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
PHP Include文件实例讲解
2019/02/15 PHP
BOM与DOM的区别分析
2010/10/26 Javascript
html+javascript实现可拖动可提交的弹出层对话框效果
2013/08/05 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
JavaScript字符串常用类使用方法汇总
2015/04/14 Javascript
javascript元素动态创建实现方法
2015/05/13 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
2017/08/22 Javascript
webpack配置之后端渲染详解
2017/10/26 Javascript
微信小程序自定义tabBar组件开发详解
2020/09/24 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
Python装饰器decorator用法实例
2014/11/10 Python
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
Python中Django框架下的staticfiles使用简介
2015/05/30 Python
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python装饰器原理与用法深入详解
2019/12/19 Python
Python如何把字典写入到CSV文件的方法示例
2020/08/23 Python
Dr. Martens马汀博士官网:马丁靴始祖品牌
2016/10/15 全球购物
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
给校长的建议书500字
2014/05/15 职场文书
体育教师求职信
2014/05/24 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
党员转正意见怎么写
2015/06/03 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
高一化学教学反思
2016/02/22 职场文书
学前班教学反思
2016/02/24 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python