前端遍歷
我的博客都是關于我的學習程序，這篇博客是我的前端遍歷的代碼，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>遍歷</title>
</head>
<body>
<!-- switch -->
<button onclick="switchFun()">switch</button>
<p id="demo1"></p>
<!-- for -->
<button onclick="forFun()">for</button>
<p id="demo2"></p>
<!-- for ... in -->
<button onclick="forInFun()">for ... in</button>
<p id="demo3"></p>
<!-- while -->
<button onclick="whileFun()">while</button>
<p id="demo4"></p>
<!-- forEach -->
<button onclick="forEachFun()">forEach</button>
<p id="demo5"></p>
<!-- map -->
<button onclick="mapFun()">map</button>
<p id="demo6"></p>
<!-- $.each -->
<button onclick="jQeach()">jQ-each</button>
<p id="demo7"></p>
</body>
<script>
// switch
function switchFun() {
let d = new Date().getDay();
switch (d) {
case 0:
x = "今天是星期日";
break;
case 1:
x = "今天是星期一";
break;
case 2:
x = "今天是星期二";
break;
case 3:
x = "今天是星期三";
break;
case 4:
x = "今天是星期四";
break;
case 5:
x = "今天是星期五";
break;
case 6:
x = "今天是星期六";
break;
default:
x = "日期錯亂！";
}
let demo1 = document.getElementById('demo1');
demo1.innerHTML = x;
}
// for
function forFun() {
cars = ['1', 2, '3', 4];
let forSum = '';
for (let i = 0; i < cars.length; i++) {
forSum += cars[i];
}
document.getElementById('demo2').innerHTML = forSum;
}
// for ... in
function forInFun() {
let x;
let txt = '';
let person = {
fname: 'bill',
lname: 'gates',
age: 56
}
for (x in person) {
txt += person[x];
}
document.getElementById('demo3').innerHTML = txt;
}
// while
function whileFun() {
let a = [0, 1, 2, 3, 4];
let sum = 0;
let i = 0;
while (i < 5) {
sum += a[i];
i++;
}
document.getElementById('demo4').innerHTML = sum;
}
// forEach: IE8以上支持,只能遍歷陣列，不能遍歷偽陣列
function forEachFun() {
let a = ['張三', '李四', '王二', '麻子'];
let sum = '';
a.forEach(function (value, index, arr) {
sum += value + "," + index + "," + arr + "<br/>";
})
document.getElementById('demo5').innerHTML = sum;
}
// map
function mapFun(){
let arr = [1,3,5,7,9,11];
let result = arr.map(function(value,index){
return value*2;
})
document.getElementById('demo6').innerHTML = result;
console.log(result); //result變成了陣列
}
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// $.each 可以遍歷偽陣列
function jQeach() {
let sum = '';
let arr = [1, 2, 3, 4, 5, 6];
let obj = {
a: 1,
b: 2,
c: 3
};
$.each(arr, function (index, value) {
sum += index + " " + value + "<br/>";
});
$.each(obj, function (index, value) {
sum += index + " " + value + "<br/>";
});
document.getElementById('demo7').innerHTML = sum;
}
</script>
</html>
運行結果：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/279818.html
標籤：其他