zoukankan      html  css  js  c++  java

  • JavaScript数组forEach()、map()、reduce()方法

    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.   
    9. <body>  
    10. <script>  
    11. var arryAll = [];  
    12. arryAll.push(1);  
    13. arryAll.push(2);  
    14. arryAll.push(3);  
    15. arryAll.push(4);  
    16.   
    17. arryAll.forEach(function(e){  
    18.     alert(e);  
    19. })  
    20.   
    21. </script>  
    22. </body>  
    23. </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.   
    9. <body>  
    10. <script>  
    11. if (!Array.prototype.forEach) {  
    12.     Array.prototype.forEach = function(callback, thisArg) {  
    13.         var T, k;  
    14.         if (this == null) {  
    15.             throw new TypeError(" this is null or not defined");  
    16.         }  
    17.         var O = Object(this);  
    18.         var len = O.length >>> 0; // Hack to convert O.length to a UInt32  
    19.         if ({}.toString.call(callback) != "[object Function]") {  
    20.             throw new TypeError(callback + " is not a function");  
    21.         }  
    22.         if (thisArg) {  
    23.             T = thisArg;  
    24.         }  
    25.         k = 0;  
    26.         while (k < len) {  
    27.             var kValue;  
    28.             if (k in O) {  
    29.                 kValue = O[k];  
    30.                 callback.call(T, kValue, k, O);  
    31.             }  
    32.             k++;  
    33.         }  
    34.     };  
    35. }  
    36.   
    37. var arryAll = [];  
    38. arryAll.push(1);  
    39. arryAll.push(2);  
    40. arryAll.push(3);  
    41. arryAll.push(4);  
    42. arryAll.push(5);  
    43.   
    44. var arrySpecial = [];  
    45.   
    46. arryAll.forEach(function(e){  
    47.     if(e%2==0)  
    48.     {  
    49.         arrySpecial.push(e);  
    50.     }else if(e%3==0)  
    51.     {  
    52.         arrySpecial.push(e);  
    53.     }  
    54. })  
    55.   
    56. </script>  
    57. </body>  
    58. </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 是一样的。

    5.map()

    对数组中每一个元素都运行函数, 返回由每次函数执行的结果组成的数组。果你想对数据里的每一个元素进行处理，可以采用forEach来替换 for循环，和forEach不同的是，它最终会返回一个新的数组，数组的元素是每次处理先前数组中元素返回的结果。

    var arr3 = [1,2,9,5,4];

    //数组中每个元素都要翻10倍

    var arr4 = arr3.map(function(ele,index,arr2){

          return ele*10;

    });

    console.log(arr4.toString());//10,20,90,50,40

    6.reduce()

    对数组中的所有元素调用指定的回调函数。 该回调函数的返回值为累积结果，并且此返回值在下一次调用该回调函数时作为参数提供。

    function appendCurrent(previousValue, currentValue){

          return previousValue + "::" + currentValue;

    }

    var elements = ["abc","def",123,456];

    var result = elements.reduce(appendCurrent);

    document.write(result);

    //output: abc::def::123::456

     
  • 相关阅读:
    Mybatis各种模糊查询
    ORACLE查询当前资产状态，和另一个数据库联查，（查询重复数据中第一条），子查询作为字段查询
    驱动文件操作
    驱动开发中使用安全字符串函数
    驱动开发 判断内存是否可读 可写
    驱动模式使用__try __excpet
    简单解释Windows如何使用FS段寄存器
    手动载入NT驱动
    PUSHA/PUSHAD
    跳转指令公式计算 HOOK
  • 原文地址：https://www.cnblogs.com/wyaocn/p/5808113.html
Copyright © 2011-2022 走看看