js迴圈遍歷方法大全
1.while 迴圈:
While語句包括一個迴圈條件和一段程式碼塊，只要條件為真，就不斷迴圈執行程式碼塊。
while (條件) 語句;
// 或者 while (條件) 語句;
//舉例：
var i = 0; while (i < 100) {
console.log('i 當前為：' + i); i = i + 1;
}
2. do……while迴圈
do…while迴圈與while迴圈類似，唯一的區別就是先執行一次迴圈體，然後判斷迴圈條件。
do 語句 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"]
方式二： 使用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,
})
});