JavaScript数组的5种迭代方式

发表于 | 阅读次数: |
字数统计: 738字 | 阅读时长 ≈ 3分钟
  |    阅读次数

ECMAScript 5 为数组定义了5个迭代方法。每个方法都接收两个参数： 要在每一项上运行的函数和（可选的）运行该函数的作用域对象–影响this的值。 传入的这些方法中的函数会接收三个参数： 数组项的值， 该项在数组中的位置和数组对象本身。 根据使用的方法不同，这个函数执行后的返回值可能会也可能不会影响访问的返回项。一下是这5个迭代方法的作用。

  • every() : 对数组中的每一项运行给定的函数，如果该函数对每一项都返回true，则返回true。

  • filter() : 对数组中的每一项运行给定的函数， 返回该函数会返回true的项组成的数组。

  • forEach() : 对数组中的每一项运行给定的函数。这个方法没有返回值。

  • map() : 对数组中的每一项运行给定的函数， 返回每次函数调用的结果组成的数组。

  • some() : 对数组中的每一项运行给定的函数，如果该函数对任一项返回true，则返回true。

请看下面的例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ES5： 
	var numbers = [1,2,3,4,5,4,3,2,1]
	var everyReault = numbers.every(function(item, index, arr){
	 return item > 2;
	})
	console.log(everyResult); //false
	
	var someResult = numbers.some(function(item, index, arr){
	 return item >2;
	})
	console.log(someResult) //true
ES6:
   var numbers = [1,2,3,4,5,4,3,2,1];
   var everyResult = numbers.every((item, index, arr)=>{
	   return item >2;
   })
   console.log(everyResult); 
 
   var someResult = numbers.some((item, index, arr)=>{
	   return item > 2;
   })
   console.log(someResult)

以上代码调用了every()和some()，传入的函数只要给定项大于2就会返回true。对于every()，它返回的是false，因为只用部分数组项符合条件。对于some()，结果就是true，因为至少有一项是大于2的。

下面来看filter()函数，它利用指定的函数确定是否在返回的数组中包含的某一项。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
ES5：
	var numbers = [1,2,3,4,5,4,3,2,1];
	var filterResult = numbers.filter(function(item. index, arr){
		return item > 2;
	})
	console.log(filterResult); //[3,4,5,4,3]
	var mapResult = numbers.map(function(item, index, arr){
		return itme * 2;
	})
	console.log(mapResult); //[2,4,6,8,10,8,6,2]
	
ES6：
	var numbers = [1,2,3,4,5,4,3,2,1];
	var filterResult = numbers.filter((item, index, arr)=>{
		return item > 2;
	})
	console.log(filterResult)
	var mapResult = numbers.map((item, index, arr)=>{
		return item * 2;
	}) 
	console.log(mapResult);

调用filter()方法创建并返回[3,4,5,4,3]，因为传入的函数对它们每一项都是true。
调用map()方法也返回一个数组，而这个数组的每一项都是在原始数组中对应项上运行传入函数的结果。

最后一个方法是forEach()，它只对数组中的每一项运行传入的函数。这个方法没有返回值，本质上和for循环迭代数组一样。

1
2
3
4
5
6
7
8
9
10
ES5:
	var numbers = [1,2,3,4,5,4,3,2,1]
	numbers.forEach(function(item, index, arr){
	//this it options
	})
ES6:
	var numbers = [1,2,3,4,5,4,3,2,1]
	numbers.forEach((item. index, arr)=>{
	//options
	})