JavaScript 開發必須掌握技能（三）- 更好的使用for迴圈方法

版權聲明：本文轉載至CSDN博主「詩人與黑客」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_41899174/article/details/82797089
感謝博主，感謝分享，對於for迴圈咋們不能遇到數組、對象等列印別一上來就常規迴圈for（var i=0;i<arr.length;i++）{...}，還是讓自己編寫的代碼動起來，可讀性好起來，代碼數量簡潔些。原計劃做一份自己的for迴圈方法總結，在網上搜索下for迴圈的介紹很多很多，我覺得該文挺全面的，自己做不一定做的這麼詳細，所幸直接轉載博主的文章，分享保留。自己能夠靈活的去使用這才是最好的。這也是在工作後開始寫博客，覺得意義挺大的，因為在工作中一些基礎的方法都還需要去找百度，沒能對知識做一個沉澱。通過博客筆記本隨時翻閱，對自己很定是極大的幫助的，畢竟自己的筆記和別人的筆記是有區別的。不多說，乾就完了。

有的方法我們在前面的隨筆中也曾提及過，這裡當做在次鞏固吧！

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

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種迴圈中，絕對有你有需要的。
同學們，如果你覺得我的文章寫的好，可關註博主微信公眾號是：“Java深度編程”，“詩人與黑客”。也可關註作者，後續將繼續更新中

三、最後加一種for...of迴圈的常用場景

　　for...of 語句創建一個迴圈來迭代可迭代的對象。在 ES6 中引入的 for...of 迴圈，以替代 for...in 和 forEach() ，並支持新的迭代協議。for...of 允許你遍歷 Arrays（數組）, Strings（字元串）, Maps（映射）, Sets（集合）等可迭代的數據結構等。

1. 數組迭代

　　for...of 最常見的應用是對數組項進行迭代。該迴圈可以高效得完成迭代，而無需其他變數來保持索引。

const array = ['Strawberry', 'Apple', 'Banana'];
 
for (const value of array) {
  console.log(value);
}
// Strawberry
// Apple
// Banana

2. 遍歷一個對象數組

var fruits = [{name:'Strawberry'},{name: 'Apple'},{ name:'Banana'}];

for (var {name} of fruits) {
    console.log(name);
}

//Strawberry 
//Apple 
//Banana

 3.迭代String

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"

4.迭代Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ["a", 1]
// ["b", 2]
// ["c", 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

5.迭代Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

6.迭代arguments對象

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3
// arguments 是函數體內的特殊變數，包含函數的所有參數，這是一個經典的類數組對象。

7.迭代DOM集合

迭代 DOM 元素集合，比如一個NodeList對象：下麵的例子演示給每一個 article 標簽內的 p 標簽添加一個 "read" 類。

//註意：這隻能在實現了NodeList.prototype[Symbol.iterator]的平臺上運行
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

學無止境，更多方法，建議去看看 MDN 文檔 以尋找更好的方法。