javascript中常見的幾種循環遍歷

項目開發中，不管是建立在哪個框架基礎上，對數據的處理都是必須的，而處理數據離不開各種遍歷循環。javascript中循環遍歷有很多種方式，記錄下幾種常見的js循環遍歷。

一、for循環

for循環應該是最普遍的，使用最多的一種循環遍歷方法了，所以也導致其可讀性和易維護性比較差，但是它可以及時break出循環。

let arr = [1,2,3,4,5,6,7]
for(let i = 0;i<arr.length;i++){
  console.log(arr[i])
}
// 1,2,3,4,5,6,7

二、for...in

for...in循環主要針對於對象的遍歷，當想要獲取對象的對應鍵值時，使用for...in還是比較方便的

//針對對象來說  
//任何對象都繼承了Object對象，或者其它對象，繼承的類的屬性是默認不可遍歷的，
//for... in循環遍歷的時候會跳過，但是這個屬性是可以更改為可以遍歷的，那么就會造成遍歷到不屬於自身的屬性。
//結合使用hasOwnProperty方法，在循環內部判斷一下，某個屬性是否為對象自身的屬性。否則就可以產生遍歷失真的情況。
let obj = {name: 'xiaohua', sex: 'male', age: '28'}
for(let key in obj){
    if(obj.hasOwnProperty(key)){
        console.log(obj[key])
    }
}

三、map

map方法將數組的所有成員依次傳入參數函數，然后把每一次的執行結果組成一個新數組返回。循環中途是無法停止的，總是會將所有成員遍歷完

let arr = [1,2,3,4,5]
let arr2 = arr.map((n)=>{
      return n+1
})
console.log(arr2) // [2,3,4,5,6]
console.log(arr) // [1,2,3,4,5]

map方法接受一個函數作為參數。該函數調用時，map方法向它傳入三個參數：當前成員、當前位置和數組本身。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.map((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

三、forEach

 forEach的使用方法和map使用方法差不多,只是forEach方法不返回值，只用來操作數據，且循環中途是無法停止的，總是會將所有成員遍歷完

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
arrObj.forEach((item,index,arr)=>{
    console.log(arr) // arrObj
    console.log(index)  // 0 1 2
    console.log(item.name) // xiaohua xiaomin xiaobai
})

四、filter過濾循環

filter方法用於過濾數組成員，滿足條件的成員組成一個新數組返回。它的參數是一個函數，所有數組成員依次執行該函數，返回結果為true的成員組成一個新數組返回。該方法不會改變原數組。

let arrObj = [{
    id: 1,
    name: 'xiaohua'
},{
    id:2,
    name: 'xiaomin'
},{
    id:3,
    name: 'xiaobai'
}]
let arr2 = arrObj.filter((item,index,arr)=>{
    return (item.name === 'xiaohua')
})
console.log(arr2)  // [{id:1,name:'xiaohua}]

 ECMAScirpt5 中 Array 類中的 filter 方法使用目的是移除所有的 ”false“ 類型元素  (false, null, undefined, 0, NaN or an empty string)：

let arr = [3, 4, 5, 2, 3, undefined, null, 0, ""];
let arrNew = arr.filter(Boolean);
console.log(arrNew)  //  [3, 4, 5, 2, 3]

Boolean 是一個函數，它會對遍歷數組中的元素，並根據元素的真假類型，對應返回 true 或 false.

五、Object.keys遍歷對象的屬性

Object.keys方法的參數是一個對象，返回一個數組。該數組的成員都是該對象自身的（而不是繼承的）所有屬性名，且只返回可枚舉的屬性。

let obj = {name: 'xiaohua', sex: 'male', age: '28'}
console.log(Object.keys(obj))
// ["name", "sex", "age"]

判斷一個對象是否是空對象，可以用Object.keys(obj).length>0