js數組的4種遍歷方式
阿新 • • 發佈：2018-03-27
參數 形參 javascrip HA each log i++ 定義 har
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>數組的遍歷方式</title> 6 <script type="text/javascript"> 7 var arr = [11, 22, 33, 55]; 8 //普通的循環遍歷方式 9 function first() { 10 11 for(var i = 0; i < arr.length; i++) { 12 console.log("第一種遍歷方式\t" + arr[i]); 13 } 14 console.log("111111111111111111111111111111"); 15 16 17 } 18 //2、for ..in 遍歷方式 19 function second() { 20 // for in 遍歷需要兩個形參 ，index表示數組的下標(可以自定義)，arr表示要遍歷的數組21 for (var index in arr) { 22 console.log("第二種遍歷方式\t" + arr[index]); 23 24 } 25 console.log("222222222222222222222222222222"); 26 } 27 28 //3，很雞肋的遍歷方式 29 function third() { 30 //第一個參數為數組的元素，第二個元素為數組的下標 31 arr.forEach(function(ele, index) { 32 console.log("第三種遍歷方式\t" + arr[index] + "-----" + ele); 33 }); 34 console.log("333333333333333333333333333333"); 35 36 } 37 //4,for-of遍歷方式 38 function forth() { 39 //第一個變量ele代表數組的元素（可以自定義） arr為數組（數據源） 40 for (var ele of arr) { 41 console.log("第四種遍歷方式\t" + ele); 42 } 43 console.log("444444444444444444444444444444"); 44 } 45 </script> 46 </head> 47 <body> 48 <input type="button" value="第一種遍歷方式" name="aa" onclick="first();"/><br/> 49 <input type="button" value="第二種遍歷方式" name="aa" onclick="second();"/><br/> 50 <input type="button" value="第三種遍歷方式" name="aa" onclick="third();"/><br/> 51 <input type="button" value="第四種遍歷方式" name="aa" onclick="forth();"/><br/> 52 </body> 53 </html>
js數組的4種遍歷方式