Javascript基础教程之for循环


Posted in Javascript onJanuary 18, 2015

js for 循环可以将代码块执行指定的次数。

JavaScript 循环

我们可以这样输出数组的值:如果您希望一遍又一遍地运行相同的代码,并且每次的值都不同,那么使用循环是很方便的。

document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");

不过我们这样写

for (var i=0; i<cars.length;i++){
document.write(cars[i]+"<br>");
}

举例:输出1-100的数字

for(var i=0;i <=100;i++){
document.write(i+"<br>")
}

for是前测试循环,而且在循环之前能够初始化变量,并且定义循环后要执行的代码,其语法如下

for(inintialization;expression;psot=loop-expression)statement

执行的过程如下:

1.执行initialization语句

2.判断expression是否为true,如果是则是继续,否则终止整个循环体。

3.执行循环体statement代码

4.执行post-loop-expression代码

5.返回第2步操作

for循环最常用的形式是for(var i=0; i<n;i++){statement}

它表示循环一共执行n次,非常适合用于已知的循环次数运算。

    var aNumbers = new Array();

    var sMessage = "你输入了:\n";

    var iTotal = 0;

    var vUserInput;

    var iArrayIndex = 0;

    do{

        vUserInput = prompt("输入一个数字,或者'0'退出","0");

        aNumbers[iArrayIndex] = vUserInput;

        iArrayIndex++;

        iTotal += Number(vUserInput);

        sMessage += vUserInput + "\n";

    }while(vUserInput != 0)        //当输入为0(默认值)时退出循环体

    sMessage += "总数:" + iTotal;

    document.getElementById("xxx").innerHTML=sMessage;

不同类型的循环

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 循环的知识。

While 循环

while 循环和 do/while 循环点击可以查看这篇文章。

以上就是关于javascript中for循环的全部内容了,希望小伙伴们喜欢。

Javascript 相关文章推荐
JavaScript网页制作特殊效果用随机数
May 22 Javascript
jQuery TextBox自动完成条
Jul 22 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
javascript实现滑动解锁功能
Dec 31 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
Nov 24 Javascript
angularjs的select使用及默认选中设置
Apr 08 Javascript
Javascript基础教程之while语句
Jan 18 #Javascript
Javascript基础教程之switch语句
Jan 18 #Javascript
Javascript基础教程之if条件语句
Jan 18 #Javascript
Javascript基础教程之比较操作符
Jan 18 #Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 #Javascript
Javascript基础教程之数组 array
Jan 18 #Javascript
Javascript基础教程之数据类型转换
Jan 18 #Javascript
You might like
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
php处理restful请求的路由类分享
2014/02/27 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
laravel5.6实现数值转换
2019/10/23 PHP
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
jQuery源码分析之Event事件分析
2010/06/07 Javascript
jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate)
2014/05/22 Javascript
jQuery Migrate 1.1.0 Released 注意事项
2014/06/14 Javascript
javascript正则表达式之分组概念与用法实例
2016/06/16 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
vue-cli初始化项目中使用less的方法
2018/08/09 Javascript
nodejs初始化init的示例代码
2018/10/10 NodeJs
微信小程序实现搜索指定景点周边美食、酒店
2019/05/18 Javascript
JS对日期操作封装代码实例
2019/11/08 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
用Python编写一个简单的Lisp解释器的教程
2015/04/03 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
python图书管理系统
2020/04/05 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
深度辨析Python的eval()与exec()的方法
2019/03/26 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
解决Python中回文数和质数的问题
2019/11/24 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
俄罗斯卫浴采暖及维修用品超级市场:Dkrussia
2020/05/12 全球购物
社团活动总结书
2014/06/27 职场文书
学校与家长安全责任书
2014/07/23 职场文书
Redis数据同步之redis shake的实现方法
2022/04/21 Redis