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下弹出窗口的变通
Apr 18 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
Jquery Easyui搜索框组件SearchBox使用详解(19)
Dec 17 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
强大的JavaScript响应式图表Chartist.js的使用
Sep 13 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
vue:el-input输入时限制输入的类型操作
Aug 05 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正则表达式之定界符和原子介绍
2012/10/05 PHP
PHP中时间加减函数strtotime用法分析
2017/04/26 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
js 判断计算字符串长度/判断空的简单方法
2013/08/05 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
把Node.js程序加入服务实现随机启动
2015/06/25 Javascript
D3.js中data(), enter() 和 exit()的问题详解
2015/08/17 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Tornado协程在python2.7如何返回值(实现方法)
2017/06/22 Python
python difflib模块示例讲解
2017/09/13 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python中实现输入超时及如何通过变量获取变量名
2020/01/18 Python
利用Python的folium包绘制城市道路图的实现示例
2020/08/24 Python
可贵的沉默教学反思
2014/02/06 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2014年人民调解工作总结
2014/12/08 职场文书
护士节慰问信
2015/02/15 职场文书
寒假安全保证书
2015/02/28 职场文书
民事上诉状范文
2015/05/22 职场文书
初中团支书竞选稿
2015/11/21 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers