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 檔案 以尋找更好的方法，

標籤：JavaScript

上一篇：JavaScript進階篇-JS基礎語法

下一篇：wx.request(Object object) HTTPS 網路請求 封裝