数组方法总结(进阶)

在此,我们总结一下进阶的数组方法:

2个索引方法:indexOf()和 lastIndexOf()

两个方法都返回要查找的项在数组中首次出现的位置,在没找到的情况下返回-1

indexOf()——–array.indexOf(item,start) (从数组的开头(位置 0)开始向后查找)

item: 必须。查找的元素。

start:可选的整数参数。规定在数组中开始检索的位置。如省略该参数,则将从array[0]开始检索。

lastIndexOf()——–array.lastIndexOf(item,start) (从数组的末尾开始向前查找)

item: 必须。查找的元素。

start:可选的整数参数。规定在数组中开始检索的位置。如省略该参数,则将从 array[array.length-1]开始检索。

1
2
3
4
5
6
7
8
<script>
var arr = [1,4,7,10,7,18,7,26];
console.log(arr.indexOf(7)); // 2
console.log(arr.lastIndexOf(7)); // 6
console.log(arr.indexOf(7,4)); // 4
console.log(arr.lastIndexOf(7,2)); // 2
console.log(arr.indexOf(5)); // -1
</script>

5个迭代方法:forEach()、map()、filter()、some()、every()

这几个方法语法都一样,都不会改变原数组。

forEach():对数组进行遍历循环,这个方法没有返回值。jquery()也提供了相应的方法each()方法。

语法:array.forEach(function(currentValue , index , arr){//do something}, thisValue)

currentValue : 必需。当前元素

index: 可选。当前元素的索引值。

arr : 可选。当前元素所属的数组对象。

thisValue: 可选。传递给函数的值一般用 “this” 值。如果这个参数为空, “undefined” 会传递给 “this” 值

1
2
3
4
5
6
7
8
9
10
11
<script>
var Arr = [1,4,7,10];
Arr.forEach(function(currentValue, index, arr){
console.log(index+"--"+currentValue+"--"+(arr === Arr));
})
// 输出:
// 0--1--true
// 1--4--true
// 2--7--true
// 3--10--true
</script>

map():指“映射”,方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

语法:array.map(function(currentValue , index , arr){//do something}, thisValue)

map方法实现数组中每个数求平方:

1
2
3
4
5
6
7
<script>
var arr = [1,4,8,10];
var arr2 = arr.map(function(currentValue){
return currentValue*currentValue;
});
console.log(arr2); // [1, 16, 64, 100]
</script>

filter(): “过滤”功能,方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。和filter() 方法类似,jquery中有个 grep()方法也用于数组元素过滤筛选。

语法: array.filter(function(currentValue , index , arr){//do something}, thisValue)

filter方法实现筛选排除掉所有小于5的元素:

1
2
3
4
5
6
7
8
9
10
11
<script>
var arr = [1,4,6,8,10];
var result1 = arr.filter(function(currentValue){
return currentValue>5;
});
console.log(result1); // [6, 8, 10]
var result2 = arr.filter(function(currentValue){
return currentValue>"5";
});
console.log(result2); // [6, 8, 10]
</script>

当我们分别设置item > 5和item > “5”时, 返回的结果是一样的,由此我们可以看出函数支持弱等于(==),不是必须全(===)。

every():判断数组中每一项都是否满足条件,只有所有项都满足条件,才会返回true。

语法: array.every( 大专栏  数组方法总结(进阶)function(currentValue , index , arr){//do something}, thisValue)

1
2
3
4
5
6
7
8
9
10
11
<script>
var arr = [1,4,6,8,10];
var result1 = arr.every(function(currentValue){
return currentValue< 12;
});
console.log(result1); // true
var result2 = arr.every(function(currentValue){
return currentValue> 1;
});
console.log(result2); // false
</script>

some():判断数组中是否存在满足条件的项,只要有一项满足条件,就会返回true。

语法: array.some(function(currentValue , index , arr){//do something}, thisValue)

1
2
3
4
5
6
7
8
9
10
11
<script>
var arr = [1,4,6,8,10];
var result1 = arr.some(function(currentValue){
return currentValue> 10;
});
console.log(result1); // false
var result2 = arr.some(function(currentValue){
return currentValue> 5;
});
console.log(result2); // true
</script>

2个归并方法:reduce()、reduceRight()

这两个方法都会迭代数组中的所有项,然后生成一个最终返回值。他们都接收两个参数,第一个参数是每一项调用的函数,函数接受四个参数分别是初始值,当前值,索引值,和当前数组,函数需要返回一个值,这个值会在下一次迭代中作为初始值。第二个参数是迭代初始值,参数可选,如果缺省,初始值为数组第一项,从数组第一个项开始叠加,缺省参数要比正常传值少一次运算。

reduce()方法从数组的第一项开始,逐个遍历到最后。而 reduceRight()则从数组的最后一项开始,向前遍历到第一项。

reduce()语法:arr.reduce(function(total , cur , index , arr){//do something}, initialValue)

reduceRight()语法:arr.reduceRight(function(total , cur , index , arr){//do something}, initialValue)

total :必需。初始值, 或者计算结束后的返回值。

cur :必需。当前元素。

index :可选。当前元素的索引。

arr:可选。当前元素所属的数组对象。

initialValue:可选。传递给函数的初始值。

下面代码实现数组求和:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
var arr = [1,2,3,4,5];
var result1 = arr.reduce(function(total,cur,index,arr){
console.log("total:"+total+",cur:"+cur+",index:"+index);
return total+cur;
});
console.log("结果:"+result1);
// 输出
// total:1,cur:2,index:1
// total:3,cur:3,index:2
// total:6,cur:4,index:3
// total:10,cur:5,index:4
// 结果:15
var result2 = arr.reduce(function(total,cur,index,arr){
console.log("total:"+total+",cur:"+cur+",index:"+index);
return total+cur;
},10);
console.log("结果:"+result2);
// 输出
// total:10,cur:1,index:0
// total:11,cur:2,index:1
// total:13,cur:3,index:2
// total:16,cur:4,index:3
// total:20,cur:5,index:4
// 结果:25
</script>

从上面代码我们可以看出,当我们不给函数传递迭代初始值时初始值 total 为数组第一项,函数从数组第二项开始迭代;若我们给函数传递迭代初始值,则函数从数组第一项开始迭代。


个人总结:
1.reduce方法使用技巧很多,要多加练习

猜你喜欢

转载自www.cnblogs.com/lijianming180/p/12401842.html