zoukankan      html  css  js  c++  java
  • ES5中数组的新方法

    在ES5中新增了很多有用的数组方法,下面就来讲讲这些方法的基本用法。

    在新增的方法中,大多数方法的第一个参数都是一个函数,并且对数组的每个元素(或者某些元素)调用一次该函数。在大多数情况下调用提供的函数会提供3个参数,分别表示数组元素即value,数组索引,数组本身。如有不清楚下面会有例子说明。

    1 forEach()

    顾名思义就是遍历数组,该方法的第一个参数是一个函数,该函数会有3个参数,分别代表数组元素即value,数组索引,数组本身。举例:

    var arr=[1,2,3,4,5];
    //以后例程都基于这个数组        
            arr.forEach(function(val,index,arr){
                console.log("数组元素值:"+val+"   数组索引:"+index+"  数组本身:"+arr);
            });

    forEach方法接受的第一个参数是一个函数,该函数有三个参数,参数意义上面已经解释。结果如下:

    2 map()

    map方法将调用的数组的每个元素传递给指定的函数,并返回一个新的数组,这个新的数组就是通过函数处理后的数组。

            var arr2=arr.map(function(val,index,arr){
                //console.log("数组元素值:"+val+"   数组索引:"+index+"  数组本身:"+arr);
                return val*2;
                
            })
            console.log(arr2);//不会改变原数组
            console.log(arr);

    我们可以看到经过map函数后会返回一个新的数组,该数组就是经过匿名函数处理后的结果,当然传递给map的函数应该有返回值。还有原数组是不会被改变的。

    3  filter()

    从名字就可以看出这是一个过滤器,在执行filter方法后会返回符合条件的数组,也就是说和map函数一样也会返回一个新的数组。判断是否符合条件的标准就是看传给map的函数的返回值,如果返回为true,那么把这个元素添加进新的数组中,否则不。例:

            var arr3=arr.filter(function(val,index,arr){
                //console.log(val+"=="+index+"=="+arr);
                return val>3;
            })
            
            console.log(arr3);
            console.log(arr);

    4 every()和some()

    every和some都是对数组中的每个元素进行逻辑判断,最后返回一个布尔值。直接上例子:

            var flag=arr.every(function(val,index,arr){
                return val>=3;
            });
            console.log(flag);

    最后打印的结果为false,every函数必须要每个元素都符合条件,最后才会返回true。

            var flag2=arr.some(function(val,index,arr){
                return val>4;
            })
            console.log(flag2);

    最后打印的结果为true,some方法只要有一个数组元素满足条件满足条件就会返回true,只有当所有的元素都不满足条件时才会返回false。

    every方法中当有一个元素不符合条件返回false时,那么就会终止遍历,直接返回false;而some方法正好相反,只要有一个元素返回true时,就会终止遍历而直接返回true。

    5 reduce()和reduceRight()

    这两个方法是将数组元素进行某种组合生成单个值,然后返回这个值。直接看例程吧!

        var value=arr.reduce(function(sum,val,index,arr){
                console.log("和:"+sum+"数组元素值:"+val+"   数组索引:"+index+"  数组本身:"+arr);
                return sum+val;
            },0)
            console.log(value);

    最后的结果为15。就是这个数组每个元素之和。

    我们可以看到reduce可以接受两个参数,第一个是简化函数,第二个是传递给函数的一个初始值。而简化函数也可以有4个参数,分别表示到目前为止简化操作积累的结果,数组元素值,数组索引和数组本身。第一次调用时第一个参数即sum的值就是reduce方法的第二个参数即初始值。当然我们也可以省略reduce方法的第二个参数(即初始值),得到的最终结果也会是一样的,但是过程有稍微的不同,即直接把数组的第一个元素当做了初始值。那么相比上面就少打印了一行。

    值得注意的是:在空数组上,如果省略了初始值调用reduce方法就会抛出类型错误异常。

            var arr=[];
            var value=arr.reduce(function(sum,val,index,arr){
                //console.log("和:"+sum+"数组元素值:"+val+"   数组索引:"+index+"  数组本身:"+arr);
                return sum+val;
            })
            console.log(value);

    当然如果是空数组,有初始值,或者数组只有一个元素并且没有初始值,那么只会简单的返回那个值,而不会抛出异常。见例程:

            var arr=[3];
            var value=arr.reduce(function(sum,val,index,arr){
                //console.log("和:"+sum+"数组元素值:"+val+"   数组索引:"+index+"  数组本身:"+arr);
                return sum+val;
            })
            console.log(value);

    那么结果会是3,

            var arr=[];
            var value=arr.reduce(function(sum,val,index,arr){
                //console.log("和:"+sum+"数组元素值:"+val+"   数组索引:"+index+"  数组本身:"+arr);
                return sum+val;
            },7)
            console.log(value);

    那么结果会是7,都不会抛出异常。

    而reduceRight方法和reduce方法大同小异,只是它是按照数组索引从高到低处理数组,不是从低到高,这里就不再叙(zhuang)述(bi);

    6 indexOf()和lastIndexOf()

    顾名思义。知道这个是判断数组是否包含某个值,只不过indexOf是从低往高找,而lastIndexOf是从高往低找。如果包含则返回找到的第一个元素的索引,如果没找到就返回-1。还是见例程吧:

            var arr=[1,2,3,2,4,5]
            
            var index=arr.indexOf(2);
            var index2=arr.indexOf(8);
            var lastIndex=arr.lastIndexOf(2);
            console.log(index);  //1  只会返回第一个符合条件的元素的索引
            console.log(index2); //-1
            console.log(lastIndex); //3  从后往前找,再返回符合条件的第一个元素的索引

    结果以及原因例程后面注释都已经写清楚了。

    好了本来一个很简单的东西,被我折腾了这么多,最后真心感谢您能够坚持看到这里,谢谢。当然大部分还是在参考《JavaScript权威指南》这本书,原来看的头疼,现在觉得有些地方写的真好。

  • 相关阅读:
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!
    AngularJS学习笔记1
    实习第2天
    转:JavaScript事件冒泡简介及应用
    icon font字体图标字库汇总
    Express4--说明
  • 原文地址:https://www.cnblogs.com/djlxs/p/5409517.html
Copyright © 2011-2022 走看看