三个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 相关文章推荐
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
Mar 19 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
十个免费的web前端开发工具详细整理
Sep 18 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
浅谈React Event实现原理
Sep 20 Javascript
vue登录页面cookie的使用及页面跳转代码
Jul 10 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模板之Phpbean的目录结构
2008/01/10 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
thinkphp5.1框架实现格式化mysql时间戳为日期的方式小结
2019/10/10 PHP
Javascript面向对象编程(三) 非构造函数的继承
2011/08/28 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
2012/06/14 Javascript
event对象获取方法总结在google浏览器下测试
2013/11/03 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
基于jquery实现左右按钮点击的图片切换效果
2021/01/27 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
2018/01/08 Javascript
python正则分组的应用
2013/11/10 Python
在Python的Django框架中更新数据库数据的方法
2015/07/17 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
Python生成随机密码的方法
2017/06/16 Python
分析python动态规划的递归、非递归实现
2018/03/04 Python
python opencv实现图片旋转矩形分割
2018/07/26 Python
Python Pandas数据结构简单介绍
2019/07/03 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
django 模型字段设置默认值代码
2020/07/15 Python
Python基于xlrd模块处理合并单元格
2020/07/28 Python
python实现经典排序算法的示例代码
2021/02/07 Python
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
临床医师专业个人自我评价范文
2013/11/07 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
高中学生自我评价范文
2014/09/23 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
七年级作文之我的梦想
2019/10/16 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS