详谈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 幻灯插件和教程
Mar 27 Javascript
初识SmartJS - AOP三剑客
Jun 08 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
Bootstrap学习笔记之css样式设计(1)
Jun 07 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
jQuery动态生成不规则表格(前后端)
Feb 21 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
React组件生命周期详解
Jul 03 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
vue 插件的方法代码详解
Jun 06 Javascript
如何解决vue在ios微信&quot;复制链接&quot;功能问题
Mar 26 Javascript
Node与Python 双向通信的实现代码
Jul 16 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
php for 循环语句使用方法详细说明
2010/05/09 PHP
关于php支持分块与断点续传文件下载功能代码
2014/05/09 PHP
yii的CURD操作实例详解
2014/12/04 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
jQuery插件版本冲突的处理方法分析
2017/01/16 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
JS数组属性去重并校验重复数据
2020/01/10 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
Python socket模块实现的udp通信功能示例
2019/04/10 Python
使用python实现mqtt的发布和订阅
2019/05/05 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
Snapfish英国:在线照片打印和个性化照片礼品
2017/01/13 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
新学期家长寄语
2014/01/19 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
安全教育演讲稿
2014/05/09 职场文书
秋冬农业生产标语
2014/10/09 职场文书
师德师风事迹材料
2014/12/20 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android