三个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 相关文章推荐
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
js QQ客服悬浮效果实现代码
Dec 12 Javascript
js获取Html元素的实际宽度高度的方法
May 19 Javascript
js实现简单的二级联动效果
Mar 09 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
详解在vue-cli中使用路由
Sep 25 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
TypeScript高级用法的知识点汇总
Dec 17 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
memcached 和 mysql 主从环境下php开发代码详解
2010/05/16 PHP
PHP完全二叉树定义与实现方法示例
2017/10/09 PHP
JavaScript中获取元素索引的函数
2010/09/10 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
2015/08/21 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
2015/09/01 Javascript
javascript时间差插件分享
2016/07/18 Javascript
AngularJS基础 ng-options 指令详解
2016/08/02 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
python中json格式数据输出的简单实现方法
2016/10/31 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
Python实现购物车购物小程序
2018/04/18 Python
python opencv实现证件照换底功能
2019/08/19 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
Spring Boot中使用IntelliJ IDEA插件EasyCode一键生成代码详细方法
2020/03/20 Python
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
俄罗斯宠物用品网上商店:ZooMag
2019/12/12 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
数据库设计的包括哪两种,请分别进行说明
2016/07/15 面试题
校园报刊亭创业计划书
2014/01/02 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
英文慰问信范文
2015/03/24 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
担保书怎么写 ?
2019/04/22 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python
索尼ICF-36收音机评测
2022/04/30 无线电