循环语句(循环for与while等)
1.1for循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>循环1-100</title> </head> <body> <h2>循环1-100</h2> <script> for (let index = 1; index <= 100; index++) { // const element = array[index]; document.write(index+"<br/>"); } </script> <h2>输出99-1的奇数</h2> <script> for (let m = 99; m >=1; m-=2) { document.write(m+"<br/>"); } </script> </body> </html>
1.2for循环嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>循环嵌套</title> </head> <body> <h2>循环嵌套</h2> <p>当循环与循环发生嵌套时遵循下列规则:</p> <p>1.外层为假时内层不执行</p> <p>2.先执行外层再执行内层,直至内层的条件为假时再返回外层去执行</p> <script> for (let i = 1; i <= 3; i++) { document.write(i + "<br/>") for (let j = 1; j <= 5; j++) { document.write(j + "<br/>") } } </script> </body> </html>
2.1while循环
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>while循环</title> </head> <body> <h2>while循环</h2> <p>while(条件){需要执行的代码;}</p> <script> var i = 1;//变量初始值 while (i <= 100) { document.write(i + "<br/>"); i++; } </script> </body> </html>
计算1-100之和
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>do-while循环</title> </head> <body> <h2>do-while语句</h2> <p>do{需要执行的代码;}while(条件)</p> <p>说明:这种语法的循环至少要被执行一次</p> <script>//1-100的和 //sun=0+1=1 //sum=0+1+2 var sum = 0;//和 var n = 1; while(n<=100){ sum+=n; n++; } document.write(sum+"<br>") </script> </body> </html>
for循环求9-1之和
var num = 0; for(var i = 10;i>1;i--){ // num+=i; num=num+i//0+10 //0+10+9 0+10+9+8 0+10+9+8+7 0+10+9+8+7+6 0+10+9+8+7+6+5 0+10+9+8+7+6+5+4 0+10+9+8+7+6+5+4+3 0+10+9+8+7+6+5+4+3+2 } console.log(num) //54
//输出个位数是3,十位数是3开头的,能被3整除的和
<script> //输出个位数是3,十位数是3开头的,能被3整除的和 var num1 = 0; var i = 100; while (i >=1) { i--; if ( i%10==3 || Math.floor(i/10)==3 || i%3 == 0) { num1 += i; document.write(i+' ') } } document.write(num1 + "<br>") </script>
for与while的区别
for:适合已知循环次数的循环体
while:适合未知循环的循环体
2.2 do-while语句(不大建议用,即使条件不成立,它也要被执行一次)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>do-while循环</title> </head> <body> <h2>do-while语句</h2> <p>do{需要执行的代码;}while(条件)</p> <p>说明:这种语法的循环至少要被执行一次</p> <script> //输出1-10的偶数 var i = 1; do { if (i % 2 == 0) { document.write(i + "<br/>"); } i++; } while (i <= 10); </script> </body> </html>
多举例子:
0到100之和多种写法:
正常:
<script type="text/javascript"> var sum = 0; for (var i = 0; i <= 100; i++) { sum+=i } console.log(sum) //5050 </script>
简写:
<script type="text/javascript"> for (var sum=i = 0;i <= 100; sum+=i,i++) { } console.log(sum) //5050 </script>
es6循环
let arrData = res.data; // 清空ul里的所有标签 gongsiqmResultList.html(""); html = "" arrData.forEach((item,index,arr)=>{ html += `<li><a href="javascript:;" data-item="${item}">${item}</a></li>` }); //ul gongsiqmResultList.append(html); if (arrData.length < 48) { page = 1 }
let arr = res.data; // 清空ul里的所有标签 dzqmNameList.html(""); arr.forEach(item => { html += `<li><a href="javascript:;"><span class="J_name">${item.xm}</span>${item.fs}分</a></li>` }); dzqmNameList.append(html); if(arr.length<36){ pageNum = 1 dzqmNameMore.text("没有更多了") }