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

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

遍历：按一定顺序查看数组里面的每一个元素值，可以处理得到相应的值或者得到最终值。
过滤：将满足条件的元素筛选出来，返回数组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比较

不同点：

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

相同点：

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

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)

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

猜你喜欢