js遍歷數組的幾種方法

第一種：for循環，也是最常見的

const arr = [11,22,33,44,55,66,77,88]

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

 

 

第二種：forEach（）

 1)、forEach（）遍歷普通數組

arr.forEach( function(item){
            console.log(item)
        } )

 2）、forEach（）遍歷對象類型數組

const arr = [
            {id:1,name:'zhangsan'},
            {id:2,name:'lisi'},
            {id:3,name:'wangwu'}
        ]

arr.forEach( function(item){
            console.log(item.id + '---' +  item.name)
        })

輸出結果：

 

第三種： map（）方法

map即是 “映射”的意思 ，原數組被“映射”成對應新數組

var newArr = arr.map( function(value,index){
    console.log(value + '---' + index)
    return value + 10
})

console.log(newArr)

輸出結果：

注意：forEach（）和map（）區別：

1、forEach：用來遍歷數組中的每一項，這個方法執行沒有返回值，不影響原數組

2、map：支持return，相當與原數組克隆了一份，把克隆的每項改變了，也不影響原數組

 

第四種： for....in   方法

for....in 是es5標准， 此方法遍歷數組效率低，主要是用來循環遍歷對象的屬性

1)、 for......in  遍歷數組

for(let item in arr){
            console.log(arr[item])
        }

 

2)、for.....in 遍歷對象

循環遍歷對象的屬性，js中動態獲取key，得到某對象中相對應的value = obj[key]

const obj = {
            a:1,
            b:2,
            c:3
        }

for(let key in obj){
            console.log(key + '---' + obj[key] )
        }

輸出結果：

 

第五種： for.......of    方法    （es6支持）

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