技術標籤：jsjsfor迴圈陣列遍歷方法迭代

前言

早就想寫一篇部落格來談談js中的迴圈和一些迴圈的方法，這次有時間來說說。

正文

一. for類迴圈

1. for — 傳統的方式

    for (let index = 0; index < arr.length; index++) {
        console.log(arr[index])
    }

• 範圍： 可遍歷陣列，不可遍歷物件

• 迭代中的增減： 在遍歷的過程中，如果對陣列進行shift,unshift,pop,push，增加的元素會被遍歷，刪除的元素不會被遍歷，但已迭代過的元素被刪除（即使用shift）會跳過一個或一些元素

• 跳出迴圈的方式：

  • 跳出整個迴圈：break
  • 跳出當次迴圈：continue

• 結果：
  

2. for in

    for (let key in person) {
        console.log(key)
        console.log(person[key])
        person.java = 99
    }
    
    for (let index in arr) {
        console.log(index) //這裡輸出的index 是string型別，
        console.log(arr[index])
    }

• 範圍：

  可遍歷陣列和物件

• 迭代中的增減： 增加的元素不會被遍歷，刪除的元素不會被遍歷，但已迭代過的元素被刪除（即使用shift）會跳過一個或一些元素

• 說明：

  • 雖說可以遍歷陣列，但是for in 是為了遍歷物件而設計的，不推薦使用其遍歷陣列
  • 可以遍歷物件或者陣列，迭代量是陣列的下標（string型別的索引值）或者物件的key（屬性名）

• 跳出迴圈的方式：

  • 跳出整個迴圈：break
  • 跳出當次迴圈：continue

• 結果：
  

3. for of

   for (let item of arr) {
        console.log(item)
    }

• 範圍： 可遍歷陣列，不能遍歷物件

• 迭代中的增減：

  增加的元素會被遍歷，刪除的元素不會被遍歷，但已迭代過的元素被刪除（即使用shift）會跳過一個或一些元素

• 說明：

  • 可以很方便的對陣列進行遍歷操作，但如果要用到索引值的話,就不要用這個。

• 跳出迴圈的方式：

  • 跳出整個迴圈：break
  • 跳出當次迴圈：continue

• 結果：
  

4. jQuery.each()

    $.each(person, (key, value) => {
        console.log(key, value)
    })

    $.each(arr, (index, value) => {
        console.log(index, value)
    })

• 範圍： 可遍歷陣列和物件

• 迭代中的增減： 增加的元素不會被遍歷，刪除的元素不會被遍歷，但已迭代過的元素被刪除（即使用shift）會跳過一個或一些元素

• 說明：

  • 注意each方法的回撥函式的引數順序是鍵，值。

• 跳出迴圈的方式：

  • 跳出整個迴圈：return false
  • 跳出當次迴圈：return true或者return或者return 其他量

• 結果：
  

5. forEach

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

• 範圍： 可遍歷陣列，不可遍歷物件

• 迭代中的增減： 增加的元素不會被遍歷，刪除的元素不會被遍歷，但已迭代過的元素被刪除（即使用shift）會跳過一個或一些元素

• 說明：

  • 索引值是number型別，回撥函式的三個引數都是可選的，按順序是值，索引號，陣列本身
  • 還可增加一個引數，回撥函式中this會指向這個引數
  • 如果要跳出整個迴圈，不要使用它

• 跳出迴圈的方式：

  • 跳出整個迴圈：丟擲異常
  • 跳出當次迴圈：任何的return都只會跳出當次迴圈

• 結果：
  

二. 陣列遍歷方法

1. filter()

    let count = 0
    let newArr = arr.filter(item => {
        count++
        return item < 3
    })
    console.log(newArr, count)

• 返回值型別： 陣列
• 跳出迴圈時機： 遍歷整個陣列後
• 說明：
  • 返回滿足條件的項組成的陣列，如果沒有滿足條件的項，返回空陣列
• 結果：
  

2. map()

    let count = 0
    let newArr = arr.map(item => {
        count++
        return item * 10
    })

    console.log(newArr, count)

• 返回值型別： 陣列
• 跳出迴圈時機： 遍歷整個陣列後
• 說明：
  • 對陣列的每一項進行處理，返回一個新的陣列
• 結果：
  

3. some()

    let count = 0
    let flag = arr.some(item => {
        count++
        return item > 3
    })
    console.log(flag, count)

• 返回值型別： 布林值
• 跳出迴圈時機： 只要有滿足條件的項則立即結束迴圈
• 說明：
  • 返回值true/false，只要有滿足條件的項則立即結束迴圈，返回true，否則返回false
• 結果：
  

4. every()

    let count = 0
    let flag = arr.every(item => {
        count++
        return item <= 5
    })
    console.log(flag, count)

• 返回值型別： 布林值
• 跳出迴圈時機： 遍歷整個陣列後
• 說明：
  • 返回值true/false，只有當所有的項都滿足條件時返回true，否則返回false，一定會迴圈完整個陣列
• 結果：
  

4. find()

    let count = 0
    let item = arr.find(item => {
        count++
        return item === 3
    })
    console.log(item, count)

• 返回值型別： 陣列中的項/undfined
• 跳出迴圈時機： 迴圈到第一個滿足條件的項
• 說明：
  • 如果沒有滿足條件的項，返回undefined
• 結果：
  

5. findIndex()

與find()用法一直，只不過返回的是number型別的索引值，沒有滿足條件的項時，返回-1

結語

碼字不易，如果對你有幫助的話，請點一個贊吧