Web前端105天-day19-js第四天
目录
前言
js第四天学习开始
一、循环结构
- 循环是重复的执行相同或者相似的代码
- 循环的要素：
- 循环的条件：循环从哪开始 循环到哪结束
- 循环体：循环如何变化/循环执行的相同或相似的代码
1.1while循环
while(循环条件){ 循环体 }
break在循环体中，作用是强制结束循环
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>while循环</title> </head> <body> <script> /* // 使用循环打印1~10之间所有的整数 // 从哪开始1 到哪结束10 如何变化++ var i = 1 //变量从1开始 while(i<=10){ //循环的终止条件 console.log(i) //打印当前循环到的数字 i++ //循环变量自增 } */ /* //循环打印10到1 var i = 10 //循环变量i从10开始 while(i>=1){ //循环变量i到1结束 console.log(i) i-- //循环变量每循环一次值-1 } */ /* //练习：这是新哥跑的第n趟超市 n为1到10之间的所有整数 var i = 1 while(i<=10){ console.log('这是新哥跑的第'+i+'趟超市') i++ } */ /* //练习:打印30~20之间的所有整数 var i = 30 while(i>=20){ console.log(i) i-- } */ /* //练习：打印80 75 70 65 60 var i = 80 while(i>=60){ console.log(i) i -= 5 } */ //练习：打印出1~100之间所有的偶数 // var i = 2 // while(i<=100){ // console.log(i) // i += 2 // } //方案二： // var i = 1 // while(i<=100){ // if(i%2 === 0){//判断，一定是偶数才打印 // console.log(i) // } // i++ //循环变量自增 // } /* //练习：打印1~100之间所有整数的和 var i = 1 //声明变量，用于保存累加的总和， var sum = 0 while(i<=100){ //console.log('i:'+i) sum += i //sum = sum + i i++ //console.log('sum:'+sum) } console.log(sum) */ //打印：1~100以内所有偶数之和 var i = 1 var sum = 0 while(i<=100){ if(i%2 === 0){ sum += i } i++ } console.log(sum) </script> </body> </html>
通过循环体控制循环的结束
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>通过循环体控制循环的结束</title> </head> <body> <script> /* var i = 1 while(true){//死循环 console.log(i) if(i === 10){ break //强制结束当前循环 } i++ } */ //练习：当循环的判断条件为true时，计算出10~20之间所有整数的乘积 var i = 10 //循环的初始值 var s = 1 //用来保存乘积结果的变量，初始值应为1 while(true){ //console.log(i) s *= i //s = s*i 1*10*11*12...*20 if(i === 20){//当i为20时 break//强制停止循环 } i++ //循环变量的自增 } //循环结束后，打印最终的乘积结果 console.log(s)//6704425728000 </script> </body> </html>
1.2do-while循环
do{ 循环体 }while(循环条件)
- 第一次循环不判断，然后第二次循环才开始判断，符合条件执行第2次循环
- 不符合条件，循环只执行一次，直接结束
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>do-while循环</title> </head> <body> <script> /* //使用do-while循环打印1-10之间所有的整数 // var i = 1 //1~10 var i = 18 do{ console.log(i)//打印循环到的值 i++ //增量 }while(i<=10) */ /* //练习：打印30~20之间所有的整数 var i = 30//初始条件 do{//循环体 console.log(i)//打印循环到的每个值 i--//增量 }while(i>=20)//结束条件 */ /* //练习:打印50 55 60 65 70 var i = 50 //开始条件 do{//循环体 console.log(i)//打印循环到的每个值 i +=5 //增量 }while(i<=70) //结束条件 */ /* //练习:计算出1~100之间所有奇数的和 var i = 1 //循环变量的初始值 var sum = 0 //保存累加的和 do{//循环体 //判断是否为奇数 if(i%2 !== 0){ console.log(i) sum +=i //是奇数才累加到sum中 } i++ //自增 }while(i<=100)//结束条件 console.log(sum)//循环结束后，打印最终的总和 */ //注意:do-while循环，第一轮不会判断，直接执行循环体中的内容 //第二轮才开始判断，符合条件，继续执行，不符合条件，结束循环 /* //练习：统计出1~100之间有多少个能被3整除的数字 var i = 1//开始条件 var count = 0 //用于保存统计的个数 do{//循环体 if(i%3===0){//判断能否被3整除 //console.log(i)//打印可以被3整除的数字 //统计的总数量+1 count++ } i++//自增 }while(i<=100)//结束条件 //循环结束后，打印最终统计的数量 console.log(count)//33个 */ //练习:假设有一张纸，厚度为0.0001米，问折叠多少次能够达到珠峰的高度(8848米) //初始值：循环开始的值，也就是纸张的初始厚度 var i = 0.0001 var count = 0//用于保存统计的总次数 do{ //增量：折叠，厚度是原来的2倍 i *= 2 console.log(i) //每循环(折叠)一次，统计的总次数+1 count++ }while(i<8848)//循环条件：只要纸张没有达到8848就继续循环 //循环结束，打印最终折叠的次数 console.log(count)//27 </script> </body> </html>
1.3for循环
for(初始值 ; 循环条件 ; 增量){ 循环体 }
- demo
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>for循环</title> </head> <body> <script> //练习：打印1~10之间所有的整数 //开始条件(初始值) 结束条件(循环的判断条件) 增量(更改) for (var i = 1; i <= 10; i++) { //循环体 console.log(i) } //练习：打印50 45 40 35 30 for (var i = 50; i >= 30; i -= 5) { console.log(i) } //练习：计算出1~100之间所有能够被7整除的数字之和 //var sum = 0//定义sum变量用来保存累加的和 //注意：循环的开始条件也可以定义多个变量，用逗号隔开 for (var i = 1, sum = 0; i <= 100; i++) { //console.log('i:'+i) if (i % 7 === 0) { //判断能否被7整除 sum += i //能被7整除就累加到sum中 } } console.log(sum) //循环结束后打印累加的和 //练习：统计2000~2100之间有多少个闰年 for (var i = 2000, count = 0; i <= 2100; i++) { //console.log(i) //判断循环到的年份是否为闰年 if (i % 4 === 0 && i % 100 !== 0 || i % 400 === 0) { console.log(i + '年是闰年') count++ } } //循环结束后，打印统计的最终数量 console.log(count) //循环条件如果有多个的话，如果发生了冲突，要保持一致 //冲突时，要听循环条件后面的那个 i <= 15 for (var i = 1, j = 50; j >= 20, i <= 15; i++, j--) { console.log(i, j) } </script> </body> </html>
1.4break与continue
- 两者都可以用于循环体
- break用于直接结束循环
- continue用于跳过本轮循环中的剩余循环体，直接开启下一轮循环
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>跳过</title> </head> <body> <script> //练习：打印1~10之间所有的整数，不包含6 for (var i = 1; i <= 10; i++) { //当循环到数字6时 if(i === 6){ continue //跳过本轮循环中剩下的语句，直接开启下一轮循环 //break//直接结束循环 } console.log(i) } //练习：打印出1~100之间所有的整数，不包含能被3或者是能被4整除的数字 for(var i = 1; i<=100 ;i++){ //如果循环到的i能被3或4整除 if(i%3===0 || i%4===0){ continue//跳过后面的打印语句，循环下一个数字 } console.log(i) } </script> </body> </html>
1.5循环嵌套
- 在一个循环的循环体中出现了另外一个循环，叫做循环嵌套
- 外层循环控制的是轮数，内层循环控制的是这一轮执行的次数
- 外层循环控制的是图形的行数，内层循环控制的是这一行的个数
- 注意：内外侧使用的循环变量应不同
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>循环嵌套</title> </head> <body> <script> //使用for循环，每次打印一个*，打印***** for (var i = 1, str = ''; i <= 5; i++) { //console.log('*')//这个样的打印效果会换行 //每次循环给str后自动拼接一个* str += '*' //str = str+'*' } console.log(str) //练习：尝试打印如下形状： //***** //***** //***** for (var i = 1; i <= 3; i++) { //外层循环--控制图形的行数 // console.log('假装我是第' + i + '行') for (var j = 1, str = ''; j <= 5; j++) { //内层循环--控制每行的个数 //每次循环给str后自动拼接一个* str += '*' //str = str+'*' } console.log(str) } // for(var i= 1;i<=3;i++){ // console.log('这是第'+i+'轮') // for(var j = 1; j <=5;j++){ // console.log('这是第'+j+'次') // } // } //* //** //*** for (var i = 1; i <= 3; i++) { //外层循环控制行数-3行 //j(*的个数)的最大值要随着i(行数)的变化而变化 for (var j = 1,str='';j<=i;j++) {//内层循环控制每行的个数 str += '*' } console.log(str) } //1*1=1 //1*2=2 2*2=4 //1*3=3 2*3=6 3*3=9 //1*4=4 2*4=8 3*4=12 4*4=16 //1*5=5 2*5=10 3*5=15 4*5=20 5*5=25 //1*6=6 2*6=12 3*6=18 4*6=24 5*6=30 6*6=36 //1*7=7 2*7=14 3*7=21 4*7=28 5*7=35 6*7=42 7*7=49 //1*8=8 2*8=16 3*8=24 4*8=32 5*8=40 6*8=48 7*8=56 8*8=64 //1*9=9 2*9=18 3*9=27 4*9=36 5*9=45 6*9=54 7*9=63 8*9=72 9*9=81 for(var i = 1; i <= 9; i++){//外层循环控制行数-9行 for(var j = 1,str='';j <= i; j++){//内层循环控制列数，本行最大值是i // str += '*' //这一步是过渡步骤，要替换成算式 str += j + '*' +i + '=' + (j*i) +' ' //如果是第3行或者第4行，并且是第2列，多拼接一个空格 //逻辑或的优先级低，需要加小括号提升优先级 if((i===3 || i===4) && j===2){ str += ' '//注意这里是空格，不是空字符串 } } console.log(str)//内层循环结束，打印本轮拼接的算式内容 } </script> </body> </html>
二．函数
- Number()、parseInt()、parseFloat()…
- 函数：是一个功能体，需要我们提供若干数据，执行预设的逻辑后，给我们返回结果
- 函数分为系统函数和自定义函数
- 自定义函数：需要我们自行编辑要处理的逻辑封装成一个函数
2.1自定义函数
function(){ 函数体（每次调用函数时要执行的代码） }
- 函数必须要调用才可以执行
- 调用函数的格式 函数名称()
- 函数被调用几次，就会执行几次封装好的功能
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自定义函数练习function</title> </head> <body> <script> // console.log('快来买煎饼') // console.log('又香又脆的煎饼') // console.log('今天所有煎饼一律8折') //创建函数 //function 函数名称(){ 函数体 } function laba(){ console.log('快来买煎饼') console.log('又香又脆的煎饼') console.log('今天所有煎饼一律8折') } //函数的使用:调用 //注意：函数必须调用才可以执行！ laba() laba() //练习：创建函数getSum(),在函数体中封装计算1~100之间所有整数的和，并调用多次 //定义函数 function getSum(){ //函数体 for(var i = 1,sum=0;i<=100;i++){ sum += i } console.log(sum) } //调用函数 getSum() getSum() getSum() </script> </body> </html>
2.2带有参数的函数
function 函数名称(参数列表){ //形参，用于接收调用函数时传递的值 函数体 }
- 调用函数的格式：
函数名称(参数列表) //实参，调用函数时真正传递的值
- 实参的值会赋给形参
- 实参的数目需要与定义函数时的形参对应
- 如果调用函数时未给形参传值，则为undefined
- 调用函数时的实参个数与形参个数可以不匹配
- 一个函数定义时是否需要添加参数，取决于业务逻辑
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>带有参数的函数</title> </head> <body> <script> //定义函数计算两个数字相加的和 function add(i,j){//形参:函数中用于接收实参的变量 console.log(i,j) //计算两个数字相加的和 console.log(i+j) } //实参:我们调用函数时实际传的数据 add(3,5) //8=3+5 add(8) //NaN = 8+undefined add()//NaN = undefined+undefined add(1,2,3) //3=1+2 </script> </body> </html>
2.3函数的返回值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>函数的返回值</title> </head> <body> <script> //计算任意两个数字相加的和 function add(a,b){ //console.log(a+b) //返回函数的结果，在函数的外部调用函数就可以得到这个结果 //return '故宫印章' return a+b //return //undefiened //return后的内容不会执行 //console.log('函数结束了') } var n = add(1,2) console.log(n) //定义函数getMax,求任意两个数字的最大值，并返回结果 function getMax(a,b){ //方案1: // if(a>b){ // return a // }else{ // return b // } //方案2:三目运算符 return a>b?a:b } // var max = getMax(22,150) // console.log(max) console.log('最大值为:'+getMax(22,150)) //定义函数getMax2,求任意3个数字的最大值，并返回结果 function getMax2(a,b,c){ //方案1： if(a>b && a>c){ return a }else if(b>c){ return b }else{ return c } //方案2:使用三目实现 } console.log(getMax2(1,23,45)) </script> </body> </html>
2.4练习
- 创建函数getSum，计算出1~任意数字之间所有整数的和，调用多次
- 创建函数getCount，传递任意两个年份，统计出两者之间所有闰年的数量，调用多次
- 输入任意一个整数，查看是否为素数，如果是警示框弹出‘素数’，否则‘非素数’
素数(质数)：在1以上的整数中,只能被1和这个数本身整除的数
1 2 3 4 5 6 7 8 9
素数有：2 3 5 7 11 13 17 19 23 29 31...
答案
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>day19作业答案</title> </head> <body> <input type="text" placeholder="请输入一个整数" id="num"> <button id="btn">查看</button> <script> //1.给按钮绑定点击事件 btn.onclick = function() { //2.获取用户输入的值 var n = num.value //alert(n) //3.检测数字n是否为素数 //判断依据：循环2~n-1之间是否有能被n整除的数字 for (var i = 2, count = 0; i < n; i++) { if(n%i===0){ count++ //如果有一个数字能被n整除,就没有必要继续下去了 break } } if(count===0){ alert('素数') }else{ alert('不是素数') } } //练习：创建函数getSum，计算出1~任意数字之间所有整数的和，调用多次 function getSum(n) { //循环1~n之间所有的整数 for (var i = 1, sum = 0; i <= n; i++) { //累加循环到的每一个数 sum += i } console.log(sum) } getSum(100) getSum(10) getSum(500) //练习：创建函数getCount，传递任意两个年份 //统计出两者之间所有闰年的数量，调用多次 function getCount(n1, n2) { //循环n1与n2之间所有的数量 for (var i = n1, count = 0; i <= n2; i++) { //i代表所有年份，判断是否为闰年 if (i % 4 === 0 && i % 100 !== 0 || i % 400 === 0) { count++ //是闰年，统计的总数加1 } } //循环结束后，打印最终的数量 console.log(count) } // getCount(2100,2000) getCount(1949, 2022) </script> </body> </html>
总结
js第四天学习结束
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
