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 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
js获取域名的方法
Jan 27 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
Jquery获取radio选中的值
May 05 jQuery
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
Jul 10 Javascript
vue组件命名和props命名代码详解
Sep 01 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+XML 制作简单的留言本 图文教程
2009/11/02 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
jquery利用拖拽方式在图片上添加热链接
2015/11/24 Javascript
分享jQuery封装好的一些常用操作
2016/07/28 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
Python线程详解
2015/06/24 Python
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
Django-celery-beat动态添加周期性任务实现过程解析
2020/11/26 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
创业计划书六个要素
2013/12/26 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
Golang实现AES对称加密的过程详解
2021/05/20 Golang