详谈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 相关文章推荐
document.compatMode介绍
May 21 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
用html+css+js实现的一个简单的图片切换特效
May 28 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
jQuery中ajax的get()方法用法实例
Dec 26 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
Dec 07 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
Sep 13 Javascript
vue实现匀速轮播效果
Jun 29 Javascript
微信小程序拖拽排序列表的示例代码
Jul 08 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
星际争霸 Starcraft 编年史
2020/03/14 星际争霸
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
PHP 日志缩略名的创建函数代码
2010/05/26 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
PHP自动生成缩略图函数的源码示例
2019/03/18 PHP
javascript 跳转代码集合
2009/12/03 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
js仿手机页面文件下拉刷新效果
2016/10/14 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
js中的闭包实例展示
2018/11/01 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
40行代码把Vue3的响应式集成进React做状态管理
2020/05/20 Javascript
jQuery实现本地存储
2020/12/22 jQuery
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
2021/01/29 Javascript
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
基于python实现名片管理系统
2018/11/30 Python
Python学习笔记之Zip和Enumerate用法实例分析
2019/08/14 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
canvas像素点操作之视频绿幕抠图
2018/09/11 HTML / CSS
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
绩效专员岗位职责
2013/12/02 职场文书
人力资源管理求职信
2014/08/07 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python