三个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中Math对象使用说明
Jan 16 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
JS替换字符串中空格方法
Apr 17 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
Vue路由钩子之afterEach beforeEach的区别详解
Jul 15 Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
使用Vue实现一个树组件的示例
Nov 06 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根据日期判断星座的函数分享
2014/02/13 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
PHP版QQ互联OAuth示例代码分享
2015/07/05 PHP
Yii2创建多界面主题(Theme)的方法
2016/10/08 PHP
thinkPHP5.0框架环境变量配置方法
2017/03/17 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
基于mootools插件实现遮罩层新手引导
2012/05/24 Javascript
jquery命令汇总,方便使用jquery的朋友
2012/06/26 Javascript
jquery 插件学习(一)
2012/08/06 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
完美实现仿QQ空间评论回复特效
2015/05/06 Javascript
jquery学习笔记之无new构建详解
2017/12/07 jQuery
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
详解python基础之while循环及if判断
2017/08/24 Python
python利用正则表达式搜索单词示例代码
2017/09/24 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
Python箱型图处理离群点的例子
2019/12/09 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
生产经理的自我评价分享
2013/11/07 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
Python进阶学习之带你探寻Python类的鼻祖-元类
2021/05/08 Python
你真的了解PHP中的引用符号(&)吗
2021/05/12 PHP
详解MySQL中timestamp和datetime时区问题导致做DTS遇到的坑
2021/12/06 MySQL