JavaScript中while循环的基础使用教程

前言

在 JavaScript 语言中，当我们使用 while 循环时，只要指定条件为 true，循环就可以一直执行。

并且只要条件一直满足，就可以实现一个无限循环，例如：

while(true){
console.log("1");
}

执行这个循环，就会无止境的输出1。

while 语法及其使用

语法如下所示：

while (condition) {
// 要执行的代码块
}

condition 是循环的条件，只有当循环条件成立时，才会执行花括号 {} 中的代码，如果条件不成立则不会执行代码。

示例：

使用 while 循环输出小于 10 的所有整数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body>
<div>
<p id="while"></p>
</div>
<script>
var number = "";
var i = 0;
while (i < 10) {
number += "<br>第 "+i+" 个数";
i++;
}
document.getElementById("while").innerHTML = number;
</script>
</body>
</html>

在浏览器中打开：

在上述代码中，因为我们目标是输出“小于 10 的所有整数”，所以这其实不包括10 ，而是从 0 - 9 之间的整数。这样的话我们可以声明初始变量 i 为 0 ，表示从 0 开始输出，然后循环条件为 i < 10 ，只要满足这个条件，循环就会一直执行。然后在代码块中加上一句 i++; ，表示每次循环 初始变量值都会加1，一直加到 9 。

do/while 循环的使用

do/while 循环是 while 循环的变体，它与 while 循环的不同在于，在检查条件是否为真之前，该循环将会执行一次代码块，然后只要条件为真，它就将重复该循环。也就是说，不论如何 do/while 循环都会至少执行一次。

语法：

do{
// 要执行的代码块
}while(condition);

示例：

通过 do/while 循环以递减方式，循环输出1-10以内的数字：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_侠课岛(9xkd.com)</title>
</head>
<body>
<div>
<p id="dowhile"></p>
</div>
<script>
var dow = ""
var i = 10;
do {
dow += "<br><br>第 " +i+ " 个数";
i--;
}while (i > 0);
document.getElementById("dowhile").innerHTML = dow;
</script>
</body>
</html>

在浏览器中打开：

因为我们要实现的是递减输出1-10以内的数字，就是 10、9、8、7、6、5、4、3、2、1 ，那么初始化变量肯定是从10开始，然后循环条件为 i > 0 ，或者 i >= 1 也一样。在代码块中加上 i-- ，每循环一次，初始条件变量将减去一，一直减到大于0为止。

再强调一次， do/while 与 while 循环的不同之处在于：它会先执行一次循环中的语句，然后再判断表达式是否为真，如果为真则继续循环，如果为假则终止循环。所以说不管条件是否为真， do/while 循环至少要执行一次循环语句 。

例如看下面这段代码：

do{
console.log("1");
}while(false);

// 输出：1

尽管我们给 while 后面的循环条件指定为 false ， 代码执行结果依然输出了一个1，这表示循环执行了一次。

不同循环的使用情景

  • 当循环次数不限制、不确定时可以使用 while循环。
  • 循环次数有限制、已经确定时可以用 for循环。

动手小练习

定义一个输入框，随机输入一个数，并判断这个数字是否符合条件？
循环弹框输入数据，并在控制台打印，如果输入为 exit，则退出循环。

总结

到此这篇关于JavaScript中while循环的文章就介绍到这了,更多相关JavaScript的while循环内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JavaScript While 循环 教程

    JavaScript中的循环用来将同一段代码执行指定的次数(或者当指定的条件为true时). JavaScript Switch 声明 如果希望选择执行若干代码块中的一个,你可以使用switch声明: 语法: 复制代码 代码如下: switch(n)     {     case 1:       执行代码块 1       break     case 2:       执行代码块 2       break     default:       如果n即不是1也不是2,则执行此代码     

  • javascript 循环语句 while、do-while、for-in、for用法区别

    前两个唯一的差别就是循环和判断的顺序不同,do-while比while多循环一次,我就不举例了. for循环相信大家也熟的不能再熟了,我们就看for-in这一句. 这个其实是针对数组的,js中数组的初始化也挺奇特的比如我们在script结点里写:(另外注意下数组的初始化,用的是中括号) "); var a=[3,4,5,7]; for(var test in a){ document.write(test+": "+a[test]+""); } -->

  • 详解JavaScript的while循环的使用

    在写一个程序时,可能有一种情况,当你需要一遍又一遍的执行一些操作.在这样的情况下,则需要写循环语句,以减少代码的数量. JavaScript支持所有必要的循环,以帮助您在所有编程的步骤.  while 循环 在JavaScript中最基本的循环是while循环,这将在本教程中学习讨论. 语法 while (expression){ Statement(s) to be executed if expression is true } while循环的目的是为了反复执行语句或代码块(只要表达式为t

  • 三个js循环的关键字示例(for与while)

    循环的三种写法: <!doctype html> <title>js循环 by 我们</title> <meta charset="utf-8"/> <meta name="keywords" content="js循环 by 我们" /> <meta name="description" content="js循环 by 我们" />

  • JavaScript中while循环的基础使用教程

    前言 在 JavaScript 语言中,当我们使用 while 循环时,只要指定条件为 true,循环就可以一直执行. 并且只要条件一直满足,就可以实现一个无限循环,例如: while(true){ console.log("1"); } 执行这个循环,就会无止境的输出1. while 语法及其使用 语法如下所示: while (condition) { // 要执行的代码块 } condition 是循环的条件,只有当循环条件成立时,才会执行花括号 {} 中的代码,如果条件不成立则不

  • JavaScript中的原型继承基础学习教程

    大多数编程语言中,都有类和对象,一个类可以继承其他类. 在JavaScript中,继承是基于原型的(prototype-based),这意味着JavaScript中没有类,取而代之的是一个对象继承另一个对象.:) 1. 继承, the proto 在JavaScript中,当一个对象rabbit继承另一了对象animal时,这意味着rabbit对象中将会有一个特殊的属性:rabbit.__proto__ = animal; 当访问rabbit对象时,如果解释器在rabbit中不能找到属性,那么它

  • JavaScript中对循环语句的优化技巧深入探讨

    JavaScript中对循环语句的优化技巧深入探讨

    循环是所有编程语言中最为重要的机制之一,几乎任何拥有实际意义的计算机程序(排序.查询等)都里不开循环. 而循环也正是程序优化中非常让人头疼的一环,我们往往需要不断去优化程序的复杂度,却因循环而纠结在时间复杂度和空间复杂度之间的抉择. 在 javascript 中,有3种原生循环,for () {}, while () {}和do {} while (),其中最为常用的要数for () {}. 然而for正是 javascript 工程师们在优化程序时最容易忽略的一种循环. 我们先来回顾一下for

  • javascript中的循环语句for语句深入理解

    程序实现中经常要用到循环语句,其中for循环是多数语言都有的.在javascript中,for循环有几种不同的使用情况,下面就分别来讲述我的理解. 第一种:(通常情况,循环执行相关操作) 复制代码 代码如下: var objA=document.getElementsByTagName("a"); var i,max; for(i=0,max=objA.length;i<max;i++){ objA[i].onclick=function(){ alert(this.innerH

  • javascript中的107个基础知识收集整理 推荐

    1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大

  • Python2与python3中 for 循环语句基础与实例分析

    Python2与python3中 for 循环语句基础与实例分析

    下面的代码中python2与python3的print使用区别,大家注意一下.python3需要加()才行. 语法: for循环的语法格式如下: for iterating_var in sequence: statements(s) 流程图: 实例: #!/usr/bin/python # -*- coding: UTF-8 -*- for letter in 'jb51.net': # 第一个实例 print '当前字母 :', letter fruits = ['banana', 'app

  • 深入理解Javascript中的循环优化

    循环是大多数编程语言都具备的基本功能,JS也不例外,不同之处在于JS是解释型语言,运行于浏览器环境中,客户端的软硬件条件会对JS执行效率产生很大的影响.然而客户端环境对于开发者是未知.多样的,并且难以改变,所以优化代码质量是提高代码效率的主要途径.JS代码中,循环是比较容易导致性能问题的因素.理解循环特性进而有针对性地进行优化也许会带来不错的性能提升.for.while.do-while循环:这三种循环本身的循环效率相差不多,所以只要根据适合的应用场景选择即可.以for循环为例: 复制代码 代码

  • Ruby中的循环语句的用法教程

    Ruby中的循环用于执行相同的代码块指定的次数.本章将详细介绍Ruby支持的循环语句. Ruby while 语句: 语法: while conditional [do]    code end 执行代码当条件为true时.while循环的条件是代码中的保留字,换行,反斜杠(\)或一个分号隔开. 实例: #!/usr/bin/ruby $i = 0 $num = 5 while $i < $num do puts("Inside the loop i = #$i" ) $i +=

  • JavaScript中内存泄漏的介绍与教程（推荐）

    JavaScript中内存泄漏的介绍与教程（推荐）

    本文主要给大家详细介绍了关于JavaScript中内存泄漏的相关内容,文中介绍的非常详细,对大家具有一定的参考学习价值,下面来一起看看详细的介绍: 一.什么是内存泄漏? 程序的运行需要内存.只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存. 对于持续运行的服务进程(daemon),必须及时释放不再用到的内存.否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃. 不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak). 有些语言(比如 C 语言)必须手动

  • Java线程编程中Thread类的基础学习教程

    Java线程编程中Thread类的基础学习教程

    一.线程的状态 在正式学习Thread类中的具体方法之前,我们先来了解一下线程有哪些状态,这个将会有助于后面对Thread类中的方法的理解. 线程从创建到最终的消亡,要经历若干个状态.一般来说,线程包括以下这几个状态:创建(new).就绪(runnable).运行(running).阻塞(blocked).time waiting.waiting.消亡(dead). 当需要新起一个线程来执行某个子任务时,就创建了一个线程.但是线程创建之后,不会立即进入就绪状态,因为线程的运行需要一些条件(比如内

随机推荐