JavaScript中的for循環(huán)與雙重for循環(huán)詳解

更新時(shí)間：2021年03月15日 10:39:11 作者：Lumoom

這篇文章主要給大家介紹了關(guān)于JavaScript中for循環(huán)與雙重for循環(huán)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

for循環(huán)

for循環(huán)就是對(duì)數(shù)組的元素進(jìn)行循環(huán)。

語法：

for (初始化變量; 條件表達(dá)式; 迭代語句) {
需要執(zhí)行的代碼塊；
}

初始化變量：一般用來對(duì)循環(huán)變量進(jìn)行初始化賦值。
條件表達(dá)式：作為循環(huán)條件，一個(gè)包含比較運(yùn)算符的表達(dá)式，用來限定循環(huán)變量的邊限。如果循環(huán)變量的值超出了該邊限，則停止該循環(huán)語句的執(zhí)行。
迭代語句：用來改變循環(huán)變量的值，從而控制循環(huán)的次數(shù)，通常是對(duì)循環(huán)變量的值進(jìn)行遞增或者遞減的操作。

for循環(huán)執(zhí)行順序：

// 1. 聲明變量；
// 2. 判斷循環(huán)執(zhí)行條件；
// 3. 代碼塊執(zhí)行；
// 4. 變量自增；

示例：求1-100的偶數(shù)和

var num=0
    for(var i=0;i<=100;i+=2){  //i+=2 意思為i=i+2
      num +=i         
    }
    console.log("偶數(shù)和:"+num)

雙重for循環(huán)

循環(huán)嵌套是指在一個(gè)循環(huán)語句中再定義一個(gè)循環(huán)語句的語法結(jié)構(gòu)，例如在for循環(huán)語句中，可以再嵌套一個(gè)for循環(huán)，這樣的for循環(huán)語句我們稱之為雙重for循環(huán)。

語法：

for (外層初始化變量; 外層條件表達(dá)式;外層迭代語句) {
     for (內(nèi)層初始化變量;內(nèi)層條件表達(dá)式; 內(nèi)層迭代語句) {
         需要執(zhí)行的代碼塊；
     }
}

里層循環(huán)可看做是是外層循環(huán)的執(zhí)行語句
外層循環(huán)執(zhí)行一次，里面循環(huán)就會(huì)執(zhí)行全部

雙重for循環(huán)實(shí)質(zhì)：

外層for循環(huán)控制循環(huán)的高度（行數(shù)）；
內(nèi)層for循環(huán)控制循環(huán)的寬度（列數(shù)）；

示例：輸出九九乘法表

 for(var i= 0 ; i <=9 ; i++){
     for(var aa = 1 ; aa <i+1 ; aa++){
       document.write(aa+"*"+i+"="+i*aa);
     }
     document.write("<br />");
   }

可以添加一些樣式讓它更美觀（添加span元素，定義body主體部分的寬度，將span元素改為inline-block行內(nèi)塊元素，設(shè)置其固定寬度）

<head>
<style> body{
    width:2000px;
  }
  span{
    display:inline-block;
    width:80px;
  } </style>
</head>
<body> 
<script> for(var i= 0 ; i <=9 ; i++){
     for(var aa = 1 ; aa <i+1 ; aa++){ document.write("<span>"+aa+"*"+i+"="+i*aa+"</span>");
     }
     document.write("<br />");
   } </script>
</body>

總結(jié)

到此這篇關(guān)于JavaScript中的for循環(huán)與雙重for循環(huán)的文章就介紹到這了,更多相關(guān)JavaScript雙重for循環(huán)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: