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


Posted in Javascript onAugust 11, 2020

前言

在 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>

在浏览器中打开:

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

在上述代码中,因为我们目标是输出“小于 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>

在浏览器中打开:

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

因为我们要实现的是递减输出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循环内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
JQuery each()函数如何优化循环DOM结构的性能
Dec 10 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
Dec 15 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
Dec 21 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 #Javascript
js实现列表按字母排序
Aug 11 #Javascript
Vue使用轮询定时发送请求代码
Aug 10 #Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 #Javascript
详解vue中v-model和v-bind绑定数据的异同
Aug 10 #Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
Aug 10 #Javascript
React实现阿里云OSS上传文件的示例
Aug 10 #Javascript
You might like
PHP读写文件的方法(生成HTML)
2006/11/27 PHP
一键删除顽固的空文件夹 软件下载
2007/01/26 PHP
php异常处理技术,顶级异常处理器
2012/06/13 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
DEFER怎么用?
2006/07/01 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
JS表的模拟方法
2015/02/05 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
BootStrap 智能表单实战系列(二)BootStrap支持的类型简介
2016/06/13 Javascript
JS通过位运算实现权限加解密
2018/08/14 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
通过angular CDK实现页面元素拖放的步骤详解
2020/07/01 Javascript
token 机制和实现方式
2020/12/15 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
python实现绘制树枝简单示例
2014/07/24 Python
Python列表(list)常用操作方法小结
2015/02/02 Python
详解Python之数据序列化(json、pickle、shelve)
2017/03/30 Python
Python 多线程Threading初学教程
2017/08/22 Python
python针对excel的操作技巧
2018/03/13 Python
python实现抖音视频批量下载
2018/06/20 Python
Python装饰器使用你可能不知道的几种姿势
2019/10/25 Python
python中time、datetime模块的使用
2020/12/14 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
如何开发安全的AJAX应用
2014/03/26 面试题
军训自我鉴定
2013/12/14 职场文书
本科毕业生专业自荐书范文
2014/02/05 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
晋江市委常委班子四风问题整改工作方案
2014/10/26 职场文书
教师党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
实习感想范文
2015/08/10 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
Python机器学习之KNN近邻算法
2021/05/14 Python
oracle重置序列从0开始递增1
2022/02/28 Oracle
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL