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 相关文章推荐
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
JavaScript判断数组重复内容的两种方法(推荐)
Jun 06 Javascript
js判断空对象的实例(超简单)
Jul 26 Javascript
dropload.js插件下拉刷新和上拉加载使用详解
Oct 20 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
JS获取动态添加元素的方法详解
Jul 31 Javascript
javascript中undefined的本质解析
Jul 31 Javascript
JS forEach跳出循环2种实现方法
Jun 24 Javascript
Js数组扁平化实现方法代码总汇
Nov 11 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把大写命名转换成下划线分割命名
2015/04/27 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
jQuery实现点击标题输入详细信息
2013/04/16 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
js实现键盘控制DIV移动的方法
2015/01/10 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
js实现tab选项卡切换功能
2017/01/13 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
Vue项目中使用better-scroll实现菜单映射功能方法
2019/09/11 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
vue-video-player实现实时视频播放方式(监控设备-rtmp流)
2020/08/10 Javascript
如何在 Vue 表单中处理图片
2021/01/26 Vue.js
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python常用内置函数总结
2015/02/08 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
香港化妆品经销商:我的公主
2016/08/05 全球购物
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
欧尚俄罗斯网上超市:Auchan俄罗斯
2018/05/03 全球购物
师范学院教师自荐书
2014/01/31 职场文书
教学质量评估实施方案
2014/03/17 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
护士求职自荐信
2015/03/25 职场文书
中标通知书格式
2015/04/17 职场文书
2015年材料员工作总结
2015/04/30 职场文书
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers
vue实现简易音乐播放器
2022/08/14 Vue.js