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 18 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
Feb 22 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
使用js实现将后台传入的json数据放在前台显示
Aug 06 Javascript
详解JS转换数值函数Number()、parseInt()、parseFloat()
Aug 24 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
Dec 06 Javascript
JavaScript实现滑动门效果
Jan 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
php实现jQuery扩展函数
2009/10/30 PHP
php操作excel文件 基于phpexcel
2010/07/02 PHP
简单的php+mysql聊天室实现方法(附源码)
2016/01/05 PHP
php中final关键字用法分析
2016/12/07 PHP
Jquery绑定事件(bind和live的区别介绍)
2013/08/23 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
2016/10/25 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
2018/02/08 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
优雅的elementUI table单元格可编辑实现方法详解
2018/12/23 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
Python实现的几个常用排序算法实例
2014/06/16 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
python模糊图片过滤的方法
2018/12/14 Python
在pycharm 中添加运行参数的操作方法
2019/01/19 Python
python2.7使用plotly绘制本地散点图和折线图
2019/04/02 Python
Pandas-Cookbook 时间戳处理方式
2019/12/07 Python
详解python破解zip文件密码的方法
2020/01/13 Python
python 使用递归回溯完美解决八皇后的问题
2020/02/26 Python
Python如何发送与接收大型数组
2020/08/07 Python
个人实用的自我评价范文
2013/11/23 职场文书
幼儿教师国培感言
2014/02/19 职场文书
小学语文业务学习材料
2014/06/02 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
企业务虚会发言材料
2014/10/20 职场文书
学生会副主席竞选稿
2015/11/19 职场文书
Python使用Web框架Flask开发项目
2022/06/01 Python