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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
实用框架(iframe)操作代码
Oct 23 Javascript
js实现div弹出层的方法
Nov 20 Javascript
十大热门的JavaScript框架和库
Mar 21 Javascript
详解Node.js开发中的express-session
May 19 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
Vue封装的组件全局注册并引用
Jul 24 Javascript
微信小程序中button去除默认的边框实例代码
Aug 01 Javascript
微信小程序实现Swiper轮播图效果
Nov 22 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 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
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
sql注入与转义的php函数代码
2013/06/17 PHP
php微信公众号开发模式详解
2016/11/28 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
Bootstrap 3浏览器兼容性问题及解决方案
2017/04/11 Javascript
vue 请求后台数据的实例代码
2017/06/22 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
移动端底部导航固定配合vue-router实现组件切换功能
2019/06/13 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
2020/01/12 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
浅谈numpy中linspace的用法 (等差数列创建函数)
2017/06/07 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Django model.py表单设置默认值允许为空的操作
2020/05/19 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
2014年社区工作总结
2014/11/18 职场文书
会议开幕词
2015/01/28 职场文书
优秀团员自我评价
2015/03/10 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
大学生学习十八届五中全会精神心得体会
2016/01/05 职场文书
Python代码,能玩30多款童年游戏!这些有几个是你玩过的
2021/04/27 Python
python 如何获取页面所有a标签下href的值
2021/05/06 Python
DE1107机评
2022/04/05 无线电