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 类似flash效果的立体图片浏览器
Feb 08 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
js 动态为textbox添加下拉框数据源的方法
Apr 24 Javascript
jquery获取选中的文本和值的方法
Jul 08 Javascript
js判断登录与否并确定跳转页面的方法
Jan 30 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
Apr 21 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
在Html中使用Requirejs进行模块化开发实例详解
Apr 15 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
关于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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
php download.php实现代码 跳转到下载文件(response.redirect)
2009/08/26 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
jQuery学习笔记 获取jQuery对象
2012/09/19 Javascript
JS按字节截取字符长度实例
2013/11/20 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
关于JS解构的5种有趣用法
2019/09/05 Javascript
Vue $emit()不能触发父组件方法的原因及解决
2020/07/28 Javascript
python算法学习之基数排序实例
2013/12/18 Python
Python中的匿名函数使用简介
2015/04/27 Python
深入解析Python中的__builtins__内建对象
2016/06/21 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
python字符串格式化方式解析
2019/10/19 Python
Python如何实现动态数组
2019/11/02 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
巴西购物网站:Submarino
2020/01/19 全球购物
应届实习生的自我评价范文
2014/01/05 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
公司演讲稿开场白
2014/08/25 职场文书
新闻学专业职业生涯规划范文:我的人生我做主
2014/09/12 职场文书
读后感作文评语
2014/12/25 职场文书
关于长城的导游词
2015/01/30 职场文书
离婚纠纷代理词
2015/05/23 职场文书
党校团干班培训心得体会
2016/01/06 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
Oracle笔记
2021/04/05 Oracle
解读MySQL的客户端和服务端协议
2021/05/10 MySQL
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL