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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
基于jquery的一个图片hover的插件
Apr 24 Javascript
js 实现日期灵活格式化的小例子
Jul 14 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
Javascript基础教程之关键字和保留字汇总
Jan 18 Javascript
jQuery实现动态添加和删除一个div
Aug 12 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
Aug 15 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 Javascript
基于对象合并功能的实现示例
Oct 10 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 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的可变变量名的使用方法分享
2012/02/05 PHP
PHP缓冲区用法总结
2016/02/14 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
基于jquery实现页面滚动时顶部导航显示隐藏
2020/04/20 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
vue中锚点的三种方法
2018/07/06 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
在Django中创建动态视图的教程
2015/07/15 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
python实现远程通过网络邮件控制计算机重启或关机
2018/02/22 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
在Python中使用Neo4j的方法
2019/03/14 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
详解Python字符串切片
2019/05/20 Python
简单了解django索引的相关知识
2019/07/17 Python
Python多叉树的构造及取出节点数据(treelib)的方法
2019/08/09 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
纯CSS3实现绘制各种图形实现代码详细整理
2012/12/26 HTML / CSS
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
惠普美国官方商店:HP Official Store
2016/08/28 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
预备党员思想汇报范文
2014/01/11 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python