首頁 > web前端 > js教程 > javascript每日必學之循環_javascript技巧

javascript每日必學之循環_javascript技巧

WBOY
發布: 2016-05-16 15:14:41
原創
1287 人瀏覽過

朋友們大家好,今天,我們繼續接著前面的內容講,前們我們已經講了條件分支,今天我們就講循環,顧名思義就是,重複執行相同的操作,正常循環是受程序控制的,不正常的狀況,就會出現死循環,那就是我們的程式碼中出現bug,那樣,我們還要學會調式bug,等我們先把基礎知識講完了之後,我還會專門用篇幅來講解瀏覽器裡面的調試,那種程式就會在我們掌控之中,這才是我們想要結果。

  循環包含的結構體有for , while , do--while,for循環有兩種形式的存在,一種是數字變數變化所引起的循環,另一種就是for...in形式,是屬性或下標所造成的迴圈變化,但for...in不是關鍵,關鍵還是for,例如在C#語言中,它的名稱叫做foreach,好了,只是一個稱謂而已,沒有別的不同,我講到的時候,再仔細說。

  從for開始

for(var i = 0;i<10;i++){
  console.log(i);
}
登入後複製

(這裡用到了一個新的運算符,也是前面我所講漏了的,但是,大家一看就明白,小於運算符,運算返回結果是布林值(true,false))

這裡成功地印出了1到9,看到上面的4個執行步驟,第一步(宣告變數),只執行一次;接著第二步判斷條件是否成立(跟if後面的條件接收一樣的類型),如果成立,緊跟著就執行循環體裡面的內容,這裡視為第三步,第三步執行完了之後,就是執行第四步讓變數變化;然後,再執行第二步,判斷是否成立。至此已經接上頭了,然後循環就是這樣交替的。

註:解釋一下第四步i++ 我們可以這樣理解i = i + 1;一下子就明白了,前面聲明了i = 0;那麼i = i + 1 就是讓i 重新賦值,就是使其變化,i = 0 + 1;這樣  i 就變成了1,當執行完了一圈的時候打印出的是0,i 就變成了1,第二圈執行完的時候,打印是1, i 就變成了2,…,第10圈執行完時,印製的是9,i 就變了10,當再次去第二步執行判斷時,i < 10 就是10 < 10,返回的是false,所以不成立,這樣後面就不再繼續。

上面我們已經講到的控制,是完全按我們的意圖執行了10次,如果是同樣的條件 ,我們中途時可不可以跳出循環呢?答案是肯定可以的,這就要使用我們已經了解過的一個關鍵字了 break 下在我們來看看範例程式碼

for(var i = 0;i<10;i++){
  console.log(i);
  //当i等于5的时候,我们就跳出循环
  if(i == 5){
    break;
  }
}
登入後複製

看到了吧,只要在滿足我們的條件時候,我們想在什麼時候跳出循環,都是可以的,這就強制打斷了後面的步驟執行。

既然有強制打斷,那麼,我就想問了,還有沒有強制繼續循環呢?答案還是肯定可以的,我們就要用一個新的關鍵字continue

for(var i = 0;i<10;i++){
  //当i小于5的时候,我们强制循环
  if(i < 5){
    continue;
  }
  console.log(i);
}
登入後複製

是不是達到了我們想要的效果呢,當i 小於5的時候,我們就強循環了,後面的打印都還沒執行,就繼續下一次的循環,當i 大於或等於5 的時候,我們才印出i 的值來。

下面我們就接著來講for...in,在這之前,我們得再了解一種資料類型,就是數組,前面我之所以沒有說,因為前面就算說了,大家也還不能理解,所以現在我們先來了解數組,我們這裡只說一維數組,現在還沒必要講二維以及多維數組,看範例程式碼

//声明一个数组,用中括号包含,组里面的内容单位用逗号分隔,数组可以包含各种类型的值
var arr = [1,2,"abc","MrDream",true,false,null];

//数组取值就是用下标来获取,在程序中,第一个值的下标就是0,第二个才是1,后面的以此类推
//在这里 arr 数组里面,我们放了7个值进去,所以最大的下标就是6

登入後複製

接下來,我們來看看怎麼來取得其中單一的值

arr[0] // 1
arr[1] // 2
arr[2] // "abc"
arr[3] // "MrDream"
arr[4] // true
arr[5] // false
arr[6] // null
登入後複製

我們來執行一下,看看是不是這樣的

跟我們預想中的一樣吧

從上面的例子, 我們可以這樣拿到數組中的值,並且印出來,但是每次都這樣寫是不是很麻煩呢?對了,我們就可以使用循環了

var arr = [1,2,"abc","MrDream",true,false,null];

for(var i = 0;i<7;i++){
  console.log(arr[i]);
}

登入後複製

哈哈,看到循环的神奇之处了吧,就是这么的方便,但是这里,我们是用的一个变量来模拟的下标,下面我就用for...in来循环

var arr = [1,2,"abc","MrDream",true,false,null];

for(var i in arr){
  console.log(arr[i]);
}
登入後複製

for...in在javascript中就是用来循环 数组的下标和对象的属性,对象的属性以及对象,我们后面再说,现在我们只说数组,我现在来解释一下for...in这种写法的执行步骤,var i用来声明一个变量下标(针对数组),in 用来指定在哪个集合里面,依次取得下标,如果数组里面没有东西,循环也将会直接终止。这个理解比前面的理解要抽象,大家多写几次就会理解了。

现在我们来验证一下,在数组中,我们取得的变量是不是下标

看到示例了吧,明显就是取得的下标。

下在我们就讲解新的循环方式 while

while(条件){
  //执行
}
登入後複製

现在大家看到条件两个字是不是再也不陌生了,还是跟if后面的条件使用同一类型,我们还是用售票来举个例子

var tickets = 10;//车票总数量

//条件,当车票数量大于0时,就执行售票行为
while(tickets > 0){
  console.log("目前还有"+ tickets +"张可售车票,下一位");//这里我们用到了字符串拼接
  tickets --; //卖出一张车票,我们就减少一张
}

登入後複製

注:在这里,我们又接触到一个前面没有提及到的运算符 -- ,就是使得变量自减1;和上面所说的 ++ 运算方式一样。

这里我们刚好执行10次售卖动作,是不是感觉这种写循环方式很简单呢?就这么一下下,我们就把它给理解透彻了,首先就是判断条件是否成立,如果成立,就执行循环体里面的行为,直到条件不成立为止。说到这里,大家是不是觉得很疑惑,这种循环,只有条件,成立时,才执行里面的循环,和前面的for循环,差不多,只有先满足条件,然后才执行里面的内容。那么有没有一种循环式,是先执行一次循环体内容,然后才来判断条件是否成立?问得好,我们就是需要这样的研究精神,然后,javascript语言也没有让我们失望,他还真有这样循环体,那就是do...while;下面我们先看语法

do{
  //执行
}while(条件)
登入後複製

这里就是先执行一次循环体里面的内容,然后再来判断条件是否成立,如果条件成立,那么就又循环前面的内容执行

下面我们就以人生励志赚钱为例进行讲解 路人甲想取媳妇,但是只有10万元存款,但是取媳妇需要50万,那么怎么办,只有辛苦工作了,当有足够多的存款的时候,就可以高高兴兴地取媳妇了

var money = 100000; //路人甲有10万元存款

do{
  console.log("辛苦工作1年,存下了10万"); 
  money += 100000; //工作后,有钱了,就修改一次变量
}while(money < 500000); //条件是,存款不足50万,又继续执行工作行为

登入後複製

看到了吧,没有钱,就先去努力赚钱,路人甲 同学经过4年的不懈努力,终于存够了50万(因为他之前已经有10万元了),终于取上媳妇了,过上了幸福美满的生活。我们也要努力了。

这样讲大家是不是一下就理解了do...while循环的方式了呢。

总结一下,我们今天讲解了循环,包括了4种循环方式 for  、 for...in   、 while   、 do...while,大家是不是已经学会了呢,看一遍不过瘾,我们还可以多看几遍,今天所讲的东西,理解上是有一些小困难,但多写多练,自然就能熟练使用了。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板