详谈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 相关文章推荐
Js event事件在IE、FF兼容性问题
Jan 01 Javascript
javascript错误的认识不用关心内存管理
Dec 15 Javascript
js 单击式的下拉菜单效果实例
Aug 13 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
VSCode配置react开发环境的步骤
Dec 27 Javascript
Webpack 4.x搭建react开发环境的方法步骤
Aug 15 Javascript
Vue中Quill富文本编辑器的使用教程
Sep 21 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
JavaScript switch语句使用方法简介
Dec 30 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
ThinkPHP模板判断输出Empty标签用法详解
2014/06/30 PHP
php自动载入类用法实例分析
2016/06/24 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
基于jQuery的图片左右无缝滚动插件
2012/05/23 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
js substring从右边获取指定长度字符串(示例代码)
2013/12/23 Javascript
javascript常用函数(2)
2015/11/05 Javascript
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
jquery实现图片预加载
2015/12/25 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
javascript实现将数字转成千分位的方法小结【5种方式】
2016/12/11 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
python读取文本绘制动态速度曲线
2018/06/21 Python
Python爬虫之正则表达式基本用法实例分析
2018/08/08 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
pandas ix &amp;iloc &amp;loc的区别
2019/01/10 Python
Python3利用Dlib实现摄像头实时人脸检测和平铺显示示例
2019/02/21 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
什么是Rollback Segment
2013/04/22 面试题
医药工作岗位求职信分享
2013/12/31 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
春风化雨观后感
2015/06/11 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang