数组遍历、过滤、迭代的方法

前端数据操作过程中，少不免要对数组进行处理。那数组里面提供的方法常用到的简单的做个整理，主要是数组的过滤、遍历和迭代。

• 遍历：按一定顺序查看数组里面的每一个元素值，可以处理得到相应的值或者得到最终值。
• 过滤：将满足条件的元素筛选出来，返回数组filter。
• 迭代：指依次计算元素，元素前后相互影响计算值，最后返回一个结果值。

1.遍历

for循环：遍历数组最常用的方法，适用于数组已知，知道其具体值、具体长度的情况。

var arr = [1,2,3,4,5,6,7,8]
for(var a=0;a<arr.length;a++){
//	console.log(typeof a) //number//索引是数字类型,蓝色字体   
	console.log(a+""+arr[a])
}

for in:遍历的是数组的属性名称，可以用来遍历对象。一个数组实际上也是一个对象，它的每个元素的索引被视为一个属性。

var arr = [1,2,3,4,5,6,7,8]
for(var i in arr){
//	console.log(typeof i) //string//索引是字符串类型
	console.log(i+arr[i])
}

arr.value = "val";
for(var i in arr){
	console.log(i+'   '+arr[i])
}
console.log(arr) //[1,2,3,4,5,6,7,8,value:'val']
alert(arr)		//1,2,3,4,5,6,7,8

for和for in的区别：

• for循环需要知道数组的长度，循环的是一个已知的数组；而for in可以循环未知的数组，并不需要知道其长度；
• for in遍历的是数组的属性名称，可以用来遍历对象；而for遍历的是数组的每一项，遍历的是个值，不能用来遍历对象；
• for in可以遍历到数组添加的自定义属性，而for不能；
• for和for in的索引值类型不同：for索引是number类型，而for in索引是string类型。

forEach:这个方法是有ES5提供的

var arr = [1,2,3,4,5,6,7,8]
arr.value = "val";
arr.forEach(function(item,index){
	console.log(""+index+item)
})

var arr1 = [1,2,3,4,,5,6,7,8]
arr1.forEach(function(item,index){
	console.log(""+index+item)
})

对于forEach,未赋值的值是不会在foreach循环迭代的，但是手动赋值为undefined的元素是会被列出的，01 12 23 34 55 66 77 88

如果是空“”，则结果是01 12 23 34 4 55 66 77 88，位置还是在的。foreach是数组的方法，不能用来遍历对象。添加自定义属性无效，不会遍历到。

for of:该方法是有ES6提供的

var arr = [1,2,3,4,5,6,7,8]
var arr1 = [1,2,3,,5,6,7,8]
var obj = {one:1,two:2,three:3}
arr.value = "val";

for(var value of arr){
	console.log(value)
}

for(var value of arr1){
	console.log(value)
}

forEach和for of比较

• 不同点：

1. 提出的时间不同，for each是ES5提出，for of是ES6提出；
2. for of遍历得到的是数组的项，没得到数组的索引；
3. 未赋值的值（数组项的位置上什么都没有），forEach得到的是空不展示，二for of得到的是undefined。

• 相同点：

1. 都是数组的方法，不能用来遍历对象；
2. 自定义属性不能遍历到；
3. 不能用来遍历属性名。

for in和for of比较，区别（此处参考另一篇博文）：

• 循环对象属性用for in,遍历数组用for of
• for in循环出来的是key，for of循环出来的是value
• for in 是ES5标准，for of 是ES6标准，兼容可能存在问题慎用
• for of不能遍历普通的对象，需要和和Object.keys()搭配使用
• for...in 循环除了遍历数组元素外，还会遍历自定义属性，for...of只可以循环可迭代的可迭代属性，不可迭代属性在循环中被忽略了。

map：遍历数组，得到的结果还是一个数组。可以通过callback对数组元素进行操作，将操作结果放入数组中并返回该数组。

var arr = [1,2,3,4,,5,6,7,8]
var a = arr.map(function(item,i,array){
	return item+''+i
})
console.log(a)

注：map是数组的方法，不用来遍历对象，未赋值的值也不会迭代，只是位置存在，如上面代码显示结果：Array(9)展示就是

[0:"10",1:"21",2:"32",3:"43",5:"55",6:"66",7:"77",8:"88"]。遍历的也是数组的项而不是属性名。

every:当数组中的每一个元素在callback上被返回true时就返回true

var arr2 = ["hello",1,2,3,4,5]
var bol = arr2.every(function(item,i,array){
	if(typeof item == "string"){
		return item;
	}
})
console.log(bol) //false

some：当数组中的某一元素在callback上被返回true时返回true

var arr2 = ["hello",1,2,3,4,5]
var bol1 = arr2.some(function(item,i,array){
if(typeof item == "string"){
	return item;
}
})
console.log(bol1)

every()与some()对比

区别是：前者要求所有元素都符合条件才返回true,后者要求只要有符合条件的就返回true

相同点：对数组中元素每一项进行布尔运算，返回false和true。

2.过滤

filter：返回一个包含所有在回调函数上返回为true的元素新数组，回调函数在此担任的是过滤器的角色。

var arr = [1,2,3,4,,5,6,7,8]
var obj = {one:1,two:2,three:3}
arr.value = "val";
var b = arr.filter(function(item,i,array){
	if(typeof item == "number"){
		return item+""+i+""+array;
	}
})
console.log(b)

注：1、filter不支持索引，回调不支持第二个参数；

       2、当元素符和条件，过滤器就返回true,而filter则会返回所有符合过滤条件的元素；

       3、属性名无效，不支持对象遍历的方法。

every()与filter()的区别：

• 后者会返回所有符合过滤条件的元素；
• 前者会判断是不是数组中的所有元素都符合条件，并且返回的是布尔值

3.迭代

reduce：从前向后迭代。迭代从第二项开始，prev初始值为第一项，cur初始值为第二项。计算值自动传给下一函数的prev，返回最后一次迭代产生的值。结果是1+2+3+4+5+6+7+8，如果是prev+cur，结果会是36。

var arr = [1,2,3,4,,5,6,7,8]
var ccc = arr.reduce(function(prev,cur,index,arry){
	return prev+"+"+cur
})
console.log(ccc)

reduceRight：从后向前迭代。迭代从倒数第二项开始，prev初始值为最后一项，cur初始值为倒数第二项。计算值自动传给下一函数的prev，返回最后一次迭代产生的值。结果是8+7+6+5+4+3+2+1，如果是prev+cur结果是36。

var arr = [1,2,3,4,,5,6,7,8]
var ccc = arr.reduceRight(function(prev,cur,index,arry){
	return prev+"+"+cur
})
console.log(ccc)