javascript数组遍历for与for in区别详解


Posted in Javascript onDecember 04, 2014

js中遍历数组的有两种方式

var array=['a']

//标准的for循环

for(var i=1;i<array.length;i++){

    alert(array[i])

}

//foreach循环

for(var i in array){

    alert(array[i])

}

正常情况下上面两种遍历数组的方式结果一样。首先说两者的第一个区别

标准的for循环中的i是number类型,表示的是数组的下标,但是foreach循环中的i表示的是数组的key是string类型,因为js中一切皆为对象。自己试试 alert(typeof i);这个区别是小问题。现在我加上如下代码,上面的执行结果就不一样了。

//扩展了js原生的Array

Array.prototype.test=function()

 

}

试试看上面的代码执行什么。我们发现标准的for循环任然真正的对数组循环, 但是此时foreach循环对我刚才写的test方法写打印出来了。这就是for与foreach遍历数组的最大区别,如果我们在项目采用的是用foreach遍历数组,假设有一天谁不小心自己为了扩展js原生的Array类,或者引入一个外部的js框架也扩展了原生Array。那问题就来了。

再此建议两点

1.不要用for in遍历数组,全部统一采用标准的for循环变量数组(我们无法保证我们引入的js是否会采用prototype扩展原生的Array)
2.如果要对js的原生类扩展的时候,不要采用prototype了

Javascript 相关文章推荐
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
Js中的onblur和onfocus事件应用介绍
Aug 27 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
jQuery鼠标悬浮链接弹出跟随图片实例代码
Jan 08 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
vue项目中axios使用详解
Feb 07 Javascript
vue2.0安装style/css loader的方法
Mar 14 Javascript
Vue.js组件实现选项卡以及切换特效
Jul 24 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 #Javascript
express的中间件cookieParser详解
Dec 04 #Javascript
express的中间件bodyParser详解
Dec 04 #Javascript
express的中间件basicAuth详解
Dec 04 #Javascript
详解JS函数重载
Dec 04 #Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 #Javascript
javascript常用代码段搜集
Dec 04 #Javascript
You might like
FCKeditor的安装(PHP)
2007/01/13 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
分享一个超好用的php header下载函数
2014/01/31 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHP常用处理静态操作类
2015/04/03 PHP
非常重要的php正则表达式详解
2016/01/04 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
jquery插件jquery.beforeafter.js实现左右拖拽分隔条对比图片的方法
2015/08/07 Javascript
分享两款带遮罩的jQuery弹出框
2015/12/30 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
2016/10/16 Javascript
简单的网页广告特效实例
2017/08/19 Javascript
利用node实现一个批量重命名文件的函数
2017/12/21 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
Python列表(list)常用操作方法小结
2015/02/02 Python
Python中将字典转换为XML以及相关的命名空间解析
2015/10/15 Python
Python实现视频下载功能
2017/03/14 Python
Pycharm编辑器技巧之自动导入模块详解
2017/07/18 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
Python Flask框架扩展操作示例
2019/05/03 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
电子商务专业自我鉴定
2013/12/18 职场文书
建筑工地宣传标语
2014/06/18 职场文书
企业领导对照检查材料
2014/08/20 职场文书
2014年市场部工作总结
2014/11/25 职场文书
Java8中Stream的一些神操作
2021/11/02 Java/Android