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. Spring源码情操陶冶-ContextLoaderListener

    前言:通过实例结合源码的方式解读,其中涉及到的文件来自于博主的Github毕设项目wxServer Note: Springboot应用不在本文章讨论范围 web.xml中启用Spring 在一般的w ...

  2. margin属性的正负值确定

    margin属性用来使用设置外边距,大多数情况使用正值,但是一些稍复杂的定位就会使用到负值,所以对margin属性的正负值理解是有必要的,本文同时解释了margin-right和margin-bott ...

  3. docker的简单应用(总结笔记)

    sudo docker pull ubuntu /*下载Ubuntu最新镜像*/sudo docker pull ubuntu:14.04 /*下载Ubuntu14.04版镜像*/sudo docke ...

  4. Android学习笔记-EditText(输入框)(二)

    6.控制EditText四周的间隔距离与内部文字与边框间的距离 我们使用margin相关属性增加组件相对其他控件的距离,比如android:marginTop = "5dp" 使用 ...

  5. 【原创】07. ajax请求,解决sendRedirect 无效

    介绍: 后台基于旧代码用的Filter验证,若 Session过期,则跳转登陆页面 前台框架:EasyUI 问题: 最初后台验证不通过: 1 httpServletResponse.sendRedir ...

  6. Dubbo实战快速入门 (转)

    Dubbo是什么? Dubbo[]是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,以及SOA服务治理方案. 其核心部分包含: 远程通讯: 提供对多种基于长连接的NIO框架抽象封 ...

  7. C语言初探

    1.C语言在屏幕上显示内容 我们有两种方式从计算机获得信息:一是看屏幕上的文字.图片.视频等,二是听从喇叭发出来的声音.   让喇叭发出声音目前还比较麻烦,我们先来看看如何在屏幕上显示一些文字吧.例如 ...

  8. C#设计模式(2)-简单工厂模式

    引言 上一遍中介绍了设计模式中的单例模式-C#设计模式(1)-单例模式,本篇将介绍简单工厂模式,也是比较容易理解的一种模式: 简单工厂模式简介 什么是简单工厂模式? 定义一个工厂类,它可以根据参数的不 ...

  9. 媒体查询Media Queries详解

    @media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和 媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...

  10. .NET Core资源汇总

    前言 首先庆祝.NET Core 2.0今天发布. 最近一两年.NET的关注度直线下降, 大部分开发人员转去了其他平台, 国内的机会也越来越少了. 行情虽然如此, 仍在坚守.NET平台的开发人员还是要 ...