详谈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实战_读书笔记1—选择jQuery
Jan 22 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
简单实现Vue的observer和watcher
Dec 21 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
Vue Components 数字键盘的实现
Sep 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
中国广播史趣谈 — 几个历史第一次
2021/03/01 无线电
curl和libcurl的区别简介
2015/07/01 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
json跟xml的对比分析
2008/06/10 Javascript
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
鼠标焦点离开文本框时验证的js代码
2013/07/19 Javascript
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
JavaScript面向对象之私有静态变量实例分析
2016/01/14 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
JS闭包可被利用的常见场景小结
2017/04/09 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
JS实现点击链接切换显示隐藏内容的方法
2017/10/19 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
详解小程序设置缓存并且不覆盖原有数据
2019/04/15 Javascript
Javascript三种字符串连接方式及性能比较
2019/05/28 Javascript
详解Python字符串对象的实现
2015/12/24 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
对python中各个response的使用说明
2020/03/28 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
软件项目经理岗位职责
2015/04/01 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
《山中访友》教学反思
2016/02/24 职场文书
Java中CyclicBarrier和CountDownLatch的用法与区别
2021/08/23 Java/Android
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS
centos7安装mysql5.7经验记录
2022/05/02 Servers