详谈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 BS,dialog控件自适应大小
Jul 06 Javascript
Jquery 获取checkbox的checked问题
Nov 16 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
JQuery异步加载无限下拉框级联功能实现示例
Feb 19 Javascript
JavaScript判断前缀、后缀是否是空格的方法
Apr 15 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
原生JS利用transform实现banner的无限滚动示例代码
Jun 15 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP mb_convert_encoding文字编码的转换函数介绍
2011/11/10 PHP
php中字符串和正则表达式详解
2014/10/23 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
Yii框架操作cookie与session的方法实例详解
2019/09/04 PHP
模拟用户操作Input元素,不会触发相应事件
2007/05/11 Javascript
JavaScript中使用构造器创建对象无需new的情况说明
2012/03/01 Javascript
jquery插件NProgress.js制作网页加载进度条
2015/06/05 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
js+ajax实现获取文件大小的方法
2015/12/08 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
jQuery实现的表格展开伸缩效果实例
2016/09/07 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
JS实现按比例缩小图片宽高
2020/08/24 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
pycharm远程调试openstack代码
2017/11/21 Python
python字典值排序并取出前n个key值的方法
2018/10/17 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
高中军训感言400字
2014/02/24 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
学生早退检讨书(范文)
2019/08/19 职场文书
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server