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 相关文章推荐
jquery 选择器部分整理
Oct 28 Javascript
javascript 在firebug调试时用console.log的方法
May 10 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
Apr 26 Javascript
Javascript中Event属性搜集整理
Sep 17 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
May 09 Javascript
laydate时间日历插件使用方法详解
Nov 14 Javascript
微信公众号H5之微信分享常见错误和问题(小结)
Nov 14 Javascript
Json实现传值到后台代码实例
Jun 30 Javascript
js实现简单选项卡制作
Aug 05 Javascript
angular *Ngif else用法详解
Dec 15 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 socket方式提交的post详解
2008/07/19 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
php中常用的预定义变量小结
2012/05/09 PHP
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
js全选按钮的实现方法
2015/11/17 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
Angular2生命周期钩子函数的详细介绍
2017/07/10 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
javascript匿名函数中的'return function()'作用
2018/10/15 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
Python 详解基本语法_函数_返回值
2017/01/22 Python
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
英国探险旅游专家:Explore
2018/12/20 全球购物
sort命令的作用和用法
2012/11/04 面试题
幼儿园校车司机的岗位职责
2014/01/30 职场文书
预备党员学习十八届三中全会精神思想汇报
2014/09/13 职场文书
导游词300字
2015/02/13 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
Java数组详细介绍及相关工具类
2022/04/14 Java/Android
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis