javascript循環語句哪幾種

循環語句有：1、for迴圈；2、「for...in」迴圈；3、while迴圈；4、「do…while」迴圈；5、forEach迴圈；6、map；7 、filter過濾循環；8、「Object.keys」遍歷物件的屬性。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

專案開發中，不管是建立在哪個框架基礎上，對資料的處理都是必須的，而處理資料離不開各種遍歷循環。 javascript中循環遍歷有很多種方式，記錄下幾種常見的js循環遍歷。

一、for迴圈

for 語句主要用來執行確定執行次數的迴圈。

for 語句的基本語法如下：

for([初始值表达式]；[条件表达式]；[增量表达式]){
   循环体语句；
}

說明：

• 「初始值表達式」：為循環變數設定初始值；

• 「條件式」：作為是否進入循環的依據，可以是任意表達式，但一般為關係式表達式或邏輯表達式，取值為真或假。每次要執行循環之前，都會進行條件表達式值的判斷。如果值為真（值為true 或非0 或非空），則執行循環體語句；否則就退出迴圈並執行迴圈語句後面的程式碼；

• 「增量表達式」：根據此表達式更新循環變數的值。

上述 3 個表達式中的任一個都可以省略，但要注意的是，for() 中的;不可以省略。所以如果 3 個表達式都省略時，for 語句變成：for(;;){循環體語句}。此時要注意的是，如果循環體內沒有退出循環的語句，將會進入死循環。

範例：

     var sum = 0;
     for(var i = 1; i <= 100;i++){        //在for语句中使用var声明循环变量，使代码更简洁
         sum += i;
     }
     alert("1～100的累加和sum=" + sum);

二、for...in

#for...in迴圈主要針對於物件的遍歷，當想要取得物件的對應鍵值時，使用for...in還是比較方便的

var a = [1, 2, ,,,,,,true,,,,,,, "a",,,,,,,,,,,,,,,4,,,,,56,,,,,,"b"];  //定义数组
var b = [], num = 0;
for (var i = 0; i < a.length; i ++) {  //遍历数组
    if (typeof a[i] == "number")  //如果为数字，则返回该元素的值
        b.push(a[i]);
    num ++;  //计数器
}
console.log(num);  //返回42，说明循环了42次
console.log(b);  //返回[1,2,4,56]

三、while迴圈

while 語句是最常用的一種循環語句，在程式中常用於只需根據條件執行迴圈而不需關心循環次數的情況。

while 语句的基本语法如下：
while(条件表达式){
     循环体;
}

說明：

• 條件式：為循環控制條件，必須放在圓括號中，可以是任意表達式，但一般為關係式表達式或邏輯表達式，取值為真或假。注意：值為 true、非 0、非空的都是真值，反之則為假值。

• 迴圈體：代表需要重複執行的操作，可以是簡單語句，也可以是複合語句。當為簡單語句時，可以省略大括號{}，否則必須使用大括號{}。

while 語句在執行時，首先判斷條件表達式的值，如果為真，則執行循環體語句，然後再對條件表達式進行判斷，如果值還是為真，則繼續執行迴圈體語句；否則執行while 語句後面的語句。如果表達式的值在第一次判斷就為假（為 false 或 0 或為 null 等值），則一次也不會執行迴圈體。

要注意的是，為了讓while 迴圈能正常結束，迴圈體內應該要有修改循環條件的語句或其他終止迴圈的語句，否則while 迴圈會進入死循環，也就是會一直循環不斷地執行循環體。

例如，下面的迴圈語句就會造成死迴圈。

var i=1,s=0;
whiel(i<=5){
    s+=i;      
}

上述程式碼中 i 的初始值為 1，由於循環體內沒有修改 i 變數的值，所以表達式 i<=5 永遠為真，因而循環體會一直執行。

死循環會大幅佔用系統資源，最終有可能導致系統崩潰，所以我們編程時一定要注意避免死循環。

     var sum = 1, i = 1;
     var ex = 1;
     while(sum <= 1.5){
         sum += 1/((i + 1)*(i + 1));
         if(sum > 1.5)
              break;
         i++;
         ex +=" + 1/(" + i + "*" + i + ")";
     }
     alert("表达式的值小于等于1.5时的i=" + i + "，对应的表达式为：" + ex);

四、do…while迴圈

do…while 語句是 while 語句的變形。兩者的差別在於，while 語句把迴圈條件判斷放在迴圈體語句執行的前面，而 ​​do…while 語句則把迴圈條件判斷放在迴圈體語句執行的後面。

do…while 語句的基本語法如下：

do{
  循环体;
}while (条件表达式);

「條件式」和「迴圈體」的意思與 while 語句的相同。在此需要注意的是，do…while 語句最後需要使用;結束，如果程式碼中沒有加上;，則 JavaScript 會自動補上。

do…while 語句在執行時，先執行迴圈體語句，然後再判斷條件運算式的值，如果值為真（值為 true 或非 0 值），則再次執行迴圈體語句。 do…while 語句至少會執行一次迴圈體，這一點和 while 語句有顯著的差異。

     var sum = 1, i = 1;
     var ex = 1;
     do{
         sum += 1/((i + 1)*(i + 1));
         if(sum > 1.5)
              break;
         i++;
         ex +=" + 1/(" + i + "*" + i + ")";
     }while(sum <= 1.5);
     alert("表达式的值小于等于1.5时的i=" + i + "，对应的表达式为：" + ex);

五、forEach

 forEach的使用方法和map使用方法差不多,只是forEach方法不回傳值，只用來操作數據，且循環中途是無法停止的，總是會將所有成員遍歷完

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

六、map

map方法將數組的所有成員依次傳入參數函數，然後把每一次的執行結果組成一個新數組傳回。 循環中途是無法停止的，總是會將所有成員遍歷完

#

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
      return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]

map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.map((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

七、filter过滤循环

filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === 'xiaohua')
})
console.log(arr2)  // [{id:1,name:'xiaohua}]

ECMAScirpt5 中 Array 类中的 filter 方法使用目的是移除所有的 ”false“ 类型元素 (false, null, undefined, 0, NaN or an empty string)：

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew)  //  [3, 4, 5, 2, 3]

Boolean 是一个函数，它会对遍历数组中的元素，并根据元素的真假类型，对应返回 true 或 false.

八、Object.keys遍历对象的属性

Object.keys方法的参数是一个对象，返回一个数组。该数组的成员都是该对象自身的（而不是继承的）所有属性名，且只返回可枚举的属性。

let obj = {name: 'xiaohua', sex: 'male', age: '28'}
console.log(Object.keys(obj))
// ["name", "sex", "age"]

判断一个对象是否是空对象，可以用Object.keys(obj).length>0

【推荐学习：javascript高级教程】

以上是javascript循環語句哪幾種的詳細內容。更多資訊請關注PHP中文網其他相關文章！