前端遍歷函數
forEach()
1、forEach() 是JS遍歷數組的方法
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<h1>小白學習</h1>
<script>
var arr=[2,5,15,9,6,0,1,3];
arr.forEach(function(val,index,arr){
// var 數組中當前的值
// index 當前的值得下標
// arr 原數組
arr[index] = val+10;
})
console.log(arr);
//--------------------------------------------------
arr.forEach(function(val,index){
console.log(val);
});
</script>
</body>
</html>
2、forEach() 方法還可用於調用數組的每個元素，依次傳遞給回調函數 [ 例子中的 myfunction(） ]。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<h1>小白學習</h1>
<button onclick="number.forEach(myfunction)">結賬</button>
<p>總消費：<span id="total"></span> 元</p>
<script>
var sum=0;
var number=[2,5,15,9,6,1,3];
function myfunction(item){
sum = sum + item;
total.innerHTML = sum;
}
</script>
</body>
</html>
需要注意的是，如果是空數組，那麼就不會去執行回調函數
$().each()
1、$().each：一般在dom（文檔對象模型）處理上面用的較多。
例如：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白網頁</title>
</head>
<body>
<h1>小白學習</h1>
<input type="checkbox" name="subject" value="語文"/>語文
<input type="checkbox" name="subject" value="數學" checked="checked"/>數學
<input type="checkbox" name="subject" value="英語"/>英語<br>
<script>
$(function(){
$("input[name='subject']").each(function(index,val){
console.log(index+"---"+val.type+"---"+val.name+"---"+val.value);
});
});
</script>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白網頁</title>
</head>
<body>
<h1>小白學習</h1>
<input type="hidden" name="name" value="小白1"/>
<input type="hidden" name="name" value="小白2"/>
<input type="hidden" name="name" value="小白3"/>
<script>
$(function(){
$("input:hidden").each(function(index,val){
console.log(index+"---"+val.type+"---"+val.name+"---"+val.value);
});
});
</script>
</body>
</html>
$.each()
$.each() 可遍歷數組，也可用來處理json對象。
1、遍歷一維數組
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白網頁</title>
</head>
<body>
<h1>小白學習</h1>
<script>
$(function(){
var arr = ['可愛','粉可愛','炒雞可愛'];
$.each(arr,function(index,value){
console.log(index+"---"+value);
});
});
</script>
</body>
</html>
2、遍歷二維數組
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白網頁</title>
</head>
<body>
<h1>小白學習</h1>
<script>
$(function(){
var arrayTest = [[1,2,3],[4,5,6],[7,8,9]];
$.each(arrayTest,function(index,item){ //n代表當前循環的次數,item爲當前循環的對象
console.log(item[index]);//1;5;9
console.log(arrayTest[index]);//1,2,3 / 4,5,6 / 7,8,9
console.log(item);//1,2,3 / 4,5,6 / 7,8,9
$.each(item,function(){ //將第一次循環的對象再次循環,就實現了二維數據的遍歷,如果有2以上的數組,則同理循環多次
console.log(this);//1;2;3; 4;5;6; 7;8;9 this代表當前元素
});
});
});
</script>
</body>
</html>
3、處理json對象
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白網頁</title>
</head>
<body>
<h1>小白學習</h1>
<script>
$(function(){
var json = { name:'小白', sex:'男', age:'18' };
$.each(json,function(key,value){ //n代表當前循環的次數,item爲當前循環的對象
console.log(key+'-----'+value);
});
});
</script>
</body>
</html>
4、處理二維數組中的 json對象
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="jquery-3.4.1.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>小白網頁</title>
</head>
<body>
<h1>小白學習</h1>
<script>
$(function(){
var arr = [{ name:'小白', age:'16' },{ name:'小黑', age:'17' },{ name:'小蘭', age:'18' }];
$.each(arr,function(index,json){
console.log(json.name);
console.log(json["name"]);
$.each(json,function(key,value){ //n代表當前循環的次數,item爲當前循環的對象
console.log(key+'-----'+value);
});
});
});
</script>
</body>
</html>
5、處理 dom元素
這個跟 $().each() 是差不多的，就不演示了。
總結
這幾個看起來好像區別不大，但是用法有不同之處，應用場景也有區別，所以還是要多去實踐才能積累經驗，更好的運用。