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 相关文章推荐
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
javascript生成随机数的方法
May 16 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
AngularJS入门教程之表单校验用法示例
Nov 02 Javascript
js返回顶部实例分享
Dec 21 Javascript
简单实现JS上传图片预览功能
Apr 14 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
Mar 01 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
原生JS实现的简单轮播图功能【适合新手】
Aug 17 Javascript
Vue+Element-U实现分页显示效果
Nov 15 Javascript
动态规划之使用备忘录来改进Javascript函数
Apr 07 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的FTP学习(二)
2006/10/09 PHP
同一空间绑定多个域名而实现访问不同页面的PHP代码
2006/12/06 PHP
JQuery 简便实现页面元素数据验证功能
2007/03/24 Javascript
jQuery版Tab标签切换
2011/03/16 Javascript
windows系统下简单nodejs安装及环境配置
2013/01/08 NodeJs
jquery()函数的三种语法介绍
2013/10/09 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
浅析JavaScript中的对象类型Object
2016/05/26 Javascript
Javascript之String对象详解
2016/06/08 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
微信小程序 location API接口详解及实例代码
2016/10/12 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
Vue起步(无cli)的啊教程详解
2019/04/11 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
Python中字典创建、遍历、添加等实用操作技巧合集
2015/06/02 Python
Python中对元组和列表按条件进行排序的方法示例
2015/11/10 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
python根据unicode判断语言类型实例代码
2018/01/17 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
调用其他python脚本文件里面的类和方法过程解析
2019/11/15 Python
Pytorch 数据加载与数据预处理方式
2019/12/31 Python
如何安装并在pycharm使用selenium的方法
2020/04/30 Python
5款实用的python 工具推荐
2020/10/13 Python
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
电子工程专业毕业生求职信
2014/03/14 职场文书
机修车间主任岗位职责
2015/04/08 职场文书
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记