详谈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 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
半角全角相互转换的js函数
Oct 16 Javascript
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
Node.js中的事件驱动编程详解
Aug 16 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 Javascript
vue $router和$route的区别详解
Dec 02 Vue.js
使用 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/10/25 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
js querySelector() 使用方法
2016/12/21 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
JS使用Dijkstra算法求解最短路径
2019/01/17 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
python实现合并两个数组的方法
2015/05/16 Python
在Django框架中运行Python应用全攻略
2015/07/17 Python
Python切片知识解析
2016/03/06 Python
Python实现字典的遍历与排序功能示例
2017/12/23 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Python 中的lambda函数介绍
2018/10/10 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
python如何绘制疫情图
2020/09/16 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
美国NBA官方商店:NBA Store
2019/04/12 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
奥巴马演讲稿
2014/01/08 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
小学中秋节活动方案
2014/02/06 职场文书
大学生先进事迹材料
2014/02/16 职场文书
给领导的检讨书
2014/02/16 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
高一化学教学反思
2016/02/22 职场文书
信息技术课教学反思
2016/02/23 职场文书