JS常用数组遍历

最近前端代码在codereview的时候,发现同事的数组遍历用的是map方法,这个我没看懂,原因是我之前没了解过这种写法.我之前写J2EE最常用的应该就是普通的for循环了吧,短短几年前端JS又多了许多遍历数组迭代的方法了.既然已经有for循环了,那么为啥还要出现其他的数组遍历方法了?我想原因就3点: 1.性能相比普通for循环效率更高;2.写起来更加的优雅、简便;3:作用场景不一样.既然这样,那我们是要好好的了解下,才能写出更加高效、更加优雅的代码了.

一.常用数组的遍历

1.普通for循环

	var txt = ""
	var array = [1,2,3,4,5]
	for(var j=0;j<array.length;j++){
		txt = txt + array[j] + '<br/>'
	}
	document.getElementById('app').innerHTML = txt

简要说明:最简单的一种,也是使用频率最高的一种,虽然性能不弱,但是仍然有优化的空间.

2.优化版for循环

	var txt = ""
	var array = [1,2,3,4,5]
	for(var j=0,len=array.length;j<len;j++){
		txt = txt + array[j] + '<br/>'
	}
	document.getElementById('app').innerHTML = txt

简要说明:使用临时变量将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显.这种方法基本上是所有循环遍历方法中性能最高的一种.

3.foreach循环

	var txt = ""
	var array = [1,2,3,4,5]
	array.forEach(function(element,index){
	   txt = txt + element + ' 我的索引是' + index + '<br/>'
	});
	document.getElementById('app').innerHTML = txt

简要说明:数组自带的循环,主要功能就是遍历数组,实际性能比for循环还弱;forEach这种方法也有一个小缺陷:你不能使用break语句中断循环,也不能使用return语句返回到外层函数。

4.map循环

4.1 无返回值

	var txt = ""
	var array = [1,2,3,4,5]
	array.map(function(element,index){
	   txt = txt + element + ' 我的索引是' + index + '<br/>'
	});
	document.getElementById('app').innerHTML = txt

4.2 有返回值

	var txt = ""
	var array = [1,2,3,4,5]
	var temp = array.map(function(element,index){
	   return txt = txt + element*2 + '<br/>'
	});
	document.getElementById('app').innerHTML = txt

	var content = ""
	temp.map(function(element,index){
		content =  element
	})
	document.getElementById('app1').innerHTML = content

简要说明:map即是 “映射”的意思 用法与 forEach 相似,map遍历支持使用return语句，支持return返回值; map方法通过对每个数组元素执行函数来创建新数组;map方法不会对没有值的数组元素执行函数;map方法不会更改原始数组.

5.filter循环

	var txt = ""
	var array = [1,2,3,4,5]
	var temp = array.filter(function(element,index){
		if(element%2===0){
			console.log('我是偶数,能被2整除')
			return txt = txt + element + '<br/>'
		}
	});
	document.getElementById('app').innerHTML = txt

	var content = ""
	temp.map(function(element,index){
		content =  content + element + '<br/>'
	})
	document.getElementById('app1').innerHTML = content

简要说明:过滤通过条件的元素组成一个新数组，原数组不变.

6.for-of循环

	var txt = ""
	var array = [1,2,3,4,5]
	for(element of array){
		txt = txt + element + '<br/>'
	}
	document.getElementById('app').innerHTML = txt

简要说明:for-of这个方法避开了for-in循环的所有缺陷;与foreach不同的是,它可以正确响应break、continue和return语句;for-of循环不仅支持数组,也支持字符串遍历;

二.额外补充:对象的遍历

1.for-in循环

	var txt = ""
	var obj = {"name": "xiaowu","age": 18,"sex": "男"}
	for(attribute in obj){
		txt = txt + obj[attribute] + '<br/>'
	}
	document.getElementById('app').innerHTML = txt

简要说明:for-in是为遍历对象而设计的,不适用于遍历数组;遍历数组的缺点：数组的下标index值是数字，for-in遍历的index值"0","1","2"等是字符串;