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 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
JavaScript 精粹读书笔记(1,2)
Feb 07 Javascript
jquery动态更换设置背景图的方法
Mar 25 Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 Javascript
javascript与css3动画结合使用小结
Mar 11 Javascript
JavaScript通过setTimeout实时显示当前时间的方法
Apr 16 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
完美实现js拖拽效果 return false用法详解
Jul 28 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
使用webpack搭建pixi.js开发环境
Feb 12 Javascript
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
Vue如何清空对象
Mar 03 Vue.js
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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
ajax php传递和接收变量实现思路及代码
2012/12/19 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
jQuery 解析xml文件
2009/08/09 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
关于删除时的提示处理(确定删除吗)
2013/11/03 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
2017/01/08 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
JavaScript插件Tab选项卡效果
2017/11/14 Javascript
浅谈vue的第一个commit分析
2020/06/08 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
python复制文件代码实现
2013/12/23 Python
python分割文件的常用方法
2014/11/01 Python
python将list转为matrix的方法
2018/12/12 Python
更新修改后的Python模块方法
2019/03/03 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
python and or用法详解
2019/06/26 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
Python self用法详解
2020/11/28 Python
html5服务器推送_动力节点Java学院整理
2017/07/12 HTML / CSS
iHerb中文官网:维生素、保健品和健康产品
2018/11/01 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
购房意向书范本
2014/04/01 职场文书
《秋游》教学反思
2014/04/24 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
vue2的 router在使用过程中遇到的一些问题
2022/04/13 Vue.js