js的15種回圈遍歷，你掌握了幾種【轉】

目錄

• 方式一： 原生的 js 回圈
  • 1.while 回圈
  • 2. do……while回圈
  • 3.for回圈
  • 4.增強for…in回圈
  • 5.map()回圈
  • 6.forEach回圈
  • 7.filter()過濾回圈
  • 8.some()，every()回圈遍歷，統計陣列是否滿足某個條件
  • 9.reduce()，reduceRight()方法可依次處理陣列的每個成員
  • 10.Object,keys遍歷物件的屬性
  • 11.Object.getOwnPropertyNames()遍歷物件的屬性
• 以上回圈特征（相同與不同）：
  • 一：map()，foreach，filter回圈的共同之處：
  • 二：map()回圈和forEach回圈的不同：
  • 三：map(環和filter()回圈都會跳過空位，for和while不會
  • 四：some()和every():
  • 五：reduce()，reduceRight()：
  • 六：Object物件的兩個遍歷Object.keys與Object.getOwnPropertyNames：
• 方式二： 使用JQuery 的遍歷：
  • 1. $.grep()篩選遍歷陣列
  • 2.$.each()篩選遍歷陣列或json物件
  • 3.$.inArray()篩選遍歷陣列
  • 4.$.map()篩選遍歷陣列

方式一： 原生的 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

標籤：JavaScript

上一篇：javascript實用寫法匯總

下一篇：JS控制下拉串列左右選擇實體代碼