前端常用循環方法整理

循環方法有很多，但是到底什麼場景適合什麼方法，今天我們就來簡單的剖析一下

1、for循環

• for循環最重要的是有三個表達式：定義變量，判斷條件，更新循環變量，三個表達式可以省略，但是分號不能省略。
• for循環的執行的時候是先判斷，然後再執行
• 使用場景：

    for(let i = 0; i < list.length; i++ ){
        console.log(list)
    }

2、for-in循環

• for-in循環不僅可以遍歷對象自身的屬性，也能遍歷原型鏈上的對象的原型屬性
• 擴展：可以使用hasOwnProperty判斷一個屬性是不是對象自身的屬性
• 使用場景：主要用於遍歷對象。也能遍歷字符串和數組(不推薦使用)
• 缺點：1、數組的鍵名是Number類型，但是使用for-in循環的時候他會將其轉化爲String類型,2、對象都繼承了自其它/Object對象，繼承屬性的值默認是不可遍歷的，但是for循環會遍歷，原型鏈上的屬性，我們使用的時候需要注意些。

    for(let key in Obj){
        console.log(Obj[key])
    }

3、for-of循環

• ES6最新引入的，用以遍歷所有的數據結構的統一方法
• 如果一個數據結構上只要有Symbol.iterator屬性，就被視爲具有iterator接口，這類的數據就可以被for…of循環。本質上for…of循環內部調用的是數據結構的Symbol.iterator方法
• 使用場景：包括數組，Set和Map結構，類數組對象（arguments，DOM NodeList對象）Generator 對象，字符串
• 缺點：

    for (const iterator of result) {
      console.log(iterator);
    }

4、forEach循環

• 對數組的所有成員依次執行參數函數，
• 參數函數接收三個參數，當前值，當前序號，原數組
• forEach還接受第二個參數，用來指定參數函數內的this指向

    result.forEach((item,index,arr)=>{
      console.log(item)
    },result)

5、map循環

• 將數組所有成員一次傳入參數函數，然後把每次的結果組成一個新數組返回，
• 參數函數接收三個參數，當前值，當前序號，原數組
• 循環的時候會跳過空位
• map還接受第二個參數，用來指定參數函數內的this指向

    const result = [1, 2, 3, 4];
    let results = result.map((item, index, arr)=>{
      return n + 1;
    },result);
    console.log(results); [2, 3, 4, 5]

6、filter循環

• 用於過濾數組成員，將滿足條件的數組成員組合成一個新數組返回，不會改變原數組
• 參數函數接收三個參數，當前值，當前序號，原數組
• 循環的時候會跳過空位
• 還接受第二個參數，用來指定參數函數內的this指向

    let results = result.filter((item,index,arr)=>{
      console.log(item)
    },result)

7、while循環

• while循環要先聲明循環變量，設置循環條件，只要條件爲真就會一直循環
• 在while循環中，循環條件可以是任何類型，但是最終都會轉換爲Boolean類型，爲真則執行循環，爲假則不執行
• 使用場景：

    while (condition) {
      console.log(condition)
    }

8、do…while循環

• 先執行後判斷，

    do {
      console.log(condition)
    } while (condition);

9、some(),eveny() 循環遍歷統計數是否滿足某個條件，

• 將數組的參數傳遞進參數函數中，參數函數接受三個參數，當前值，當前值位置，原數組
• some()：只要有一個是true，則some函數的返回值就是true。否則返回false
• every()：所有成員返回true，則every函數返回值就是true，否則返回false

    let res = result.some((item, index, arr) => {
      return item < 2;
    });
    
    let res = result.every((item, index, arr) => {
      return item < 2;
    });

10、reduce()，reduceRight()方法可依次處理數組的每個成員

• reduce() 和 reduceRight()依次處理數組的每個成員，最終累計爲一個值。
• 區別是：reduce正序，reduceRight倒序
• 參數函數接受4個參數：累計變量(必須)，當前變量(必須)，當前位置，原數組

    let res = result.reduce((sum, item, index, result) => {
      return sum + item;
    });
    
    let res = result.reduceRight((sum, item, index, result) => {
      return sum + item;
    });