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 相关文章推荐
新鲜出炉的js tips提示效果
Apr 03 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
Jan 21 Javascript
jQuery中toggle()函数的使用实例
Apr 17 Javascript
JS使用eval()动态创建变量的方法
Jun 03 Javascript
js改变style样式和css样式的简单实例
Jun 28 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
Jan 19 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
JS+H5 Canvas实现时钟效果
Jul 20 Javascript
用Cordova打包Vue项目的方法步骤
Feb 02 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 Javascript
纯JS实现五子棋游戏
May 28 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中OO之静态关键字以及类常量的详解
2013/06/07 PHP
php实现图形显示Ip地址的代码及注释
2014/01/20 PHP
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
9条PHP编程小知识及易犯的小错误
2015/01/22 PHP
PHP实现图片防盗链破解操作示例【解决图片防盗链问题/反向代理】
2020/05/29 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
AngularJS 依赖注入详解及示例代码
2016/08/17 Javascript
vue-router路由简单案例介绍
2017/02/21 Javascript
bootstrap模态框示例代码分享
2017/05/17 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
2019/09/10 jQuery
Node对CommonJS的模块规范
2019/11/06 Javascript
js实现星星打分效果
2020/07/05 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
python提取页面内url列表的方法
2015/05/25 Python
21行Python代码实现拼写检查器
2016/01/25 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
python字符串判断密码强弱
2020/03/18 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
武汉英思工程科技有限公司&ndash;ORACLE面试测试题目
2012/04/30 面试题
介绍一下linux文件系统分配策略
2013/02/25 面试题
给排水工程师岗位职责
2013/11/21 职场文书
护士进修自我鉴定
2014/02/07 职场文书
商务英语专业求职信
2014/06/26 职场文书
个人简历自荐信
2014/06/26 职场文书
11.9消防日宣传标语
2014/10/08 职场文书
《正比例》教学反思
2016/02/23 职场文书
2016年第二十五次全国助残日活动总结
2016/04/01 职场文书
导游词之镇江焦山
2019/11/21 职场文书
python实现会员管理系统
2022/03/18 Python
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript