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 load Page,load css,load js实现代码
Mar 31 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
js实现倒计时(距离结束还有)示例代码
Jul 24 Javascript
JS中attr和prop属性的区别以及优先选择示例介绍
Jun 30 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
原生JS实现轮播效果+学前端的感受(防止走火入魔)
Aug 21 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
Vue组件系列开发之模态框
Apr 18 Javascript
原生js实现密码强度验证功能
Mar 18 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
论建造顺序的重要性
2020/03/04 星际争霸
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
php设计模式之代理模式分析【星际争霸游戏案例】
2020/03/23 PHP
国外Lightbox v2.03.3 最新版 下载
2007/10/17 Javascript
JQUBAR1.1 jQuery 柱状图插件发布
2010/11/28 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
js智能获取浏览器版本UA信息的方法
2016/08/08 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
2016/11/07 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
在layui.use 中自定义 function 的正确方法
2019/09/16 Javascript
Python中文竖排显示的方法
2015/07/28 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python 中的divmod数字处理函数浅析
2017/10/17 Python
python实现音乐下载的统计
2018/06/20 Python
python批量修改文件夹及其子文件夹下的文件内容
2019/03/15 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
常用的四种CSS透明属性介绍
2014/04/12 HTML / CSS
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
使用索引有什么好处
2016/07/27 面试题
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
中学生国旗下讲话稿
2014/04/26 职场文书
说明书范文
2014/05/07 职场文书
网吧消防安全责任书
2014/07/29 职场文书
优秀党员推荐材料
2014/12/18 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python