详谈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代码
Jan 28 Javascript
js+CSS 图片等比缩小并垂直居中实现代码
Dec 01 Javascript
javascript setTimeout和setInterval 的区别
Dec 08 Javascript
网页图片延时加载的js代码
Apr 22 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
JS验证身份证有效性示例
Oct 11 Javascript
Jquery Ajax Error 调试错误的技巧
Nov 20 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
JavaScript 中Date对象的格式化代码方法汇总
Sep 06 Javascript
微信小程序模拟cookie的实现
Jun 20 Javascript
vue项目打包后怎样优雅的解决跨域
May 26 Javascript
ztree+ajax实现文件树下载功能
May 18 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编程之高级技巧——利用Mysql函数
2006/10/09 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
PHP图片加水印实现方法
2016/05/06 PHP
PHP使用gearman进行异步的邮件或短信发送操作详解
2020/02/27 PHP
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
微信小程序 教程之注册程序
2016/10/17 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
JS实现手风琴特效
2020/11/08 Javascript
Python爬虫基础之XPath语法与lxml库的用法详解
2018/09/13 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
简单了解python代码优化小技巧
2019/07/08 Python
python基于opencv检测程序运行效率
2019/12/28 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
python中68个内置函数的总结与介绍
2020/02/24 Python
整个世界的设计师家具在哈恩:Designathome
2019/03/25 全球购物
申报职称专业技术个人的自我评价
2013/12/12 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
律师函格式范本
2015/05/27 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
Redis 配置文件重要属性的具体使用
2021/05/20 Redis
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫