文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript for循环的用法

2024-04-02 19:55

关注

这篇文章主要介绍“JavaScript for循环的用法”,在日常操作中,相信很多人在JavaScript for循环的用法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript for循环的用法”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

一、JavaScript 循环

循环是方便的,如果你想重复地运行同一个代码,每次使用不同的值。

通常情况下,这是与数组一起工作:

text += cars[0] + "<br>"; text += cars[1] + "<br>"; text += cars[2] + "<br>"; text += cars[3] + "<br>"; text += cars[4] + "<br>"; text += cars[5] + "<br>";  可以写成这样:  for (i = 0; i < cars.length; i++) {     text += cars[i] + "<br>"; }

例:

<!DOCTYPE html> <html lang="en">     <head>         <meta charset="UTF-8">         <title>项目</title>     </head>     <body style="background-color: aqua;">          <h2>JavaScript 循环</h2>          <p id="demo"></p>          <script>             var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];             var text = "";             var i;             for (i = 0; i < cars.length; i++) {                 text += cars[i] + "<br>";             }             document.getElementById("demo").innerHTML = text; </script>      </body> </html>

JavaScript for循环的用法

二、不同种类的循环

JavaScript 支持不同类型的循环:

for - 多次循环一段代码。

for/in - 通过对象的属性循环。

三、For 循环

for循环通常是你想创建循环时使用的工具。

语法:

for (statement 1; statement 2; statement 3) {    code block to be executed }

语句1:循环(代码块)开始之前执行。

语句2:定义了运行循环的条件(代码块)。

语句3:循环(代码块)被执行后每次执行。

for (i = 0; i < 5; i++) {    text += "The number is " + i + "<br>"; }

完整代码:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>项目</title> </head> <body style="background-color: aqua;">  <h2>JavaScript Loops</h2>  <p id="demo"></p>  <script> var text = ""; var i; for (i = 0; i < 5; i++) { text += "The number is " + i + "<br>"; } document.getElementById("demo").innerHTML = text; </script>  </body> </html>

JavaScript for循环的用法

语句1在循环开始前设置变量 (var i = 0),语句2定义了循环运行的条件 (i 必须小于 5),语句3增加值(i++)  每次循环中的代码块都已被执行。

1. 语句 1

通常,您将使用语句1初始化循环中使用的变量 (i = 0)。语句1是可选的,可以在语句1中初始化多个值(逗号分隔)。

for (i = 0; i < 5; i++) {    text += "The number is " + i + "<br>"; }

可以省略语句1(如在循环开始之前设置值)。

<script>    var cars = ["BMW", "Volvo", "Saab", "Ford"];    var i = 2;    var len = cars.length;    var text = "";     for (; i < len; i++) {        text += cars[i] + "<br>";   }     document.getElementById("demo").innerHTML = text; </script>

JavaScript for循环的用法

2. 语句 2

经常使用语句2来判断初始变量的条件。

这是情况并非总是如此,JavaScript不在乎。语句2也是可选的.如果语句2返回true,则循环将重新启动,如果返回false,则循环将结束。

如果省略语句2,则必须在循环中提供一个中断。否则循环永远不会结束。这将使你的浏览器崩溃。

3. 语句 3

经常语句3增加初始变量的值.这是情况并非总是如此,JavaScript不在乎,并声明3是可选的。

声明3可以做任何事情,如负增量(i--),正增量(i = i + 15),或任何其他。

语句3也可以省略(例如当你在循环中增加你的值)。

<script>    var cars = ["BMW", "Volvo", "Saab", "Ford"];     var i = 0;    var len = cars.length;    var text = "";     for (; i < len; ) {        text += cars[i] + "<br>";        i++;   }    document.getElementById("demo").innerHTML = text; </script>

JavaScript for循环的用法

四、For/In 循环

JavaScript for/in 语句遍历对象的属性。

<!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8">     <title>项目</title>   </head>   <body style="background-color: aqua;">      <h2>JavaScript 循环</h2>      <p>for/in 语句通过对象的属性循环.</p>      <p id="demo"></p>      <script>       var txt = "";       var person = {         fname: "John",         lname: "Doe",         age: 25       };       var x;       for (x in person) {         txt += person[x] + " ";       }       document.getElementById("demo").innerHTML = txt; </script>    </body> </html>

for/in 语句通过对象的属性循环.

JavaScript for循环的用法

到此,关于“JavaScript for循环的用法”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯