详谈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 相关文章推荐
从JavaScript 到 JQuery (1)学习小结
Feb 12 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
完美兼容多浏览器的js判断图片路径代码汇总
Apr 17 Javascript
js事件监听器用法实例详解
Jun 01 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
AngularJS入门(用ng-repeat指令实现循环输出
May 05 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
微信小程序实现弹出层效果
May 26 Javascript
js常见遍历操作小结
Jun 06 Javascript
微信小程序之下拉列表实现方法解析(附完整源码)
Aug 23 Javascript
Vue实现手机计算器
Aug 17 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扩展介绍与开发教程
2010/08/19 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
关于jQuery判断元素是否存在的问题示例探讨
2014/07/21 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
View.post() 不靠谱的地方你知道多少
2017/08/29 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
详解es6新增数组方法简便了哪些操作
2019/05/09 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
Python单链表简单实现代码
2016/04/27 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
python实现分页效果
2017/10/25 Python
Python实现扣除个人税后的工资计算器示例
2018/03/26 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python实现代码统计程序
2019/09/19 Python
python科学计算之numpy——ufunc函数用法
2019/11/25 Python
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
请写一个C函数,若处理器是Big_endian的,则返回0;若是Little_endian的,则返回1
2015/07/16 面试题
护理学毕业生自荐信
2013/10/02 职场文书
中专毕业生自我鉴定范文
2013/11/09 职场文书
广告学毕业生求职信
2014/01/30 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
班班通校本培训方案
2014/03/12 职场文书
物联网工程专业推荐信
2014/09/08 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
2014年学生会工作总结
2014/11/07 职场文书
廉政承诺书范文
2015/04/28 职场文书
小学毕业感言200字
2015/07/30 职场文书
村官2015年度工作总结
2015/10/14 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js
纯html+css实现Element loading效果
2021/08/02 HTML / CSS