循環的定義

在計算機編程中，Loop是一個重復特定代碼塊的過程。

Javascript的循環類型

在Javascript中有七種循環類型。我們已經把它們列出來，這樣可以幫助你更清楚地了解他們的工作流程和使用情況。本文還將幫助你區分這七種循環類型，比如在哪里、何時或如何使用它們。讓我們開始吧。

while循環

while循環是Javascript中可用的最基本的循環類型之一。你一定聽說過，Javascript不是唯一的編程語言。

while語句生成一個循環，在條件為true的情況下，在一個特定的語句塊中執行該循環。每次執行代碼塊之前，條件都會被檢查。

語法

while (條件) {    // 代碼塊}

示例

var i = 8;while (i < 10) {
    console.log('我小于10')
    i++
}

在上面的例子中，條件(i < 10)先會被檢查，如果條件為true，while中的代碼塊就會被執行，而且再下一次迭代之前，i的值將增加1，主要是因為我們已經添加了一個i++語句。

do-while循環

do-while和while略有不同，因為它包含一個額外的特性，最少執行一次。

語法

do {    // 代碼塊}while (條件)

示例

var i = 8;do {
    console.log('我的值是' + i)
    i++
}while (i > 7 && i < 10)

你可以看到，我們的條件是(i > 7 && i < 10)，但i=7的時候值已經打印出來了。因為這個循環技術首先執行代碼塊，而不是考慮條件，執行完代碼塊之后，在第二輪的時候才執行條件。對于第二次循環遍歷代碼塊時，只有條件為true才將執行。

for循環

while循環和for循環的工作方式完全相同，即使執行時間也沒有太大差別。那么，另一個提供相同功能的循環系統需要什么呢？

在for循環中，循環的變量聲明和初始化，條件查詢和循環變量的遞增或遞減都可以在相同的行中完成。它增加了可讀性，降低了出錯的幾率。

語法

for ([變量初始化];[條件];[變量遞增或遞減]) {    // 代碼塊
}

示例

for (var i = 0; i  < 10; i++) {
    console.log('我的值是： ' + i)
}

正如上面的示例所示，變量初始化i = 0，條件i < 10和變量的遞增i++都在同一行中聲明。它更容易理解，可讀性更好，是不是？

for循環的使用和前面所說的while循環完全相同。但是為了讓代碼更容易閱讀和理解，大多數的時候我們使用for循環而不是while循環。

forEach()

它是數組的原型方法（甚至是map和set）。forEach()方法根據索引順序index，每次使用數組中的每個元素調用一個給定的函數（或回調函數）。注意，forEach()沒有對沒有值的數組元素運行給定的函數。

語法

array.forEach(function(currentValue, index, array){    // 函數主體})

forEach()方法以函數作為參數。該函數由三個參數組成：

• currentValue：保存正在處理的當前值

• index：保存該特定數組中的值的索引

• array：保存了整個數組

你可以使用forEach()遍歷一個集合set，也可以使用它迭代一個映射map。

示例

var array = [10, 20, "hi", , {}, function () {console.log('我是一個函數')}]array.forEach(function(item, index){
    console.log('array [' + index + '] 是： '+ item)
})

forEach()方法遍歷的是array數組。如果你沒有使用索引index，你只能使用array.forEach(function(item){})。可以相應地使用參數，但不是每次都要使用這三個參數。

使用forEach()讓我們遍歷數組變得非常的簡單。不必擔心循環變量、條件和其他任何東西，它會處理所有迭代的問題。

forEach()和for的區別

你可以使用一個從0開始到array.length（該數組長度）簡單的遍歷一個數組。那么為什么還要提出不同的選擇呢？

一個經驗法則是，如果你可以選擇使用原型方法，你就應該使用原型方法。因為，原型方法更清楚地知道對象，并對最佳方法進行了優化。下面這個示例能更好的來說明他們的區別之處：

var arr = [];
arr[0]=0;
arr[10]=10;for(var i=0; i<arr.length; i++){
    console.log("I am for:" + i);
}

arr.forEach(function(){
    console.log("I am forEach");
});

如果你運行上面的代碼，你會發現for打印了11次，而forEach()只打印了兩次：

原因是，for循環是一個簡單的for循環，對它的用途一無所知。它從0到arr.length。然而，當你使用forEach()的時候，它知道arr只有兩個元素，雖然長度是10。累此，它實際上只迭代了兩次。

根據這個，如果你想在循環中跳過繁重的工作，迭代一個iterable，你應該使用forEach()。然而，僅僅迭代（相同數量的迭代）的迭代時間相對于for循環來說是次要的。因為迭代性能更好。

map()

map是數組的另一個原型方法。map()方法將創建一個新的數組，該數組的返回值由一個給定的數組的函數執行生成。

語法

var newArray= oldArray.map(function (currentValue, index, array){    //Return element for the newArray});

map()方法以函數作為參數，該函數有三個參數：

• currentValue： 在數組中處理的當前元素

• index：數組中正在處理的當前元素的索引值

• array：數組映射的調用

示例

var num = [1, 5, 10, 15];var doubles = num.map(function(x) {    return x * 2;
});

在上面的示例中，名為doubles的新數組將輸出doubles=[2, 10, 20, 30]和num數組仍舊是num=[1, 5, 10, 15]。

for…in

這個方法主要是對象的迭代。for...in在語句中迭代對象的可枚舉屬性。對于每個不同的屬性，可以執行語句。

因為我們知道數組也是一種特殊的對象，所以不要認為數組不能用這個來進行迭代。

語法

for (variableName in object) {
    Block of code
}

示例

var obj = {a: 1, b: 2, c: 3};    
for (var prop in obj) {
    console.log('obj.'+prop+'='+obj[prop]);
};

為什么在數組中使用for...in迭代不可取？

for...in不應該在數組迭代中使用，特別是index順序非常重要。

實際上，數組索引和一般對象屬性之間沒有區別，數組索引只是可枚舉屬性。

for...in不會每次都以任何特定的順序返回index值。for...in在迭代中，這個循環將返回所有可枚舉屬性，包括那些具有非整數名稱的屬性和繼承的屬性。

因此，建議在遍歷數組時使用for或forEach()。因為迭代的順序是依賴于現實的迭代，并且遍歷一個數組，使用for...in可能不會以一致的順序訪問元素。

var arr = [];
arr[2] = 2;
arr[3] = 3;
arr[0] = 0;
arr[1] = 1;

在這種情況下，使用forEach()將輸出一個0, 1, 2, 3。但使用for...in并不能保證會輸出什么。

對于for...in還有一件事你應該記住，它遍歷對象的所有屬性，包括繼承的（來自父類）。如果只想在對象自己的屬性上進行迭代，那么應該執行下面這樣的操作：

for(var prop in obj){    if(obj.hasOwnProperty(prop)){
        Code block here
    }
}

for…of

這是ES6中新引入的一種循環類型。使用for...of語句，你可以遍歷任何可迭代的對象，比如Array、String、Map、WeakMap、Set、參數對象、TypeArray，甚至一般對象。

語法

for (variable of iterable) {
    Block of code
}

示例

var str= 'paul';for (var value of str) {
    console.log(value);
}

map的迭代

let itobj = new Map([['x', 0], ['y', 1], ['z', 2]]);for (let kv of itobj) {
    console.log(kv);
}// => ['x', 0]// => ['y', 1]// => ['z', 2]for (let [key, value] of itobj) {
    console.log(value);
}// => 0// => 1// => 2

for...in循環主要遍歷對象，其實際的插入順序中是可枚舉的屬性；for...of迭代任何可迭代對象的給定值（而不是屬性名）。

Object.prototype.objProto = function() {}; 
Array.prototype.arrProto = function() {};let iterable = [8, 55, 9];
iterable.title = 'VoidCanvas';for (let x in iterable) {
    console.log(x); // logs 0, 1, 2, title, arrProto, objProto}for (let i of iterable) {
    console.log(i); //  8, 55, 9}

正如你所見，for...of都是關于對象自己value的迭代，而for...in將會考慮原型和繼承的屬性。如果你想在對象上迭代（而不是迭代）。for...of將會考慮它自己的所有屬性，但迭代的情交下，它只會考慮適合這種迭代的元素。這就是為什么在上面的例子中，for...of沒有迭代屬性。

相關推薦：

JS實現文字間歇循環滾動

以上就是Javascript中循環類型總結分析的詳細內容，更多請關注php中文網其它相關文章！