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 Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
jQuery过滤选择器用法分析
Feb 10 Javascript
jquery中map函数遍历数组用法实例
May 18 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
Javascript设计模式之观察者模式(推荐)
Mar 29 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
vue实现的双向数据绑定操作示例
Dec 04 Javascript
VSCode launch.json配置详细教程
Jun 18 Javascript
JS倒计时两种实现方式代码实例
Jul 27 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
php实现jQuery扩展函数
2009/10/30 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
javascript demo 基本技巧
2009/12/18 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
jQuery中after()方法用法实例
2014/12/25 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
Vue异步加载about组件
2017/10/31 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
值得收藏的八个常用的js正则表达式
2018/10/19 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
调试Python程序代码的几种方法总结
2015/04/28 Python
Python环境变量设置方法
2016/08/28 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python实现微信发送邮件关闭电脑功能
2018/02/22 Python
python判断列表的连续数字范围并分块的方法
2018/11/16 Python
Python列表常见操作详解(获取,增加,删除,修改,排序等)
2019/02/18 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
6种非常炫酷的CSS3按钮边框动画特效
2016/03/16 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
学术会议邀请函范文
2014/01/22 职场文书
学生会离职感言
2014/02/11 职场文书
人事文员岗位职责
2014/02/16 职场文书
平安校园建设方案
2014/05/02 职场文书
毕业生学校组织意见
2015/06/04 职场文书
2016公司新年问候语
2015/11/11 职场文书