三个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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(7)
Dec 23 Javascript
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
Mar 28 Javascript
用javascript作一个通用向导说明
Aug 30 Javascript
Javascript学习笔记 delete运算符
Sep 13 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
不得不分享的JavaScript常用方法函数集(上)
Dec 23 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
Javascript 链式作用域详细介绍
Feb 23 Javascript
AngularJS实现的base64编码与解码功能示例
May 17 Javascript
ng-events类似ionic中Events的angular全局事件
Sep 05 Javascript
解析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
如何在PHP中使用Oracle数据库(2)
2006/10/09 PHP
php 取得瑞年与平年的天数的代码
2009/08/10 PHP
php 字符串替换的方法
2012/01/10 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
Javascript监视变量变化的方法
2015/06/09 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
详细介绍RxJS在Angular中的应用
2017/09/23 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
Vue响应式原理Observer、Dep、Watcher理解
2019/06/06 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
2019/08/27 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
Python中用Ctrl+C终止多线程程序的问题解决
2013/03/30 Python
Python面向对象编程中的类和对象学习教程
2015/03/30 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python中@property和property函数常见使用方法示例
2019/10/21 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
Python 将json序列化后的字符串转换成字典(推荐)
2020/01/06 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
python suds访问webservice服务实现
2020/06/26 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
蔻驰法国官网:COACH法国
2018/11/14 全球购物
大学生实习证明范本
2014/01/15 职场文书
工商管理本科生求职信
2014/07/13 职场文书
环保建议书作文400字
2015/09/14 职场文书
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
Python OpenGL基本配置方式
2022/05/20 Python