0

0

js的基本循环类型有哪些

青灯夜游

青灯夜游

发布时间:2018-12-11 14:52:37

|

6939人浏览过

|

来源于php中文网

原创

js的基本循环类型有:for循环、while循环、do-while循环、for-in循环。

本篇文章就给大家介绍js的基本循环类型有哪些,如何实现循环,让大家对js循环有一个简单的了解,希望对你们有所帮助。

js的基本循环类型有哪些

在JavaScript中支持的循环类型,基本上可以分为四种:for循环、while循环、do-while循环、for-in循环,下面我们就来具体的介绍一下这四种循环类型。【相关视频教程推荐:JavaScript教程

js for循环

for循环是先判断条件是否为真,再执行{}里的代码块(如果{}里的代码块只有一条语句,{}可省略)。

作用:当已知循环迭代的次数时,则可以使用它循环迭代固定次数的代码块。

语法

for(表达式1;表达式2;表达式3)  
{  
    要执行的代码块
}

说明:

表达式1:声明循环的变量,并初始化变量。

表达式2:循环的判断条件

表达式3:循环的增量,是用来更新循环的一个变量(可以是递增的,也可以使递减的)

注:for循环里的多个表达式之间需要用分号“;”隔开,且for循环里的表达式是都可以省略的,但是必须有两个“;”存在,不可省略,即可以是for(;;)的形式 。

执行流程图:

js的基本循环类型有哪些

例:for循环的简单示例

<script>  
	for (i=1; i<=5; i++)  
	{  
	    document.write(i + "<br/>")  
	}  
</script>

效果图:

2.jpg

在这个例子中,声明了一个变量i,给变量i赋值为1;只有当变量i的值小于等于5时才可以执行{}里的语句块;for循环每结束一次,变量i的值就增加1。

js while循环:

while循环,也是先判断在执行指定的代码块

作用:当指定的条件表达式为真时,循环指定的代码块;当不知道循环迭代的次数时,则可以使用它循环迭代次数达到无限多的元素代码块。

语法:

久久企业网站后台管理系统1.0
久久企业网站后台管理系统1.0

一、功能简介本软件完全适应大、中、小型网站建设需要,让您用很便宜的虚拟主机空间也可以开通4个独立的网站!久久企业网站后台管理系统各种版本开发基础架构均为php+mysql+div+css+伪静态,迎合搜索引擎排名的喜好。另外值得一提的是本站特色的TAG系统可为您的网站做出无限分类,不用任何设置全站ULR伪静态!本建站系统除了有产品发布、新闻(软文)发布、订单管理系统和留言反馈等一些最基本的功能之外

下载
while(条件表达式)  
{  
    要执行的代码块
}

注:在while循环里的条件表达式中,不管条件表达式运算后得到的结果是什么类型的,最后都会转为逻辑值:真和假。

执行流程图:

js的基本循环类型有哪些

例:while循环的简单例子

<script>  
var i=11;  
while (i<=15)  
{  
document.write(i + "<br/>");  
i++;  
}  
</script>

效果图:

3.jpg

为了不让while循环变成一个是死循环,会在while循环的执行代码块中添加“增量”,用来更新判断循环变量。

do-while循环:

do-while循环是先执行再判断,无论条件表达式里的结果是真还是假,代码至少会执行一次。

语法:

do{  
    要执行的代码  
} while(条件表达式);

执行流程图:

js的基本循环类型有哪些

例:do while循环的简单例子

<script>  
var i=21;  
do{  
document.write(i + "<br/>");  
i++;  
}while (i<=25);  
</script>

运行结果:

4.jpg

for-in循环:

作用:主要用于循环遍历对象的属性

语法:

for(keys in zhangsan)
{
要执行的代码  
}

例:

var obj = {
  a: 1,
  b: "lian"
};
//给obj定义一个不可枚举的属性c
Object.defineProperty(obj, "c", {
  value: 2,
  emumerable: false,
  writable: true,
  configurable: true
});
//虽然属性c不可枚举,但是值依然存在
console.log(obj.c); //2
for (var i in obj) {
  //只会遍历可枚举属性
  console.log(obj[i]); //1 lian
  }

运行结果:

5.jpg

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
while的用法
while的用法

while的用法是“while 条件: 代码块”,条件是一个表达式,当条件为真时,执行代码块,然后再次判断条件是否为真,如果为真则继续执行代码块,直到条件为假为止。本专题为大家提供while相关的文章、下载、课程内容,供大家免费下载体验。

104

2023.09.25

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

530

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

554

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

718

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

6023

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

492

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

219

2023.09.04

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

240

2023.09.14

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

1

2026.03.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 10万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号