三个js循环的关键字示例(for与while)


Posted in Javascript onFebruary 16, 2016

循环的三种写法:

<!doctype html>
<title>js循环 by 三水点靠木</title>
<meta charset="utf-8"/>
<meta name="keywords" content="js循环 by 三水点靠木" />
<meta name="description" content="js循环 by 三水点靠木" />
</head>
<body>
//while循环
 <script type="text/javascript">
i = 1;
while (i <= 6)
{
document.write("<h" + i+">三水点靠木,这是标题"+i);
document.write("</h"+i+">");
i++;
}
</script>
//do_whilel循环
<script type="text/javascript">
i = 1;
do
{
document.write("<h" + i+">3water.com ,这是标题"+i);
document.write("</h"+i+">");
i++;
}
while(i<=6);
</script>
//for循环 
 <script type="text/javascript">
for(i=1;i<=6;i++)
{
 document.write("<h"+i+">三水点靠木,这是标题"+i);
 document.write("</h"+i+">");
}
</script>
</body>
</html>

不同类型的循环

JavaScript 支持不同类型的循环:
•for - 循环代码块一定的次数
•for/in - 循环遍历对象的属性
•while - 当指定的条件为 true 时循环指定的代码块
•do/while - 同样当指定的条件为 true 时循环指定的代码块

For 循环

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法:

for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块
  }

语句 1 在循环(代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行

实例

for (var i=0; i<5; i++)

  {

  x=x + "The number is " + i + "<br>";

  }

亲自试一试
 
从上面的例子中,您可以看到:

Statement 1 在循环开始之前设置变量 (var i=0)。
Statement 2 定义循环运行的条件(i 必须小于 5)。
Statement 3 在每次代码块已被执行后增加一个值 (i++)。

语句 1

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。

语句 1 是可选的,也就是说不使用语句 1 也可以。

您可以在语句 1 中初始化任意(或者多个)值:

实例:

for (var i=0,len=cars.length; i<len; i++)

{

document.write(cars[i] + "<br>");

}

同时您还可以省略语句 1(比如在循环开始前已经设置了值时):

实例:

var i=2,len=cars.length;

for (; i<len; i++)

{

document.write(cars[i] + "<br>");

}

语句 2

通常语句 2 用于评估初始变量的条件。

语句 2 同样是可选的。
如果语句 2 返回 true,则循环再次开始,如果返回 false,则循环将结束。
提示:如果您省略了语句 2,那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。请在本教程稍后的章节阅读有关 break 的内容。

语句 3

通常语句 3 会增加初始变量的值。

语句 3 也是可选的。
语句 3 有多种用法。增量可以是负数 (i--),或者更大 (i=i+15)。
语句 3 也可以省略(比如当循环内部有相应的代码时):

实例:

var i=0,len=cars.length;

for (; i<len; )

{

document.write(cars[i] + "<br>");

i++;

}

For/In 循环

JavaScript for/in 语句循环遍历对象的属性:

实例

var person={fname:"John",lname:"Doe",age:25};

for (x in person)

  {

  txt=txt + person[x];

  }

您将在有关 JavaScript 对象的章节学到更多有关 for / in 循环的知识。

具体可以参考这篇文章:https://3water.com/w3school/js/js_loop_for.htm

Javascript 相关文章推荐
用js实现的页面关键字密度查询代码
Dec 27 Javascript
javascript 读取图片文件的大小
Jun 25 Javascript
jQuery版Tab标签切换
Mar 16 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
node中koa中间件机制详解
Aug 22 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 Javascript
关于vue中如何监听数组变化
Apr 28 Vue.js
解析Node.js异常处理中domain模块的使用方法
Feb 16 #Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 #Javascript
深入浅析AngularJS和DataModel
Feb 16 #Javascript
Javascript中的Prototype到底是什么
Feb 16 #Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 #Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 #Javascript
让图片跳跃起来  javascript图片轮播特效
Feb 16 #Javascript
You might like
greybox——不开新窗口看新的网页
2007/02/20 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
jQuery 取值、赋值的基本方法整理
2014/03/31 Javascript
js闭包的用途详解
2014/11/09 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
Angular实现form自动布局
2016/01/28 Javascript
js面向对象的写法
2016/02/19 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
判断js的Array和Object的实现方法
2016/08/29 Javascript
Javascript中函数名.length属性用法分析(对比arguments.length)
2016/09/16 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
微信小程序实现展示评分结果功能
2019/02/15 Javascript
vue生命周期的探索
2019/04/03 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
详解vue路由
2020/08/05 Javascript
Python random模块常用方法
2014/11/03 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
解决csv.writer写入文件有多余的空行问题
2018/07/06 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
浅析Windows 嵌入python解释器的过程
2019/07/26 Python
Python 线程池用法简单示例
2019/10/02 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
Android面试宝典
2013/08/06 面试题
优秀实习生感言
2014/03/01 职场文书
团日活动总结范文
2014/04/25 职场文书
假释思想汇报范文
2014/10/11 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
致接力运动员加油稿
2015/07/21 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
mysql 8.0.24版本安装配置方法图文教程
2021/05/12 MySQL
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
处理canvas绘制图片模糊问题
2022/05/11 Javascript