JS中的循环语句是JS基础的最最重要的部分,没有之一,后面所学的其他的一些重要的知识也是需要在此的基础啥古玩城更高级的设置,先来简单的说一下循环的一些知识点。

一、循环结构的执行步骤

  1、声明循环变量;

  2、判断循环条件;

  3、执行循环体操作;

  4、更新循环变量;

然后,循环执行2-4,直到条件不成立时,跳出循环。

while循环()中的表达式,运算结果可以是各种类型。但是最终都会转为真假,转换规则同if结构。

while循环特点:先判断,再执行;

do-while循环特点:先执行,再判断;即使初始条件不成立,do-while循环也至少执行一次。

二、for循环

1、for循环有三个表达式:

①声明循环变量  ②判断循环条件  ③更新循环变量

三个表达式之间,用;分隔

for循环三个表达式都可以省略,但是两个;缺一不可

2、for循环的执行特点:先判断,再执行;与while相同

3、for循环三个表达式都可以由多部分组成,第二部分多个判断条件用&&  ||链接,第一三部分用逗号分隔;

循环控制语句

① break:跳出本层循环,继续执行循环后面的语句。

如果循环有多层嵌套,则break只能跳出一层。

② continue:跳过本次循环剩余的代码,继续执行下一次代码。

  a、对于for循环,continue之后执行的语句,是循环变量更新语句i++;

  b、对于while、do-while循环,continue之后执行的语句,是循环条件判断;

  因此,使用这两个循环时,必须将continue放到i++之后使用。否则continue将跳过i++,导致死循环。

三、if-else结构

1、结构写法:

if(判断条件){

条件为true时,执行if的{}

}else{

条件为false时,执行ease的{}

}

2、注意事项:

①else{}语句块可以根据情况省略;

②if和else后面的{}可以省略,但是省略{}后,if和else后面只能跟一条语句;(所以,不建议省略);

3、【重点】if的{}中的判断条件支持的情况:

①Boolean:true为真,false为假;

②String:空字符串为假,所有非空字符串为真;

③Number:0为假,一切非零数字为真;

④undefined  null  NAN:全为假;

⑤Object:全为真;

四、多重if、阶梯if结构

1、结构写法:

if(条件一){

条件一成立,执行的操作

}else if(条件二){

条件一不成立&&条件二成立,执行的操作

}else if{

上述所有的条件都不成立,执行的操作

}

2、多重if结构中,各个判断条件是互斥的,执行选择其中一条路执行。遇到正确选项并执行完以后,直接跳出结构,不再判断后续分支。

五、嵌套if结构

1、结构写法:

if(条件一){

条件一成立

if(条件二){

条件一成立 && 条件二成立

}else{

条件一成立 && 条件二不成立

}

}else{

条件一不成立

}

2、在嵌套if结构中,如果省略{},则else结构永远属于离他最近的一个if结构;

3、嵌套结构可以多层嵌套,但是一般不推荐超过3层。

能用多层if结构的一般不推荐使用嵌套if。

六、switch-case

1、结构写法

2、注意事项:

①switch结构()中的表达式,可以使用各种js支持的数据类型;

②switch机构在进行判断的时候,使用的===判断;

③case后面的表达式可以是各种数据类型,但是值要求各不相同,否则也只会执行第一个case;

④break作用:执行完case代码后,跳出当前switch结构;

缺少break后果:从第一个正确的case项开始,执行后面的所有case和default;原因:⑤↓

⑤switch结构在进行判断的时候,只会判断一次正确答案。当遇到正确的case之后,将不会再判断后续的项目。

⑥switch结构的执行效率要比多重if快。在多路分支结构中,推荐优先使用switch。

      [循环嵌套的规律]:外层循环控制行数,内层循环控制每行中的个数

七、图形题做题思路

1、确定一共有几行。行数即为外层循环的次数

2、确定每行中有几种元素组成,有几种元素,即表示有几个内层循环

3、确定每种元素的个数,这个个数即为每个内层循环的次数

  tips:如果每种元素个数不固定则,找出每种元素个数,与行号关系。这个关系表达式,即为内层循环的最大值

八、循环语句用的一些例子

1、猜数字的小游戏

<script type="text/javascript">
var ans=5;
do{
var num=prompt("请输入你的猜测");
if(num>ans){
alert("您输入的数字偏大");
}else if(num<ans){
alert("您输入的数字偏小");
}else{
alert("猜对了!");
} }while(num!=ans); </script>

    这仅仅是用JS做出来的,虽然看起来比较简陋,但是该有的功能都用循环语句实现了

  2、倒序输出

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var num=parseInt(prompt("請輸入一個整數"))
while(num>0){
var a=num%10;
document.write(a);
num=parseInt(num/10);
}
</script>
</head>
<body>
</body>
</html>

    我们在一些网页见到的,把一些数字整个颠倒

  3、求和

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var sum=0,count=0;
for(var i=1;i<=10;i++){
var num=parseInt(prompt("請輸入一個數字"));
if(num==999) break;
if(num>0){
count++;
sum+=num;
}
}
document.write("您輸入了"+count+"個正數,"+"和為:"+sum);
</script>
</head>
<body>
</body>
</html>

    这个功能就是只要输入进去的数小于999就会让你一直输,直到你输入的数大于999才会停止循环,并且把你大于999之前输入的次数打印出来,并且把那些求和。

  4、求位数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var num=parseInt(prompt("请输入一个整数"));
var w=0;
do{
num=parseInt(num/10);
w++;
}while(num>0);
document.write("该整数是"+w+"位数"); </script>
</head>
<body>
</body>
</html>

     求出一个数是几位数,可以更加方便我们的计算

  5、输入年月日,求该天是今年的第几天

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// ① 拿到年月日
var year = parseInt(prompt("请输入 年份:"));
var mon = parseInt(prompt("请输入 月份:"));
var day = parseInt(prompt("请输入 日期:"));
// ② 根据月份求出当前月,之前的所有月份的天数和;
var days = 0;
for(var i=1; i<mon; i++){
if(i==1||i==3||i==5||i==7||i==8||i==10||i==12){
days += 31;
}else if(i==4||i==6||i==9||i==11){
days += 30;
}else { // 2月份多少天,需要判断是否是闰年
if(year%4==0&&year%100!=0 || year%400==0){
days += 29;
}else{
days += 28;
}
}
}
days += day; // 将当前月份的天数,加上
document.write("这是今年的第"+days+"天");
</script>
</head>
<body>
</body>
</html>

    感觉这个还是挺实用,但是好像一般并不需要计算是改年的第几天。还有用switch-case来做的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// ① 拿到年月日
var year = parseInt(prompt("请输入 年份:"));
var mon = parseInt(prompt("请输入 月份:"));
var day = parseInt(prompt("请输入 日期:"));
var days = 0;
// ② 根据月份求出当前月,之前的所有月份的天数和;
switch (mon-1){
case 11:
days += 30;
case 10:
days += 31;
case 9:
days += 30;
case 8:
days += 31;
case 7:
days += 31;
case 6:
days += 30;
case 5:
days += 31;
case 4:
days += 30;
case 3:
days += 31;
case 2:
if(year%4==0&&year%100!=0 || year%400==0)
days += 29;
else
days += 28;
case 1:
days += 31;
case 0:
days += 0;
}
days += day; // 将当前月份的天数,加上
document.write("这是今年的第"+days+"天");
</script>
</head>
<body>
</body>
</html>

  6、求水仙花数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a,b,c;
for(var i=100;i<1000;i++){
a=i%10;
b=parseInt(i/10)%10;
c=parseInt(i/100);
if(a*a*a+b*b*b+c*c*c===i){
document.write(i+" ");
}
}
</script>
</head>
<body>
</body>
</html>

    在学C语言的时候就接触到的水仙花数,现在可以直接用JS代码来直接求出

  7、斐波那契数列

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a=1,b=1,c;
document.write("1 1 ")
for(var i=3;i<=18;i++){
c=a+b;
document.write(c+" ");
if(i%5==0) document.write("<br />")
a=b;
b=c;
}
</script>
</head>
<body>
</body>
</html>

    斐波那契数列(Fibonacci sequence),又称黄金分割数列、因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一个数列:1、1、2、3、5、8、13、21、34、……在数学上,斐波纳契数列以如下被以递归的方法定义:F(0)=0,F(1)=1, F(n)=F(n-1)+F(n-2)(n>=2,n∈N*)

九、关于循环语句的一些感想

  51的循环语句学的并不是很好,可以说是看见循环语句就有些头疼,但是51还是选择把他整理出来了。本来就不好,怎么就可以这样放下呢,如果紧急这样就放弃了,那51还学这些干嘛,还有更难得困难在后面,51得好好加油才行。

简说JS中的循环部分的更多相关文章

  1. 由项目浅谈JS中MVVM模式

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.    背景 最近项目原因使用了durandal.js和knock ...

  2. js架构设计模式——由项目浅谈JS中MVVM模式

    1.    背景 最近项目原因使用了durandal.js和knockout.js,颇有受益.决定写一个比较浅显的总结. 之前一直在用SpringMVC框架写后台,前台是用JSP+JS+标签库,算是很 ...

  3. 互联网我来了 -- 2. js中&quot;异步/堵塞&quot;等概念的简析

    一.什么是"异步非堵塞式"? 这个名字听起来非常恶心难懂,但假设以 买内裤 这件事情来比喻运行程序的话就非常easy理解"异步非堵塞式"的涵义了. 比如你是一个 ...

  4. 别再为了this发愁了------JS中的this机制

    别再为了this发愁了------JS中的this机制 题记:JavaScript中有很多令人困惑的地方,或者叫做机制.但是,就是这些东西让JavaScript显得那么美好而与众不同.比方说函数也是对 ...

  5. 关于JS中的JSON

    早期,一般是使用XML作为互联网上传输结构化数据的,但由于它解析麻烦,字符冗长,因此被轻量级的JSON所逐渐替代.JSON是JavaScript的一个严格子集,利用了JavaScript中一些模式来表 ...

  6. JS中的this用法详解

    随着对js的深入学习和使用,你会发现它里面包含了很多令人困惑的机制,比如对象.闭包.原型链继承等等,而这其中肯定包含令你现在或者曾经费解的this,如果你不把心一横,花点时间还真不明白这个this的用 ...

  7. 第一次写博客,关于前端开发deMVC在js中的应用

    对前端MVC MVC分别是model.view.controller的缩写,模型.视图.控制器.这些更加偏向于后台,在以前MVC是只属于后台的.当然随着技术的进步,前端的大牛们将后台的一些东西应用于前 ...

  8. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  9. JS中$含义和用法

    原博客:https://www.cnblogs.com/jokerjason/p/7404649.html$在JS中本身只是一个符号而异,在JS里什么也不是.但在JS应用库JQUERY的作者将之做为一 ...

随机推荐

  1. Selenium对浏览器支持的版本

    最新的selenium与几种常用浏览器的版本兼容情况: selenium 3.4.0 : Mozilla GeckoDriver 0.18  --  Firefox 53 - 56 Google Ch ...

  2. Hibernate学习之一对多关联

    注意事项: 1.单向一对多  只需在“一”放进行配置2.双向一对多  需要在关联双方都加以配置,而且需要在一的一方设置inverse=true 首先是实体类: TAddress.java(多的一方) ...

  3. Go语言学习笔记(五)文件操作

    加 Golang学习 QQ群共同学习进步成家立业工作 ^-^ 群号:96933959 文件读取 os.File 封装了文件相关操作 type File File代表一个打开的文件对象. func Cr ...

  4. JPush 使用教程

    JPush 使用教程 自己使用的一些经验,为了方便直接从这里复制过去就行. 就当做个笔记,防止长时间忘记之后,还需要去官网看文档. 主要思路: sdk文件 + 三方依赖系统库 + 头文件 + 添加代理 ...

  5. 【MYSQL】主从库查看及搭建

    show slave status 查看从库信息  http://blog.csdn.net/lxpbs8851/article/details/7898716 搭建主从库   http://www. ...

  6. Ubuntu中使用iptables

    (一) 设置开机启动iptables # sysv-rc-conf --level 2345 iptables on (二) iptables的基本命令 1. 列出当前iptables的策略和规则 # ...

  7. 关于在HTML中使用的script标签

    本文是<JavaScript高级程序设计>(第三版)中的第二章的个人学习的总结. 在HTML中使用JavaScript <script>标签 在HTML5中script主要有以 ...

  8. EntityFramework Core查询问题集锦(一)

    前言 和大家脱离了一段时间,有时候总想着时间挤挤总是会有的,但是并非人愿,后面会借助周末的时间来打理博客,如有问题可以在周末私信我或者加我QQ皆可,欢迎和大家一起探讨,本节我们来讨论EF Core中的 ...

  9. 【前端,干货】react and redux教程学习实践(二)。

    前言 这篇博文接 [前端]react and redux教程学习实践,浅显易懂的实践学习方法. ,上一篇简略的做了一个redux的初级demo,今天深入的学习了一些新的.有用的,可以在生产项目中使用的 ...

  10. IPython+:一个交互式计算和开发环境

    一. IPython基础 代码自动补全:Tab键 可补全内容包括:变量名.函数名.成员变量函数.目录文件 内省(Itrospection) 在变量名之前或之后加上问号(?),这样可以显示这个对象的相关 ...