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 full screen 全屏显示页面元素的方法
Sep 27 Javascript
Jquery Ajax方法传值到action的方法
May 11 Javascript
js数组去重的方法汇总
Jul 29 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
Dec 08 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
javascript实现右下角广告框效果
Feb 01 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
Sep 20 Javascript
JS实现的简单四则运算计算器功能示例
Sep 27 Javascript
浅谈webpack 自动刷新与解析
Apr 09 Javascript
Vue实现input宽度随文字长度自适应操作
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中的超全局变量
2006/10/09 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php调用google接口生成二维码示例
2014/04/28 PHP
PHP多文件上传实例
2015/07/09 PHP
php删除数组中重复元素的方法
2015/12/22 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
让您的菜单不离网站
2006/10/03 Javascript
JQuery Ajax通过Handler访问外部XML数据的代码
2010/06/01 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
纯js实现手风琴效果代码
2020/04/17 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
node.js中实现kindEditor图片上传功能的方法教程
2017/04/26 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
Angular整合zTree的示例代码
2018/01/24 Javascript
vue项目前端埋点的实现
2019/03/06 Javascript
Vue自定义全局Toast和Loading的实例详解
2019/04/18 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
2020/02/14 Javascript
Python三元运算实现方法
2015/01/12 Python
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
Python验证企业工商注册码
2015/10/25 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
python批量获取html内body内容的实例
2019/01/02 Python
解决python 文本过滤和清理问题
2019/08/28 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
html5拖曳操作 HTML5实现网页元素的拖放操作
2013/01/02 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
项目资料员岗位职责
2013/12/10 职场文书
质检员岗位职责
2013/12/17 职场文书
用人单位终止解除劳动合同证明书
2014/10/06 职场文书
劳动争议仲裁代理词
2015/05/25 职场文书
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript