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 相关文章推荐
JS target与currentTarget区别说明
Aug 28 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 Javascript
JavaScript关闭当前页面(窗口)不带任何提示
Mar 26 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
jQuery制作网页版选项卡
Jul 28 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
jQuery学习之DOM节点的插入方法总结
Jan 22 Javascript
postman+json+springmvc测试批量添加实例
Mar 31 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
JS window对象简单操作完整示例
Jan 14 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生成百度sitemap站点地图类函数实例
2014/10/17 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
apache php mysql开发环境安装教程
2016/07/28 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
php中青蛙跳台阶的问题解决方法
2018/10/14 PHP
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
jQuery实现左右滑动的toggle方法
2018/03/03 jQuery
JavaScript获取用户所在城市及地理位置
2018/04/21 Javascript
vue 中的keep-alive实例代码
2018/07/20 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
浅谈python 线程池threadpool之实现
2017/11/17 Python
python删除服务器文件代码示例
2018/02/09 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
如何利用Pyecharts可视化微信好友
2019/07/04 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
PyTorch安装与基本使用详解
2020/08/31 Python
Michael Kors加拿大官网:购买设计师手袋、手表、鞋子、服装等
2019/03/16 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
管理心得体会
2013/12/28 职场文书
高一地理教学反思
2014/01/18 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
考核评语大全
2014/04/29 职场文书
公司爱心捐款倡议书
2014/05/14 职场文书
2014物价局群众路线对照检查材料思想汇报
2014/09/21 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
小区环境卫生倡议书
2015/04/29 职场文书
修辞手法有哪些?
2019/08/29 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Python下opencv使用hough变换检测直线与圆
2021/06/18 Python
斗罗大陆八大特殊魂兽,龙族始祖排榜首,第五最残忍(翠魔鸟)
2022/03/18 国漫