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 27 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
js实现点击切换checkbox背景图片的简单实例
May 08 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
详解Node.js 中使用 ECDSA 签名遇到的坑
Nov 26 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
vue 组件基础知识总结
Jan 26 Vue.js
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/08 日漫
统一接口:为FireFox添加IE的方法和属性的js代码
2007/03/25 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
jQuery制作图片旋转效果
2017/02/02 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
angularJs利用$scope处理升降序的方法
2018/10/08 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
详解python中的index函数用法
2019/08/06 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
Python进阶之迭代器与迭代器切片教程
2020/01/29 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
科颜氏加拿大官方网站: Kiehl’s加拿大
2016/08/16 全球购物
入学申请自荐信范文
2014/02/26 职场文书
促销活动总结怎么写
2014/06/25 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
农村文化建设标语
2014/10/07 职场文书
2015年护士医德医风自我评价
2015/03/03 职场文书
储备店长岗位职责
2015/04/14 职场文书
PostgreSQL数据库去除重复数据和运算符的基本查询操作
2022/04/12 PostgreSQL