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 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
详解webpack2+React 实例demo
Sep 11 Javascript
在vue项目中,使用axios跨域处理
Mar 07 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
vue监听dom大小改变案例
Jul 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正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
JavaScript 事件参考手册
2008/12/24 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
Firefox下无法正常显示年份的解决方法
2014/09/04 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
NodeJs使用Mysql模块实现事务处理实例
2017/05/31 NodeJs
JS实现颜色的10进制转化成rgba格式的方法
2017/09/04 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
原生js实现照片墙效果
2020/10/13 Javascript
[02:19]DOTA2女子战队FOX视频专访:希望更多美眉一起加入
2013/10/15 DOTA
python版DDOS攻击脚本
2019/06/12 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
如何使用Cython对python代码进行加密
2020/07/08 Python
详解Python Celery和RabbitMQ实战教程
2021/01/20 Python
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
alice McCALL官网:澳大利亚时尚品牌
2020/11/16 全球购物
求职信的最佳写作思路
2014/02/01 职场文书
高中军训感言400字
2014/02/24 职场文书
护士找工作求职信
2014/07/02 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
党员查摆问题及整改措施
2014/10/10 职场文书
营销与策划实训报告
2014/11/05 职场文书
学校后勤工作总结2015
2015/05/15 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server
Golang日志包的使用
2022/04/20 Golang