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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
Javascript中的var_dump函数实现代码
Sep 07 Javascript
读jQuery之一(对象的组成)
Jun 11 Javascript
js获取input标签的输入值实现代码
Aug 05 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
Nov 08 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
js以及jquery实现手风琴效果
Apr 17 Javascript
微信小程序实现animation动画
Jan 26 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 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压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
thinkphp分页实现效果
2016/10/13 PHP
php封装db类连接sqlite3数据库的方法实例
2017/12/19 PHP
表单提交时自动复制内容到剪贴板的js代码
2007/03/16 Javascript
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
js确认删除对话框效果的示例代码
2014/02/20 Javascript
使用js画图之饼图
2015/01/12 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
简单理解JavaScript中的封装与继承特性
2016/03/19 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
2017/02/22 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
AngularJS解决ng-if中的ng-model值无效的问题
2017/06/21 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
[02:37]TI8勇士令状不朽珍藏II视频展示
2018/06/23 DOTA
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
Python如何实现强制数据类型转换
2019/11/22 Python
python如何编写win程序
2020/06/08 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
澳大利亚鞋仓库:Shoe Warehouse
2019/07/25 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
酒店员工检讨书
2014/02/18 职场文书
活动总结报告格式
2014/05/09 职场文书
社区爱国卫生月活动总结
2014/06/30 职场文书
公文写作:教你写“建议书”
2019/05/07 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python