我的博客都是关于我的学习过程。这篇博客是我的前端遍历的代码。
<!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>
运行结果：
ajax回调打开新窗体防止浏览器拦截，就这么做！ 问题剖析： function click_fun(...
原因： 浏览器安全上做了限制，禁止ajax跨域获得数据。 解决方法： 通过jquery提...
Windows10带来了很多大刀阔斧的变革，但这些改动，却不一定都那么顺利发展下去。...
说到正则表达式,网上有很多的通用的表达式,可是事实上说来,一般人的都 不愿意去...
前言 .net core来势已不可阻挡。既然挡不了，那我们就顺应它。了解它并学习它。...
一、Base64编码原理 步骤1：将所有字符转化为ASCII码； 步骤2：将ASCII码转化为8...
微信小程序虽然有三种自带的弹窗，但是毕竟功能有限，有时候难以满足我们的需求...
前言 AJAX，Asynchronous JavaScript and XML (异步的JavaScript和XML)，一种创...
你是否为自己设计的数据库感到满足了呢？你确信就不要对其再处理？比如新建立数...
PHP是一种创建动态交互性站点的服务器端脚本语言，优势：PHP脚本语言应用广泛，...
