【原創】jquery中 each 和 $.each 異同以及原生的forEach

一，each 和 $.each 異同

1. 相同的點：都是遍歷方法；
2. 不一樣的點：each遍歷dom對象；$.each遍歷數據源（數組或對象）

 

二，each遍歷dom實例：

什麼樣的dom適合作遍歷？
答：針對重複有規律的dom，咱們能夠經過each來遍歷獲值；this關鍵字都指向一個不一樣的DOM元素（每次都是一個不一樣的匹配元素）

html以下：

<div class="row">
	<div class="col-md-3">寶馬</div>
	<div class="col-md-3">奧迪</div>
	<div class="col-md-3">大衆</div>
	<div class="col-md-3">別克</div>
</div>
<table>
	<tr>
		<td>寶馬</td>
		<td>奧迪</td>
		<td>大衆</td>
		<td>別克</td>
	</tr>
</table>

js以下： 

//遍歷dom結構--------------------------------------------------------------
	
		//針對重複有規律的dom，咱們能夠經過each來遍歷獲值；this關鍵字都指向一個不一樣的DOM元素（每次都是一個不一樣的匹配元素）。
		$(".row .col-md-3").each(function(){
			console.log($(this).text())
		})
		
		$("table td").each(function(){
			console.log("這個是表格輸出的信息："+$(this).text())
		})
		

		//獲取的值，放到什麼位置呢？2個選擇，數組或者是對象中。
		var arr_01 = [];
		$(".row .col-md-3").each(function(){
			arr_01.push($(this).text());
		})
		console.log(arr_01)

返回值以下圖：

三，$.each遍歷數據源實例：

• 數據源分數組或對象，
• 遍歷對象時，特別注意由於對象是：鍵/值 對構成；下面代碼中的的 i 實際上是對象的鍵，val是對象的值。

//遍歷數組--------------------------------------------------------------
		//遍歷一維數組
		var arr_02 =['big','chai','cool'];
		$.each(arr_02,function(i,val){ //注意2點，①遍歷數組比dom遍歷前面多了一個$符號和逗號；②2個參數，i是數組索引號；val是數組值
			console.log("索引號爲："+i+"；"+"值爲："+val);
		})
		
		//遍歷二維數組
		var arr_03=[['柴','玉龍'],['陳','大偉'],['王','小蛋']];
		$.each(arr_03,function(i,val){ 
			console.log("索引號爲："+i+"；"+"值爲："+val);
		})
		
		//如何取到姓?
		$.each(arr_03,function(i,val){ 
			console.log("索引號爲："+i+"；"+"姓爲："+val[0]);//val[0]取值爲值裏面的第1個值
		})
		
		
	
//遍歷對象--------------------------------------------------------------
		var obj ={
			name:"大柴叔",
			age:18,
			phone:"apple",
			city:"寧波"
		};
		
		$.each(obj,function(i,val){ 
			console.log("鍵："+i+"；"+"值："+val); //由於對象是：鍵/值 構成；這裏的i實際上是對象的鍵，val是對象的值。
		})

返回值以下圖：

 

四，原生JavaScript-forEach遍歷數組：

//forEach是javascript中遍歷數組的方法，以下
var arr=["我","是","你","叔"];
arr.forEach(function(val,index,arr){//val爲數組中當前的值，index爲當前值的下標，arr爲原數組
		
		//直接取參數便可帶出值
	    alert(val)   //返回值
	    alert(index) //返回下標  0 1 2 3
	    alert(arr)   //返回整個數組
	    
});

http://www.jb51.net/article/81955.htm