1. 首页
  2. JAVASCRIPT
  3. Javascript 数组循环遍历之forEach

Javascript 数组循环遍历之forEach

•javascript•阅读 4657

1. js 数组循环遍历。

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

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

2. forEach 函数。

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

[html]view plaincopy

  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 plaincopy

  1. alert(Array.prototype.forEach);

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

3. 让IE兼容forEach方法

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

[javascript]view plaincopy

  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 plaincopy

  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 plaincopy

  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 是一样的。

相关推荐

Copyright © 2008-2024渝ICP备2022006305号-5.

本站所有数据收集于网络如有侵犯到您的权益请联系，进行下架处理。