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"等是字符串;