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


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. jmeter断言步骤

    在POST /wordpress/wp-login.php请求,也就是名称为submit login form user的请求上点右键, 选择添加 -> 后置处理器 -> CSS/JQue ...

  2. linux下文件操作之cp和mv

    Linux CP文件夹略过目录的解决 root@QGY:/home/qgy# cp image/newimage_raw /mnt/4T/qin/cp: 略过目录'image/newimage_raw ...

  3. [Array]217.Contains Duplicate

    Given an array of integers, find if the array contains any duplicates. Your function should return t ...

  4. Jdbc封装和对CURD的封装

    1.查询emp表中的所有记录为例 2.测试类 public Emp getByNameAndEmail(String name, String email){ String sql = "s ...

  5. 移动端适配(rem单位定义方法)

    注:移动端必须写: <meta name="viewport" content="width=device-width, user-scalable=no, ini ...

  6. textarea标签中多出的空格

    //这么写才能被正确渲染 <textarea></textarea> //这样就会有空格 <textarea> </textarea> 不能换行,涨姿势

  7. 前端(jQuery)(9)-- jQuery菜单

    1.垂直菜单布局 2.垂直菜单实现 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  8. Spring AOP(转)

    原文:Spring实现AOP的4种方式 Spring AOP 详解 Spring实现AOP的4种方式 先了解AOP的相关术语:1.通知(Advice):通知定义了切面是什么以及何时使用.描述了切面要完 ...

  9. node 和npm环境安装

    node 安装 1.下载node二进制文件 [root@baolin-images#>> ~]#wget https://nodejs.org/dist/v10.16.0/node-v10 ...

  10. Vue. 之 Element table 单元格内容隐藏

    Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...