Javascript数组循环遍历之forEach详解


Posted in Javascript onNovember 07, 2016

1.js 数组循环遍历。

数组循环变量,最先想到的就是 for(var i=0;i<count;i++)这样的方式了。

除此之外,也可以使用较简便的forEach 方式

2.forEach函数。

Firefox 和Chrome 的Array 类型都有forEach的函数。使用如下:

<!--Add by oscar999--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="oscar999"> 
</HEAD> 
 
<BODY> 
<script> 
var arryAll = []; 
arryAll.push(1); 
arryAll.push(2); 
arryAll.push(3); 
arryAll.push(4); 

//匿名方式
arryAll.forEach(function(e){ 
  alert(e); 
}) 

function t1(arg){alert(arg);}
//非匿名方式
arryAll.forEach(t1,arryAll);

</script> 
</BODY> 
</HTML>

但是以上,代码在IE中却无法正常工作。

因为IE的Array 没有这个方法

alert(Array.prototype.forEach);

执行以上这句得到的是  "undefined", 也就是说在IE 中 Array 没有forEach的方法。

3.  让IE兼容forEach方法

既然IE的Array 没哟forEach方法, 我们就给它手动添加这个原型方法。

//Array.forEach implementation for IE support.. 
//https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach 
if (!Array.prototype.forEach) { 
  Array.prototype.forEach = function(callback, thisArg) { 
    var T, k; 
    if (this == null) { 
      throw new TypeError(" this is null or not defined"); 
    } 
    var O = Object(this); 
    var len = O.length >>> 0; // Hack to convert O.length to a UInt32 
    if ({}.toString.call(callback) != "[object Function]") { 
      throw new TypeError(callback + " is not a function"); 
    } 
    if (thisArg) { 
      T = thisArg; 
    } 
    k = 0; 
    while (k < len) { 
      var kValue; 
      if (k in O) { 
        kValue = O[k]; 
        callback.call(T, kValue, k, O); 
      } 
      k++; 
    } 
  }; 
}

详细介绍可以参照:
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach

4. 如何跳出循环?

 Js 此种状况的forEach 不能使用continue, break;  可以使用如下两种方式:

1. if 语句控制

2. return 语句控制 (return true 或 return false)

其实 return  类似continue 的作用

以下例子是取出数组中2的倍数和3的倍数的数;

<!--Add by oscar999--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="oscar999"> 
</HEAD> 
 
<BODY> 
<script> 
if (!Array.prototype.forEach) { 
  Array.prototype.forEach = function(callback, thisArg) { 
    var T, k; 
    if (this == null) { 
      throw new TypeError(" this is null or not defined"); 
    } 
    var O = Object(this); 
    var len = O.length >>> 0; // Hack to convert O.length to a UInt32 
    if ({}.toString.call(callback) != "[object Function]") { 
      throw new TypeError(callback + " is not a function"); 
    } 
    if (thisArg) { 
      T = thisArg; 
    } 
    k = 0; 
    while (k < len) { 
      var kValue; 
      if (k in O) { 
        kValue = O[k]; 
        callback.call(T, kValue, k, O); 
      } 
      k++; 
    } 
  }; 
} 
 
var arryAll = []; 
arryAll.push(1); 
arryAll.push(2); 
arryAll.push(3); 
arryAll.push(4); 
arryAll.push(5);
arryAll.push(6); 
arryAll.push(7); 
 
 
var arrySpecial = []; 
 
arryAll.forEach(function(e){ 
  if(e%2==0) 
  { 
    arrySpecial.push(e); 
  }else if(e%3==0) 
  { 
    arrySpecial.push(e); 
  } 
}) 
 
</script> 
</BODY> 
</HTML>

使用return 达到以上效果

arryAll.forEach(function(e){ 
  if(e%2==0) 
  { 3water.com
    arrySpecial.push(e); 
    return; 
  } 
  if(e%3==0) 
  {   
    arrySpecial.push(e); 
    return; 
  } 
})

至于如何写类似break 的效果,目前尚未找到比较好的办法。

个人的看法:不管是java还是C#语法中,forEach就是遍历所有值

有搜索一下,有的说return false 可以达成, 试了一下, return false的效果和return 是一样,也和return ture 是一样的。
下面的测试代码是我自己加上的。

var arryAll = []; 
arryAll.push(1); 
arryAll.push(2); 
arryAll.push(3); 
arryAll.push(4); 
arryAll.push(5);
arryAll.push(6);
arryAll.push(7);

arryAll.forEach(function(e){
alert(e);
if(e>3)
return false;
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
Dec 29 Javascript
动态加载js的方法汇总
Feb 13 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
关于webuploader插件使用过程遇到的小问题
Nov 07 #Javascript
jQuery webuploader分片上传大文件
Nov 07 #Javascript
快速掌握jQuery插件WebUploader文件上传
Nov 07 #Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 #Javascript
功能强大的jquery.validate表单验证插件
Nov 07 #Javascript
JS 实现Base64编码与解码实例详解
Nov 07 #Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 #Javascript
You might like
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
php compact 通过变量创建数组
2016/11/15 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
js操作checkbox遇到的问题解决
2013/06/29 Javascript
node.js中的socket.io入门实例
2014/04/26 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
利用Vue.js实现求职在线之职位查询功能
2017/07/03 Javascript
Vue 2.0入门基础知识之内部指令详解
2017/10/15 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
JS实现“全选”和&quot;全不选&quot;功能代码实例
2020/02/06 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
Python中类型关系和继承关系实例详解
2015/05/25 Python
在Python中移动目录结构的方法
2016/01/31 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python 用下标截取字符串的实例
2018/12/25 Python
Python线程指南分享
2019/11/19 Python
python操作docx写入内容,并控制文本的字体颜色
2020/02/13 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
GNC健安喜美国官网:美国第一营养品牌
2016/07/22 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
环境科学专业优秀毕业生自荐书
2014/02/03 职场文书
保险公司早会主持词
2014/03/22 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
国际贸易实训报告
2014/11/05 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
react如何快速设置文件路径别名
2021/04/28 Javascript