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 选中文字并响应获取的实现代码
Aug 28 Javascript
JavaScript 基础篇之对象、数组使用介绍(三)
Apr 07 Javascript
js中文逗号转英文实现
Feb 11 Javascript
jquery插件orbit.js实现图片折叠轮换特效
Apr 14 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
微信js-sdk 录音功能的示例代码
Nov 01 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 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.MVC的模板标签系统(三)
2006/09/05 PHP
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
关于crontab的使用详解
2013/06/24 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
php实现paypal 授权登录
2015/05/28 PHP
PHP设计模式之模板模式定义与用法详解
2018/12/20 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
Bootstrap treeview实现动态加载数据并添加快捷搜索功能
2018/01/07 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
详解vue中axios请求的封装
2019/04/08 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
Element Popover 弹出框的使用示例
2020/07/26 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
Python基本语法经典教程
2016/03/11 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
为什么str(float)在Python 3中比Python 2返回更多的数字
2018/10/16 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
python中pop()函数的语法与实例
2020/12/01 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
TripAdvisor印尼站:全球领先的旅游网站
2018/03/15 全球购物
什么是跨站脚本攻击
2014/12/11 面试题
大学生活动策划方案
2014/02/10 职场文书
中等生评语大全
2014/05/04 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js