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库 开发规则
Jan 31 Javascript
JS模拟面向对象全解(二、类型与赋值)
Jul 13 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
javaScript函数中执行C#代码中的函数方法总结
Aug 07 Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
Vue路由跳转问题记录详解
Jun 15 Javascript
Vue脚手架的简单使用实例
Jul 10 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 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获取、检查类名、函数名、方法名的函数方法
2015/06/25 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
jQuery 对象中的类数组操作
2009/04/27 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
javascript通过元素id和name直接取得元素的方法
2015/04/28 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
2015/09/14 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
完美解决input[type=number]无法显示非数字字符的问题
2017/02/28 Javascript
jQuery实现的监听导航滚动置顶状态功能示例
2018/07/23 jQuery
Vue 菜单栏点击切换单个class(高亮)的方法
2018/08/22 Javascript
js实现搜索栏效果
2018/11/16 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
使用Python的Tornado框架实现一个Web端图书展示页面
2016/07/11 Python
Django实现的自定义访问日志模块示例
2017/06/23 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
Python 私有化操作实例分析
2019/11/21 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Python 的 f-string 可以连接字符串与数字的原因解析
2021/02/20 Python
韩国美国时尚服装和美容在线全球市场:KOODING
2018/11/07 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
TCP/IP模型的分界线
2012/12/01 面试题
项目合作计划书
2014/01/09 职场文书
幼儿教师培训感言
2014/03/08 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
离婚起诉书范本
2015/05/18 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
大学生团支书竞选稿
2015/11/21 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL