方式一： 原生的 js 迴圈1.while 迴圈

While語句包括一個迴圈條件和一段程式碼塊，只要條件為真，就不斷迴圈執行程式碼塊。while (條件) 語句;

//舉例：var i = 0; while (i < 100) {     console.log('i 當前為：' + i); i = i + 1; }

2. do……while迴圈

do...while迴圈與while迴圈類似，唯一的區別就是先執行一次迴圈體，然後判斷迴圈條件。do 語句 while (條件);

//舉例：var x = 3;var i = 0; do {     console.log(i); i++; } while(i < x);

3.for迴圈

for(var i=0;i<filterarray.length;i++){alert(filterarray[i]);}

4.增強for…in迴圈

var obj = {a: 1, b: 2, c: 3}; for (var i in obj) {     console.log('鍵名：', i);     console.log('鍵值：', obj[i]); } // 鍵名： a // 鍵值： 1 // 鍵名： b // 鍵值： 2// 其中 obj為迴圈的物件， i 為物件中的“鍵名”。如果物件是陣列，那麼i就是座標。

注意：fo…in迴圈一般用於物件的遍歷，但是這裡有一個坑需要注意： 任何物件都繼承了Object物件，或者其它物件，繼承的類的屬性是預設不可遍歷的，for... in迴圈遍歷的時候會跳過，但是這個屬性是可以更改為可以遍歷的，那麼就會造成遍歷到不屬於自身的屬性。 舉例來說，物件都繼承了toString屬性，但是for...in迴圈不會遍歷到這個屬性。

var obj = {};// toString 屬性是存在的obj.toString // toString() { [native code] }for (var p in obj) {      console.log(p);} // 沒有任何輸出

如果繼承的屬性是可遍歷的，那麼就會被for...in迴圈遍歷到。但如果只想遍歷自身的屬性，使用for...in的時候，應該結合使用hasOwnProperty方法，在迴圈內部判斷一下，某個屬性是否為物件自身的屬性。否則就可以產生遍歷失真的情況。

var person = { name: '老張' };for (var key in person) {      if (person.hasOwnProperty(key)) {            console.log(key);      }}// name

此外，for迴圈遍歷json物件有點奇葩：

無規律json陣列：

var json = [{dd:'SB',AA:'東東',re1:123}, {cccc:'dd',lk:'1qw'}]; for(var i=0,l=json.length;i<l;i++){    for(var key in json[i]){        alert(key+’:'+json[i][key]);    }}

為什麼要 l=json.length;i<l呢？小夥伴們自己思考下吧！哈哈哈哈……

有規律json陣列：

packJson = [    {"name": "nikita", "password": "1111"},    {"name": "tony", "password": "2222"}]; for (var p in packJson) {//遍歷json陣列時，這麼寫p為索引，0,1    alert(packJson[p].name + " " + packJson[p].password);}

5.map()迴圈

map方法將陣列的所有成員依次傳入引數函式，然後把每一次的執行結果組成一個新陣列返回。注意：是返回一個新陣列，而不會改變原陣列。

var numbers = [1, 2, 3];numbers.map(function (n) {      return n + 1; }); // [2, 3, 4] numbers // [1, 2, 3]

map方法接受一個函式作為引數。該函式呼叫時，map方法向它傳入三個引數：當前成員、當前位置和陣列本身。

[1, 2, 3].map(function(elem, index, arr) {     return elem * index; }); // [0, 2, 6]

此外，map()迴圈還可以接受第二個引數，用來繫結回撥函式內部的this變數，將回調函式內部的this物件，指向第二個引數，間接操作這個引數（一般是陣列）。

var arr = ['a', 'b', 'c'];[1, 2].map(function (e) {    return this[e];}, arr) // ['b', 'c']

上面程式碼透過map方法的第二個引數，將回調函式內部的this物件，指向arr陣列。間接操作了陣列arr; forEach同樣具有這個功能。

6.forEach迴圈

forEach方法與map方法很相似，也是對陣列的所有成員依次執行引數函式。但是，forEach方法不返回值，只用來操作資料。也就是說，如果陣列遍歷的目的是為了得到返回值，那麼使用map方法，否則使用forEach方法。forEach的用法與map方法一致，引數是一個函式，該函式同樣接受三個引數：當前值、當前位置、整個陣列。

function log(element, index, array) {     console.log('[' + index + '] = ' + element); } ；[2, 5, 9].forEach(log); // [0] = 2 // [1] = 5 // [2] = 9

此外，forEach迴圈和map迴圈一樣也可以用繫結回撥函式內部的this變數，間接操作其它變數（參考上面的map()迴圈例子）。

7.filter()過濾迴圈

filter方法用於過濾陣列成員，滿足條件的成員組成一個新陣列返回。它的引數是一個函式，所有陣列成員依次執行該函式，返回結果為true的成員組成一個新陣列返回。該方法不會改變原陣列。

[1, 2, 3, 4, 5].filter(function (elem) {     return (elem > 3); }) // [4, 5]

// 上面程式碼將大於3的陣列成員，作為一個新陣列返回。

var arr = [0, 1, 'a', false]; arr.filter(Boolean) // [1, "a"]

filter方法的引數函式也可以接受三個引數：當前成員，當前位置和整個數 組。

[1, 2, 3, 4, 5].filter(function (elem, index, arr) {     return index % 2 === 0; }); // [1, 3, 5]

此外，filter方法也可以接受第二個引數，用來繫結引數函式內部的this變數。

var obj = { MAX: 3 }; var myFilter = function (item) {     if (item > this.MAX) return true; }; var arr = [2, 8, 3, 4, 1, 3, 2, 9]; arr.filter(myFilter, obj) // [8, 4, 9]

上面程式碼中，過濾器myFilter內部有this變數，它可以被filter方法的第二個引數obj繫結，返回大於3的成員。

8.some()，every()迴圈遍歷，統計陣列是否滿足某個條件

這兩個方法類似“斷言”（assert），返回一個布林值，表示判斷陣列成員是否符合某種條件。

它們接受一個函式作為引數，所有陣列成員依次執行該函式。該函式接受三個引數：當前成員、當前位置和整個陣列，然後返回一個布林值。

some方法是隻要一個成員的返回值是true，則整個some方法的返回值就是true，否則返回false。

var arr = [1, 2, 3, 4, 5];arr.some(function (elem, index, arr) {  return elem >= 3;});// true

而every方法則相反，所有成員的返回值都是true，整個every方法才返回true，否則返回false。兩相比較，some()只要有一個是true，便返回true；而every()只要有一個是false，便返回false.

var arr = [1, 2, 3, 4, 5];arr.every(function (elem, index, arr) {  return elem >= 3;});// false

這兩個方法在實際開發中，大有可用之處。比如在判定使用者是否勾選了不可操作的資料，或者是否勾選了一條可以操作的資料可以使用這兩個方法遍歷迴圈陣列。

9.reduce()，reduceRight()方法可依次處理陣列的每個成員

reduce方法和reduceRight方法依次處理陣列的每個成員，最終累計為一個值。它們的差別是，reduce是從左到右處理（從第一個成員到最後一個成員），reduceRight則是從右到左（從最後一個成員到第一個成員），其他完全一樣。

[1, 2, 3, 4, 5].reduce(function (a, b) {  console.log(a, b);  return a + b;})// 1 2// 3 3// 6 4// 10 5//最後結果：15

reduce方法和reduceRight方法的第一個引數都是一個函式。該函式接受以下四個引數。

累積變數，預設為陣列的第一個成員當前變數，預設為陣列的第二個成員當前位置（從0開始）原陣列 這四個引數之中，只有前兩個是必須的，後兩個則是可選的。

如果要對累積變數指定初值，可以把它放在reduce方法和reduceRight方法的第二個引數。

[1, 2, 3, 4, 5].reduce(function (a, b) {  return a + b;}, 10);// 25

上面的第二個引數相當於設定了預設值，處理空陣列時尤其有用，可避免一些空指標異常。

由於這兩個方法會遍歷陣列，所以實際上還可以用來做一些遍歷相關的操作。比如，找出字元長度最長的陣列成員。

function findLongest(entries) {  return entries.reduce(function (longest, entry) {    return entry.length > longest.length ? entry : longest;  }, '');}findLongest(['aaa', 'bb', 'c']) // "aaa"

上面程式碼中，reduce的引數函式會將字元長度較長的那個陣列成員，作為累積值。這導致遍歷所有成員之後，累積值就是字元長度最長的那個成員。

10.Object,keys遍歷物件的屬性

Object.keys方法的引數是一個物件，返回一個數組。該陣列的成員都是該物件自身的（而不是繼承的）所有屬性名，且只返回可列舉的屬性。

var obj = {  p1: 123,  p2: 456};Object.keys(obj) // ["p1", "p2"]

11.Object.getOwnPropertyNames()遍歷物件的屬性

Object.getOwnPropertyNames方法與Object.keys類似，也是接受一個物件作為引數，返回一個數組，包含了該物件自身的所有屬性名。但它能返回不可列舉的屬性。

var a = ['Hello', 'World'];Object.keys(a) // ["0", "1"]Object.getOwnPropertyNames(a) // ["0", "1", "length"]

上面程式碼中，陣列的length屬性是不可列舉的屬性，所以只出現在Object.getOwnPropertyNames方法的返回結果中。

由於 JavaScript 沒有提供計算物件屬性個數的方法，所以可以用這兩個方法代替。

var obj = {  p1: 123,  p2: 456};Object.keys(obj).length // 2Object.getOwnPropertyNames(obj).length // 2

以上迴圈特徵（相同與不同）：一：map()，foreach，filter迴圈的共同之處：

1.foreach，map，filter迴圈中途是無法停止的，總是會將所有成員遍歷完。

2.他們都可以接受第二個引數，用來繫結回撥函式內部的this變數，將回調函式內部的this物件，指向第二個引數，間接操作這個引數（一般是陣列）。

二：map()迴圈和forEach迴圈的不同：

forEach迴圈沒有返回值；map，filter迴圈有返回值。

三：map(環和filter()迴圈都會跳過空位，for和while不會

var f = function (n) {     return 'a' };  [1, undefined, 2].map(f) // ["a", "a", "a"] [1, null, 2].map(f) // ["a", "a", "a"][1, , 2].map(f) // ["a", , "a"]

上面程式碼中，map方法不會跳過undefined和null，但是會跳過空位。forEach方法也會跳過陣列的空位，這裡就不舉例了。

四：some()和every():

some()只要有一個是true，便返回true；而every()只要有一個是false，便返回false.

五：reduce()，reduceRight()：

reduce是從左到右處理（從第一個成員到最後一個成員），reduceRight則是從右到左（從最後一個成員到第一個成員）。

六：Object物件的兩個遍歷Object.keys與Object.getOwnPropertyNames：

他們都是遍歷物件的屬性，也是接受一個物件作為引數，返回一個數組，包含了該物件自身的所有屬性名。但Object.keys不能返回不可列舉的屬性；Object.getOwnPropertyNames能返回不可列舉的屬性。

方式二： 使用JQuery 的遍歷：1. $.grep()篩選遍歷陣列

grep()迴圈能夠遍歷陣列，並篩選符合條件的元素，組成新的陣列，並返回。

function(){    var array = [1,2,3,4,5,6,7,8,9];    var filterarray = $.grep(array,function(value){        return value > 5;//篩選出大於5的    });     for(var i=0;i<filterarray.length;i++){        alert(filterarray[i]);    }    for (key in filterarray){        alert(filterarray[key]);    }}

2.$.each()篩選遍歷陣列或json物件

function(){    var anObject = {one:1,two:2,three:3};//對json陣列each    $.each(anObject,function(name,value) {        alert(name);        alert(value);    });     var anArray = ['one','two','three'];    $.each(anArray,function(n,value){        alert(n);        alert(value);    });}

3.$.inArray()篩選遍歷陣列

inArray()迴圈能返回引數在陣列中對應的座標。

function(){    var anArray = ['one','two','three'];    var index = $.inArray(‘two’,anArray);    alert(index);//返回該值在陣列中的鍵值，返回1    alert(anArray[index]);//value is two}

4.$.map()篩選遍歷陣列

$().ready(    function(){        var strings = ['0','1','2','3','4','S','6'];        var values = $.map(strings,function(value){            var result = new Number(value);            return isNaN(result) ? null:result;//isNaN:is Not a Number的縮寫        });    for (key in values) {        alert(values[key]);    }});

map迴圈常用語往陣列中新增新元素，第二種寫法：

this.detEntityList.map(item => {    //往比遍歷到的物件中新增屬性    Object.assign(item, {        sourceType: item.businessType,    })});

map() 把每個元素透過函式傳遞到當前匹配集合中，生成包含返回值的新的 jQuery 物件。此用法與原生js的map迴圈用法一致。

哈哈哈哈，親愛的同學們，是不是感覺好多啊，其實不要特意去記憶啊，個人建議吧原生for迴圈，forEach迴圈，還有Juery的each熟悉就可以啦！如果你再開發者發現這幾個迴圈不好用的話，那就來我這裡找找看，這15種迴圈中，絕對有你有需要的。