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 相关文章推荐
IE和Firefox下javascript的兼容写法小结
Dec 10 Javascript
jquery 防止表单重复提交代码
Jan 21 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
jQuery截取指定长度字符串的实现原理及代码
Jul 01 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
jquery validation验证表单插件
Jan 07 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
Jan 16 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
关于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文件缓存内容保存格式实例分析
2014/08/20 PHP
PHP基本语法总结
2014/09/06 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
js获取地址栏中传递的参数(两种方法)
2017/02/08 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
JS实现的判断方法、变量是否存在功能示例
2020/03/28 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
Python操作json数据的一个简单例子
2014/04/17 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
使用Python实现微信提醒备忘录功能
2018/12/04 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
Madewell美德威尔美国官网:美国休闲服饰品牌
2016/11/25 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
linux面试题参考答案(11)
2016/11/26 面试题
大学生入党思想汇报
2014/01/01 职场文书
同学聚会主持词
2014/03/18 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
投标保密承诺书
2014/05/19 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
五好家庭事迹材料
2014/12/20 职场文书
农村党支部承诺书
2015/04/30 职场文书
民事起诉书范本
2015/05/19 职场文书
公司劳动纪律管理制度
2015/08/04 职场文书
MySQL外键约束(FOREIGN KEY)案例讲解
2021/08/23 MySQL
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js