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里的条件判断
Feb 27 Javascript
用JTrackBar实现的模拟苹果风格的滚动条
Aug 06 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
基于Javascript实现的不重复ID的生成器
Dec 25 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
May 16 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
webpack打包非模块化js的方法
Oct 24 Javascript
基于Vue实现图片在指定区域内移动的思路详解
Nov 11 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
原生JS实现记忆翻牌游戏
Jul 31 Javascript
Vue和React有哪些区别
Sep 12 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生成EXCEL的东东
2006/10/09 PHP
php过滤危险html代码
2008/08/18 PHP
php的urlencode()URL编码函数浅析
2011/08/09 PHP
PHP 断点续传实例详解
2017/11/11 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
javascript实现面向对象类的功能书写技巧
2010/03/07 Javascript
jquery一般方法介绍 入门参考
2011/06/21 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
工作需要写的一个js拖拽组件
2011/07/28 Javascript
javascript常见数据验证插件大全
2015/08/03 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
JavaScript私有变量实例详解
2019/01/24 Javascript
在微信小程序中保存网络图片
2019/02/12 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
零基础写python爬虫之HTTP异常处理
2014/11/05 Python
Python自动化部署工具Fabric的简单上手指南
2016/04/19 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
Python 从列表中取值和取索引的方法
2018/12/25 Python
python装饰器练习题及答案
2019/11/01 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
Python内置方法和属性应用:反射和单例(推荐)
2020/06/19 Python
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
校班主任推荐信范文
2013/12/03 职场文书
2014个人反腐倡廉思想汇报
2014/09/15 职场文书
个人向公司借款协议书
2014/10/09 职场文书
委托公证书格式
2015/01/26 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript