31. 数组新增方法

目录

前言

1. forEach()

2. map()

3. filter()

4. every()和some()

5. reduce()和reduceRight()

6. indexOf()和lastIndexOf()


前言

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

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

1. forEach()

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

扫描二维码关注公众号,回复: 14738562 查看本文章

var arr=[1,2,3,4,5];

//以后例程都基于这个数组

arr.forEach(function(val,index,arr){

console.log("数组元素值:"+val+" 数组索引:"+index+" 数组本身:"+arr);

});

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函数一样也会返回一个新的数组。判断是否符合条件的标准就是看传给filter的函数的返回值,如果返回为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方法大同小异,只是它是按照数组索引高到低处理数组,不是从低到高,这里就不再叙述;

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 从后往前找,再返回符合条件的第一个元素的索引

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

猜你喜欢

转载自blog.csdn.net/Mr_LiuP/article/details/123273158