详谈js中标准for循环与foreach(for in)的区别


Posted in Javascript onNovember 02, 2017

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。那问题就来了。再此建议两点

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

如果要对js的原生类扩展的时候,不要采用prototype了

以上这篇详谈js中标准for循环与foreach(for in)的区别就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 判断元素上是否绑定了事件
Oct 28 Javascript
js导航菜单(自写)简单大方
Mar 28 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
Node.js 日志处理模块log4js
Aug 28 Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
jQuery实现王者荣耀手风琴效果
Jan 17 jQuery
JS数据类型分类及常用判断方法
Nov 19 Javascript
基于JavaScript实现简单的轮播图
Mar 03 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 #Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 #Javascript
vue-resource + json-server模拟数据的方法
Nov 02 #Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 #Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 #Javascript
vue项目中使用axios上传图片等文件操作
Nov 02 #Javascript
JavaScript登录验证基础教程
Nov 01 #Javascript
You might like
php多个文件及图片上传实例详解
2014/11/10 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
js控制淡入淡出示例代码
2013/11/12 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/20 Javascript
详解JavaScript设计模式开发中的桥接模式使用
2016/05/18 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
简单理解vue中Props属性
2016/10/27 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
2017/01/18 Javascript
jQuery时间验证和转换为标准格式的时间格式
2017/03/06 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
Python 转换RGB颜色值的示例代码
2019/10/13 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
python实现坦克大战
2020/04/24 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
美国校服网上商店:French Toast
2019/10/08 全球购物
传统软件工程与面向对象的软件工程有什么区别
2012/05/31 面试题
医学专业毕业生推荐信
2013/11/14 职场文书
公务员综合考察材料
2014/02/01 职场文书
旅游与环境专业求职信
2014/06/05 职场文书
夫妻吵架保证书
2015/05/08 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers
Pytorch中TensorBoard及torchsummary的使用详解
2021/05/12 Python
Spring Security动态权限的实现方法详解
2022/06/16 Java/Android