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实现 在光标处插入指定内容
May 25 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
JavaScript中Object基础内部方法图
Feb 05 Javascript
利用vscode调试编译后的js代码详解
May 14 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
基于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 配置文件中open_basedir选项作用
2009/07/19 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
php使用高斯算法实现图片的模糊处理功能示例
2016/11/11 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
常用简易JavaScript函数
2009/04/09 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
jquery获得下拉框值的代码
2011/08/13 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
2016/08/31 Javascript
移动开发之自适应手机屏幕宽度
2016/11/23 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
webpack4简单入门实例
2018/09/06 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
跟老齐学Python之做一个小游戏
2014/09/28 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
Python使用xlrd模块操作Excel数据导入的方法
2015/05/26 Python
几种实用的pythonic语法实例代码
2018/02/24 Python
Python文本统计功能之西游记用字统计操作示例
2018/05/07 Python
python中必要的名词解释
2019/11/20 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
李维斯牛仔裤英国官方网站:Levi’s英国
2019/10/10 全球购物
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
财务管理职业生涯规划范文
2013/12/27 职场文书
《画风》教学反思
2014/04/16 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
2014年小学安全工作总结
2014/12/04 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
干部考核工作总结
2015/08/12 职场文书
Go web入门Go pongo2模板引擎
2022/05/20 Golang