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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
Javascript-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
DOM 事件流详解
Jan 20 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
理解javascript中DOM事件
Dec 25 Javascript
详解AngularJS脏检查机制及$timeout的妙用
Jun 19 Javascript
JavaScript转换数据库DateTime字段类型方法
Jun 27 Javascript
vue环境搭建简单教程
Nov 07 Javascript
了解ESlint和其相关操作小结
May 21 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 Javascript
vue制作toast组件npm包示例代码
Oct 29 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用strstr()函数阻止垃圾评论(通过判断a标记)
2013/09/28 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
js类中的公有变量和私有变量
2008/07/24 Javascript
jquery cookie插件代码类
2009/05/26 Javascript
jQuery 1.4 15个你应该知道的新特性(译)
2010/01/24 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
JavaScript使用位运算符判断奇数和偶数的方法
2015/06/01 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
解析Node.js基于模块和包的代码部署方式
2016/02/16 Javascript
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
AngularJS学习第一篇 AngularJS基础知识
2017/02/13 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
微信小程序授权登录解决方案的代码实例(含未通过授权解决方案)
2019/05/10 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
vue实现移动端省市区选择
2019/09/27 Javascript
微信小程序反编译的实现
2020/12/10 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Django数据库表反向生成实例解析
2018/02/06 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
python将类似json的数据存储到MySQL中的实例
2019/07/12 Python
Python for循环与getitem的关系详解
2020/01/02 Python
python实现计算图形面积
2021/02/22 Python
全球最大最受欢迎的旅游社区:Tripadvisor
2017/11/03 全球购物
优秀少先队工作者事迹材料
2014/05/13 职场文书
移交协议书
2014/08/19 职场文书
停车场管理协议书范本
2014/10/08 职场文书
委托收款证明
2015/06/23 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
python必学知识之文件操作(建议收藏)
2021/05/30 Python
Java并发编程必备之Future机制
2021/06/30 Java/Android
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL