方式一： 原生的 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 // 2
Object.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種循環中，絕對有你有需要的。
文章來自：https://blog.csdn.net/qq_41899174/article/details/82797089