循环可以将代码块执行指定的次数。


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循环

for (var i=0;i<cars.length;i++) {
document.write(cars[i] + "<br>");
}

不同类型的循环

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 + "该数字为 " + i + "<br>";
}

语句 1

通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。

语句 1 是可选的,也就是说不使用语句 1 也可以。

您可以在语句 1 中初始化任意(或者多个)值:

 

for (var i=0,len=cars.length; i<len; i++)
{
document.write(cars[i] + "<br>");
}

语句 2

通常语句 2 用于评估初始变量的条件。

语句 2 同样是可选的。

如果语句 2 返回 true,则循环再次开始,如果返回 false,则循环将结束。


语句 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)  // x 为属性名
{
txt=txt + person[x];
}

只要指定条件为 true,循环就可以一直执行代码块。


while 循环

while 循环会在指定条件为真时循环执行代码块。

语法

while (条件)
{
需要执行的代码
}

  

实例

本例中的循环将继续运行,只要变量 i 小于 5:

实例

while (i<5) {
x=x + "The number is " + i + "<br>";
i++;
}

do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块,然后如果条件为真的话,就会重复这个循环。

语法

do
{
需要执行的代码
}
while (条件);

  

实例

下面的例子使用 do/while 循环。该循环至少会执行一次,即使条件为 false 它也会执行一次,因为代码块会在条件被测试前执行:

实例

do {
x=x + "The number is " + i + "<br>";
i++;
} while (i<5);

比较 for 和 while

本例中的循环使用 for 循环来显示 cars 数组中的所有值:

实例

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
for (;cars[i];) {
document.write(cars[i] + "<br>");
i++;
}

  

本例中的循环使用 while 循环来显示 cars 数组中的所有值:  

cars=["BMW","Volvo","Saab","Ford"];
var i=0;
while (cars[i])
{
document.write(cars[i] + "<br>");
i++;
}

 

JavaScript for循环 while循环的更多相关文章

  1. SharePoint 自定义的列表页面中添加javascript的一个 For循环语句后,该页面就打不开了。

    一个sharepoint 2013的普通的列表的自定义新建页面,我在其中新添加几行javascript代码后页面就打不开了.如图所示: 真是一言不合,友谊的页面说打不开就打不开啊.后来慢慢比对发现是因 ...

  2. JavaScript 中 for in 循环和数组的问题

    本文由 伯乐在线 - ElvisKang 翻译,进林 校稿.未经许可,禁止转载!英文出处:adripofjavascript.com.欢迎加入翻译小组. JavaScript的for…in循环用于迭代 ...

  3. JavaScript之语句,循环

    JavaScript中语句主要分为三类:顺序,分支,循环. 1.顺序语句: 按照循序依次执行,最普通常见的语句,这里不多赘述. 其结构如下 2.分支语句: 根据条件判断,不同的结果执行不同的语句. 其 ...

  4. 深入理解javascript中的事件循环event-loop

    前面的话 本文将详细介绍javascript中的事件循环event-loop 线程 javascript是单线程的语言,也就是说,同一个时间只能做一件事.而这个单线程的特性,与它的用途有关,作为浏览器 ...

  5. [译]Javascript中的for循环

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  6. [译]Javascript中的do-while循环

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  7. 特殊例子--JavaScript代码实现图片循环滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JavaScript专题之事件循环

    准备知识 1. 进程(process) 进程是系统资源分配一个独立单位,一个程序至少有一个进程.比方说:一个工厂代表一个 CPU, 一个车间就是一个进程,任一时刻,只能有一个进程在运行,其他进程处于非 ...

  9. JavaScript的几种循环方式

    JavaScript提供了许多通过LOOPS迭代的方法.本教程解释了现代JAVASCRIPT中各种各样的循环可能性 目录: for forEach do...while while for...in ...

随机推荐

  1. Leetcode165. Compare Version Numbers比较版本号

    比较两个版本号 version1 和 version2. 如果 version1 > version2 返回 1,如果 version1 < version2 返回 -1, 除此之外返回  ...

  2. 洛谷P3298 泉

    时空限制 1000ms / 128MB 题目描述 作为光荣的济南泉历史研究小组中的一员,铭铭收集了历史上x个不同年份时不同泉区的水流指数,这个指数是一个小于. 2^30的非负整数.第i个年份时六个泉区 ...

  3. 傻瓜式教程--实现登录页面的验证码以及验证(VUE)

    做成之后就 是这个样子 接下来上代码创建一个组件.显示验证码图片 <template> <div class="s-canvas"> <canvas ...

  4. 20190817-T1-LOJ6322「雅礼国庆 2017 Day6」Star Way To Heaven

    写这篇题解是因为作者太蒻已经忘了最小生成树了. <题面> 这个题还真是想不到最小生成树. $80\%$算法 复杂度:$\Theta(k^2 \log N )$ 用了二分答案(明显答案具有单 ...

  5. C#调用C++ DLL动态库的两种方式

    第一种方式:C++导出函数, c#dllimport 的方式 在很多地方都看到过,如[dllimport "user32.dll"]这种代码,调用windows API,就是通过这 ...

  6. CentOS安装fortune+cowsay

    1.先找下看有没 2.安装 yum -y install fortune-mod 3.执行fortune 应该可以输出了,接着去弄中文词库,阮一峰的: git clone git@github.com ...

  7. Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli)

    ps: 想了解更多vue相关知识请点击VUE学习目录汇总 Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过 ...

  8. CSS中各种居中方法

    CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...

  9. Watering Grass (贪心,最小覆盖)

    参考: https://blog.csdn.net/shuangde800/article/details/7828675 https://www.cnblogs.com/haoabcd2010/p/ ...

  10. C++学习笔记----2.4 C++对象的内存模型

    转载自:http://c.biancheng.NET/cpp/biancheng/view/2995.html点击打开链接 当对象被创建时,编译器会为每个对象分配内存空间,包括成员变量和成员函数. 直 ...