数组的遍历和ES6中的数组

在重读《javascript高级程序设计》这本书的Array类型时,重点关注了一下数组的几种遍历方法,虽然工作中依然还是for循环居多,但是还是应该对其他遍历方法多了解一下,毕竟可以让代码更加优(zhuang)雅(bi)一点,2333,笑。。。。之后再说说ES6中数组的新特性。

map方法

map方法可以用来遍历数组,它支持一个函数作为入参,返回一个新的数组,不修改原来数组,返回数组的每一项都是原始数组在对应项上运行函数的结果。其中,传入函数有三个参数(value,index,array),分别是遍历项的值,遍历项的下标,数组本身。看下面的例子。

1
2
3
4
var mapResult = [1,2,3,4,3,2,1].map(function(value, index, arr){
return value + 1;
});
console.log(mapResult);//[2,3,4,5,4,3,2]

这个方法适合创建包含的项与另一个数组一一对应的数组.

filter方法

filter方法也返回一个数组,入参和map函数一样,它利用指定的函数确定是否在返回的数组中包含某一项。不改变原来数组。

1
2
3
4
var filterResult = [1,2,3,4,3,2,1].map(function(value, index, arr){
return (value > 2);
});
console.log(filterResult);//[3,4]

filter方法会遍历传入数组并把遍历项返回true的值放入新数组中,因此这个方法对查询符合或者不符合某些条件的所有数组项非常有用。

reduce方法和reduceRight方法

这两个方法并不是数组的迭代方法,而是数组的归并方法,这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。其中, reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。传给 reduce()和 reduceRight()的函数接收 4 个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。

1
2
3
4
var sum = [1,2,3,4].reduce(function(prev,cur,index,arr){
return prev + cur;
});
console.log(sum);//10

reduceRight刚好与之相反,参考上面,这个方法对于我们需要获得数组中的某种聚合数据的时候特别便利。比如:计算商品总和,计算视频时长。。。

reverse方法和sort方法

这两个方法也叫做重排序方法。reverse方法使用比较简单,就是反转数组项的顺序:

1
2
var arr = [1,3,2,4].reverse();
console.log(arr);//[4,2,3,1]

sort方法默认情况是按照升序排列数组项,在进行排序之前,sort方法会调用每个数组项的toString方法,然后比较字符串。

1
2
var arr = [0,1,5,10,15].sort();
console.log(arr);//[0,1,10,15,5];

WTF?好像跟预想的不一样啊,怎么不是升序排列了?书上说的也一知半解的所以就去网上查了查,上面说sort方法比较的是字符串,但并不是按照字符串长度比较的,而是使用的字符编码(ASCII)进行排序的,这样就可以解释,为什么5跑到了10和15后面去了。但是这种行为让我觉得很不行啊,根本满足不了我的需求。

所幸,sort方法提供比较函数作为入参,让我们有能力按照自己的方式进行排序。

1
2
3
4
5
6
7
8
9
10
11
12
function compare(value1, value2) {
if (value1 < value2) {
return -1;
} else if (value1 > value2) {
return 1;
} else {
return 0;
}
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
console.log(values); //[0,1,5,10,15]

所以有了这个比较函数,我们可以进行任何形式的排序了。

你要是觉得好的话,可以点一下哦!