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框架设计读书笔记之种子模块
Dec 02 Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 Javascript
JavaScript中的this机制
Jan 30 Javascript
js原型链与继承解析(初体验)
May 09 Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
JS动画定时器知识总结
Mar 23 Javascript
angularJs select绑定的model取不到值的解决方法
Oct 08 Javascript
Vue数据双向绑定原理实例解析
May 15 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 定界符 使用技巧
2009/06/14 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
PHP+Ajax验证码验证用户登录
2016/07/20 PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
2018/04/08 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
向fckeditor编辑器插入指定代码的方法
2007/05/25 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
jQuery入门知识简介
2010/03/04 Javascript
同一页面多个商品倒计时JS 基于面向对象的javascript
2012/02/16 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
使用CSS3的scale实现网页整体缩放
2014/03/18 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
关于vue3默认把所有onSomething当作v-on事件绑定的思考
2020/05/15 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
python的id()函数介绍
2013/02/10 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
Oakley西班牙官方商店:太阳眼镜和男女运动服
2019/04/26 全球购物
课程改革实施方案
2014/03/16 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
初中学生评语大全
2014/04/24 职场文书
团日活动总结怎么写
2014/06/25 职场文书
一份关于丢失公司财物的检讨书
2014/09/19 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
六五普法宣传标语
2014/10/06 职场文书
电力工程合作意向书
2015/05/11 职场文书
2016婚礼主持词开场白
2015/11/24 职场文书
优秀大学生申请书
2019/06/24 职场文书
MySQL的索引你了解吗
2022/03/13 MySQL