鬆軟科技Web課堂:JavaScript For 迴圈

来源:https://www.cnblogs.com/sysoft/archive/2019/12/10/12014795.html

迴圈可多次執行代碼塊。 JavaScript 迴圈 假如您需要運行代碼多次,且每次使用不同的值,那麼迴圈(loop)相當方便使用。 通常我們會遇到使用數組的例子: 不需要這樣寫: text += cars[0] + "<br>"; text += cars[1] + "<br>"; text += ...


迴圈可多次執行代碼塊。

JavaScript 迴圈

假如您需要運行代碼多次,且每次使用不同的值,那麼迴圈(loop)相當方便使用。

通常我們會遇到使用數組的例子:

不需要這樣寫:

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>";
 }

 

不同類型的迴圈

JavaScript 支持不同類型的迴圈:

  • for - 多次遍歷代碼塊
  • for/in - 遍歷對象屬性
  • while - 當指定條件為 true 時迴圈一段代碼塊
  • do/while - 當指定條件為 true 時迴圈一段代碼塊

For 迴圈

for 迴圈是在您希望創建迴圈時經常使用的工具。

for 迴圈的語法如下:

for (語句 1; 語句 2; 語句 3) {
     要執行的代碼塊
}

 

語句 1 在迴圈(代碼塊)開始之前執行。

語句 2 定義運行迴圈(代碼塊)的條件。

語句 3 會在迴圈(代碼塊)每次被執行後執行。

實例

for (i = 0; i < 5; i++) {
     text += "數字是 " + i + "<br>";
}

 

親自試一試

從上面的代碼中,您可以瞭解到:

語句 1 在迴圈開始之前設置了一個變數(var i = 0)。

語句 2 定義運行迴圈的條件(i 必須小於 5)。

語句 3 會在代碼塊每次執行之後對值進行遞增(i++)。

語句 1

通常,您會使用語句 1 來初始化迴圈中所使用的的變數(i = 0)。

但情況並不總是這樣,JavaScript 不會在意。語句 1 是可選的。

您可以在語句 1 中初始化多個值(由逗號分隔):

實例

for (i = 0, len = cars.length, text = ""; i < len; i++) { 
    text += cars[i] + "<br>";
}

 

而且您還可以省略語句 1(比如在迴圈開始前設置好值):

實例

var i = 2;
var len = cars.length;
var text = "";
for (; i < len; i++) { 
    text += cars[i] + "<br>";
}

 

語句 2

通常語句 2 用於計算初始變數的條件。

但情況並不總是這樣,JavaScript 不會在意。語句 2 也是可選的。

如果語句 2 返回 true,那麼迴圈會重新開始,如果返回 false,則迴圈將結束。

如果省略語句 2,那麼必須在迴圈中提供一個 break。否則迴圈永遠不會結束。請在下一章閱讀更多關於 break 的內容。

語句 3

通常語句 3 會遞增初始變數的值。

但情況並不總是這樣,JavaScript 不會在意。語句 3 也是可選的。

語句 3 可做任何事情,比如負遞增(i--),正遞增(i = i + 15),或者任何其他事情。

語句 3 也可被省略(比如當您在迴圈內遞增值時):

實例

var i = 0;
var len = cars.length;
for (; i < len; ) { 
    text += cars[i] + "<br>";
      i++;
}

 

For/In 迴圈

JavaScript for/in 語句遍歷對象的屬性:

實例

var person = {fname:"Bill", lname:"Gates", age:62}; 

var text = "";
var x;
for (x in person) {
    text += person[x];
}

 


您的分享是我們最大的動力!

更多相關文章
  • css3 實現右箭頭→ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> .divtest{ position: absolute; top: ...
  • 1. 綁定事件的相容 function addEventListener(element,type,fn) { if(element.addEventListener){ element.addEventListener(type,fn,false); }else if(element.attach ...
  • 解綁事件 註意:用什麼方式綁定事件, 就應該用對應的方式解綁事件 1.解綁事件 對象.on事件名字=事件處理函數 >綁定事件 對象.on事件名字=null; //1 對象.on事件名字=事件處理函數 綁定事件 my$("btn").onclick = function () { console.lo ...
  • 總結綁定事件的區別: addEventListener(); attachEvent() 相同點: 都可以為元素綁定事件 不同點: 1.方法名不一樣 2.參數個數不一樣addEventListener三個參數,attachEvent兩個參數 3.addEventListener 谷歌,火狐,IE11 ...
  • 群聊版 安裝 pipinstallgevent-websocket 視圖 #-*-coding:utf-8-*- importjson fromflaskimportFlask,request,render_template fromgeventwebsocket.handlerimportWebS... ...
  • part4 課程介紹 事件 1. 綁定事件的區別 2. 移除綁定事件的方式及區別和相容代碼 3. 事件的三個階段 4. 事件冒泡 5. 為同一個元素綁定多個不同的事件,指向的是同一個事件處理函數 6. 百度的大項目 7. BOM 8. 定時器 9. DOM加強,多個幾個好玩的案例 part3 複習 ...
  • 一、解決什麼問題 1、如果a.js和b.js都引用了common.js,那在打包的時候common.js會被重覆打入到a.js和b.js,造成重覆打包 2、單獨打包common.js對性能有幫助,瀏覽器下載一次後會緩存下來,不會重覆下載 二、未抽取公共代碼的狀況 基於之前代碼,測試如下: 1、在as ...
  • 盒子模型 邊框:border 左邊框:border left 右邊框:border right 上邊框:border top 下邊框:border bottom 複合樣式:border 邊框顏色:border color 邊框寬度:border width 邊框樣式:border style 實線: ...
一周排行
  • 【五分鐘的dotnet】是一個利用您的碎片化時間來學習和豐富.net知識的博文系列。如果您現在正在使用.NetCore的話,相信您對await 和 async這兩個關鍵字再熟悉不過了。它們是為非同步編程提供的語法糖,便於我們在代碼中更便捷的進行非同步操作。await 和 async其實是對Task對象都... ...
  • .NET基金會是一個獨立的非營利組織,於2014年成立,旨在圍繞 .NET 不斷增長的開源技術集合,促進開放開發和協作。它是商業和社區開發人員的論壇,通過促進開放性,社區參與和快速創新來增強.NET生態系統的未來。要使.NET 基金會真正獨立並由社區運營,則需要獨立資助。過去,.NET 基金會依靠來... ...
  • 微信公眾號: "Dotnet9" ,網站: "Dotnet9" ,問題或建議: "請網站留言" , 如果對您有所幫助: "歡迎贊賞" 。 .NET CORE(C ) WPF 方便的實現用戶控制項切換(祝大家新年快樂) 快到2020年了,祝大家新年快樂,今年2019最後一更,謝謝大家支持! 閱讀導航 1 ...
  • 內容有點多,請耐心! 最近公司的有這個業務需求,又很湊巧讓我來完成: 首先想要對接,先要一個公眾號,再就是開發文檔了:https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html 不過請註意這一點 ok, ...
  • MyBatis MyBatis是Apache的一個開源項目iBatis, iBatis一詞來源於“internet”和“abatis”的組合,是一個基於Java的持久層框架。 iBatis 提供的持久層框架包括SQL Maps和Data Access Objects(DAO) Mybatis 是一個 ...
  • 前言 Stanley B.Lippman 先生所著的《C++ Primer》是學習C++的一本非常優秀的教科書,但《C++ Primer》作為一本大部頭書,顯然不適合所有的初學者。所以Lippman先生又返璞歸真地寫了這本短小輕薄的《Essentia C++》。這本書以簡短的章節篇幅,幫助初學者快速... ...
  • 大數據環境需要的安裝包合集,包括: apache flume 1.7.0 bin.tar.gz apache hive 1.2.1 bin.tar.gz hadoop 2.7.2.tar.gz hbase 1.3.1 bin.tar.gz jdk 8u144 linux x64.tar kafka_ ...
  • 在項目當中資料庫一般都會成為主要的性能與負載瓶頸,那麼針對資料庫各項性能指標的監控與對應的優化是開發與運維人員需要面對的主要工作,而且這部分的工作會貫穿項目從開發到運行的整個周期里。 這篇文章中我們對MySql資料庫中的幾個主要的性能指標的計算與統計進行下說明與總結。 在MySql中通過show g ...
  • 1. Cookie Cookie,有時也用其複數形式Cookies,指某些網站為了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數據(通常經過加密)。Cookie最早是網景公司的前雇員Lou Montulli在1993年3月的發明。Cookie是由伺服器端生成,發送給User-Agen ...
  • 1. PreparedStatement預編譯的語句對象 預編譯語句PreparedStatement 是java.sql中的一個介面,它是Statement的子介面。通過Statement對象執行SQL語句時,需要將SQL語句發送給DBMS,由 DBMS首先進行編譯後再執行。預編譯語句和State ...
x