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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
JavaScript中的操作符==与===介绍
Dec 31 Javascript
jQuery图片渐变特效的简单实现
Jun 25 Javascript
用jmSlip编写移动端顶部日历选择控件
Oct 24 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
微信小程序getPhoneNumber获取用户手机号
Sep 29 Javascript
react学习笔记之state以及setState的使用
Dec 07 Javascript
Vue单页应用引用单独的样式文件的两种方式
Mar 30 Javascript
vue项目引入ts步骤(小结)
Oct 31 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
Echarts在Taro微信小程序开发中的踩坑记录
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 上一篇,下一篇文章实现代码与原理说明
2010/05/09 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
Javascript中的默认参数详解
2014/10/22 Javascript
jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法
2015/03/25 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
2017/12/07 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
2018/07/13 Javascript
vue中各选项及钩子函数执行顺序详解
2018/08/25 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
2018/09/12 Javascript
JavaScript模板引擎实现原理实例详解
2018/12/14 Javascript
JavaScript RegExp 对象用法详解
2019/09/24 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
node.js文件的复制、创建文件夹等相关操作
2021/02/05 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
python网络编程学习笔记(八):XML生成与解析(DOM、ElementTree)
2014/06/09 Python
Python中的作用域规则详解
2015/01/30 Python
Python的Flask开发框架简单上手笔记
2015/11/16 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
Django进阶之CSRF的解决
2018/08/01 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
Python基于network模块制作电影人物关系图
2020/06/19 Python
python 中的命名空间,你真的了解吗?
2020/08/19 Python
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
年终总结会主持词
2014/03/25 职场文书
销售顾问工作计划书
2014/09/15 职场文书
党的群众路线教育实践活动党员个人整改措施
2014/10/27 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
人生遥控器观后感
2015/06/11 职场文书