【JS】JavaScript的循环命令示例（for/for each/do while）

最新推荐文章于 2024-09-06 16:15:43 发布

敦厚的曹操

最新推荐文章于 2024-09-06 16:15:43 发布

阅读量595

点赞数

分类专栏： 3.【javascript】文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/dxnn520/article/details/122357007

版权

3.【javascript】专栏收录该内容

88 篇文章 1 订阅

订阅专栏

一、标准For循环

break中断for循环

continue继续for循环

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="css/body.css" />
  </head>
  <style></style>
  <body> <div></div> </body>

<script type="text/javascript">

    var ss = [1, 2, 3, 4, 5, 6];
    document.write(ss[0]+"<br>");
    var s=0;
    for(var i=0;i<5;i++)
    {
      s=s+1;
      document.write(s);
    }

  </script>
</html>

二、For each循环

item：遍历数组

index：循环数组元素数，跟i++相似

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="css/body.css" />
  </head>
  <style></style>

  <body>
    <div></div>
  </body>

<script type="text/javascript">

    var ss = [1, 2, 3, 4, 5, 6];
    ss.forEach((item, index) => {
    document.write("<br>");  
    document.write("数组值："+item);   /* 遍历数组 */ 
    document.write("数组序号："+index);   /* 循环数组元素数，跟i++相似 */

})

</script>
</html>

三、do while | while循环

break中断for循环

continue继续for循环

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="css/body.css" />
  </head>
  <style></style>

  <body>
    <div></div>
  </body>

  <script type="text/javascript">

    var ss = [1, 2, 3, 4, 5, 6];
    var i = 0

    document.write("====== do while 示例！");
    do{
      document.write("第["+i+"]的值："+ss[i]+"<br>");
      i = i + 1
    }while(i < ss.length)

    document.write("====== while 示例！<br>");
    i=0;
    while(i < ss.length){
      document.write("第["+i+"]的值："+ss[i]+"<br>");
      i = i + 1
    }
  </script>
</html>

四、For in循环 (获取数组对象的值如：name:"刘备"，取：刘备)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="css/body.css" />
  </head>
  <style></style>

  <body>
    <div></div>
  </body>

  <script type="text/javascript">

    var person={name:"刘备",sex:"男",age:56}; 
    for (x in person)  // x 为属性名
    {
      document.write(person[x]+"<br>");
    }

  </script>
</html>

五、for...of（获取对象的属性名和键值）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>主页</title>
    <link rel="stylesheet" href="css/body.css" />
  </head>
  <style></style>

  <body>
    <div></div>
  </body>

  <script type="text/javascript">

var list = ['a', 'b', 'c']
    for (var item of list) {
      document.write(item+"<br>");
    }

    var person={name:"刘备",sex:"男",age:56}; 
    for (var key of Object.keys(person))
    {
      document.write(key+":"+person[key]+"<br>");
    }

  </script>
</html>