forEach的使用方法

[-]

  1. 1  js 数组循环遍历
  2. 2  forEach 函数
  3. 3  让IE兼容forEach方法
  4. 4 如何跳出循环

1.  js 数组循环遍历。

数组循环变量，最先想到的就是 for(var i=0;i<count;i++)这样的方式了。

除此之外，也可以使用较简便的forEach 方式

2.  forEach 函数。

Firefox 和Chrome 的Array 类型都有forEach的函数。使用如下：

[html] view plain copy

  1. <!--Add by oscar999-->
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  3. <HTML>
  4. <HEAD>
  5. <TITLE> New Document </TITLE>
  6. <META NAME="Author" CONTENT="oscar999">
  7. </HEAD>
  8. <BODY>
  9. <script>
  10. var arryAll = [];
  11. arryAll.push(1);
  12. arryAll.push(2);
  13. arryAll.push(3);
  14. arryAll.push(4);
  15. arryAll.forEach(function(e){
  16. alert(e);
  17. })
  18. </script>
  19. </BODY>
  20. </HTML>

但是以上，代码在IE中却无法正常工作。

因为IE的Array 没有这个方法

[javascript] view plain copy

  1. alert(Array.prototype.forEach);

执行以上这句得到的是  "undefined"， 也就是说在IE 中 Array 没有forEach的方法。

3.  让IE兼容forEach方法

既然IE的Array 没哟forEach方法， 我们就给它手动添加这个原型方法。

[javascript] view plain copy

  1. //Array.forEach implementation for IE support..
  2. //https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach
  3. if (!Array.prototype.forEach) {
  4. Array.prototype.forEach = function(callback, thisArg) {
  5. var T, k;
  6. if (this == null) {
  7. throw new TypeError(" this is null or not defined");
  8. }
  9. var O = Object(this);
  10. var len = O.length >>> 0; // Hack to convert O.length to a UInt32
  11. if ({}.toString.call(callback) != "[object Function]") {
  12. throw new TypeError(callback + " is not a function");
  13. }
  14. if (thisArg) {
  15. T = thisArg;
  16. }
  17. k = 0;
  18. while (k < len) {
  19. var kValue;
  20. if (k in O) {
  21. kValue = O[k];
  22. callback.call(T, kValue, k, O);
  23. }
  24. k++;
  25. }
  26. };
  27. }

详细介绍可以参照：
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach

4. 如何跳出循环？

Js 此种状况的forEach 不能使用continue, break;  可以使用如下两种方式：
1. if 语句控制
2. return . (return true, false)
return --> 类似continue

以下例子是取出数组中2的倍数和3的倍数的数;

[html] view plain copy

  1. <!--Add by oscar999-->
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  3. <HTML>
  4. <HEAD>
  5. <TITLE> New Document </TITLE>
  6. <META NAME="Author" CONTENT="oscar999">
  7. </HEAD>
  8. <BODY>
  9. <script>
  10. if (!Array.prototype.forEach) {
  11. Array.prototype.forEach = function(callback, thisArg) {
  12. var T, k;
  13. if (this == null) {
  14. throw new TypeError(" this is null or not defined");
  15. }
  16. var O = Object(this);
  17. var len = O.length >>> 0; // Hack to convert O.length to a UInt32
  18. if ({}.toString.call(callback) != "[object Function]") {
  19. throw new TypeError(callback + " is not a function");
  20. }
  21. if (thisArg) {
  22. T = thisArg;
  23. }
  24. k = 0;
  25. while (k < len) {
  26. var kValue;
  27. if (k in O) {
  28. kValue = O[k];
  29. callback.call(T, kValue, k, O);
  30. }
  31. k++;
  32. }
  33. };
  34. }
  35. var arryAll = [];
  36. arryAll.push(1);
  37. arryAll.push(2);
  38. arryAll.push(3);
  39. arryAll.push(4);
  40. arryAll.push(5);
  41. var arrySpecial = [];
  42. arryAll.forEach(function(e){
  43. if(e%2==0)
  44. {
  45. arrySpecial.push(e);
  46. }else if(e%3==0)
  47. {
  48. arrySpecial.push(e);
  49. }
  50. })
  51. </script>
  52. </BODY>
  53. </HTML>

使用return 达到以上效果

[javascript] view plain copy

  1. arryAll.forEach(function(e){
  2. if(e%2==0)
  3. {
  4. arrySpecial.push(e);
  5. return;
  6. }
  7. if(e%3==0)
  8. {
  9. arrySpecial.push(e);
  10. return;
  11. }
  12. })

至于如何写类似break 的效果，目前尚未找到比较好的办法。

有搜索一下，有的说return false 可以达成， 试了一下， 效果和return 和return ture 是一样的。

时间： 2024-07-30 17:07:51

forEach的使用方法的相关文章

JS的forEach和map方法的区别，还有一个$.each

forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的.jQuery也有一个方法$.each(),长得和forEach()有点像,功能也类似.但是从本质上还是有很大的区别的,那么我们探探究竟. 一.forEach和map语法 语法: //forEach array.forEach(callback(currentValue, index, array){ //do something }, this)

JavaScript中的数组遍历forEach()与map()方法以及兼容写法

原理: 高级浏览器支持forEach方法 语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文: forEach:用来遍历数组中的每一项:这个方法执行是没有返回值的,对原来数组也没有影响: 数组中有几项,那么传递进去的匿名回调函数就需要执行几次: 每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input: 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改:但是我

thinkphp使用foreach遍历的方法

我们在做一些需求的时候可能会对遍历的上限有一定的要求,这时候就需要对上限进行限定 首先使用foreach遍历的输出数组相比较于volist功能较少 volist标签主要用于在模板中循环输出数据集或者多维数组 具体的解释参考手册. 但是foreach可以对对象进行遍历输出,而volist通常用于输出数组. 例如下面的代码: 每次循环做++运算,但是加一个判断语句就可以对其进行限制上限,继续执行下面的判断方法. foreach($list1 as &$rs){        $Num++;     

27.6 Parallel的静态For，Foreach和Invoke方法

static void Main(string[] args) { //for (int i = 0; i < 10000; i++) // DoWork(i); //Parallel.For(0, 10000, i => DoWork(i)); //Mehtod1(); //Mehtod2(); //Mehtod3(); Parallel.Invoke(() => Mehtod1(), () => Mehtod2(), () => Mehtod3()); Console.R

forEach, map, filter方法区别

听说for循环已经成了菜鸟标配...? 瑟瑟发抖 赶紧找来资料补一补 1, forEach循环,循环数组中每一个元素并采取操作, 没有返回值, 可以不用知道数组长度 2, map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新的数组,原数组不变 3,filter函数, 过滤通过条件的元素组成一个新数组, 原数组不变 4, some函数,遍历数组中是否有符合条件的元素,返回Boolean值 5,every函数, 遍历数组中是否每个元素都符合条件, 返回Boolean值 原文引用:htt

JAVA 中for-each循环使用方法

for each循环还是第一次见,“java SE 5.0增加了一种功能很强的循环结构,可以用来一次处理数组中的每个元素(其他类型的元素集合亦可)而不必为指定下标值而分心”. 这种增强的for each循环的语句格式为: for(variable : collection)statement 定义一个变量用于暂存集合的每一个元素,并执行相应的语句.collection这一集合表达式必须是一个数组或者是一个实现了list等接口的类(重要).

C# foreach 有用方法具体解释

网上查资料,说foreach 不能改动迭代变量,仅仅能訪问迭代变量.自己理解也不是非常深,通过几个代码进行验证,发现foreach的使用方法还有点特别 验证方法: 1. 迭代变量 为int int[] argint = { 12,12,12,12,12}; foreach (int item in argint) { item = 100; } 结果:编译不通过,提示item为迭代变量,无法为它赋值: 2. 迭代变量为struct public struct MyStruct { public

最简单语言理解Array扩展的新方法，map，reduce，filter，forEach

一直以来很多人对这4个方法都不是很熟悉,也不太会用,网上的很多教程写的都模模糊糊(程序员们的表达能力太弱,原谅他们吧) 所以今天我打算用最简单的语言来说清楚这4个东西 map:说白了就是一一对应,进去10个,出来10个,不多不少刚刚好 比如上学那会的考试成绩,[62, 55, 98],对应的另外一层含义就是 [及格,不及格,优秀],数组一一对应,只是换了个方法展示 reduce:意思就是减少(翻译也是减少),说白了就是进去多个,只出来1个 比如一个班级的平均分,不管数组里有多少个数,出来只有1个

PHP之提取多维数组指定列的方法

前言:有时候在开发中会遇到这样的问题,我们需要把有规律的多维数组按照纵向(列)取出,有下面的方法可用: 我们将拿下面的数组来处理: 1 $arr = array( 2 '0' => array('id' => 1, 'name' => 'name1'), 3 '1' => array('id' => 2, 'name' => 'name2'), 4 '2' => array('id' => 3, 'name' => 'name3'), 5 '3' =&