對象的幾種遍歷方法

1.for  in

const obj = {

  id:1,

  name:lili,

  age:18

}

for(let key in obj){

 console.log(key + '------' + obj[key])

}

輸入結果：

id --- 1

name --- lili

age --- 18

2.1）、Object.keys（obj）

   2）、Object.values（obj）

參數：

obj：要返回其枚舉自身屬性的對象

返回值：

一個表示給定對象的所有可枚舉屬性的字符串數組。

const obj = {
　　　　id:1,
　　　　name:'zhangsan',
　　　　age:18
}

 console.log(Object.keys(obj))

console.log(Object.values(obj))

輸出結果： obj對象的key組成的數組

['id','name','age']

輸出結果：obj對象的value組成的數組

['1','zhangsan','18']

3.使用Object.getOwnPropertyNames(obj)

返回一個數組，包含對象自身的所有屬性（包含不可枚舉屬性）
遍歷可以獲取key和value

const obj = {
            id:1,
            name:'zhangsan',
            age:18
    }
    Object.getOwnPropertyNames(obj).forEach(function(key){
        console.log(key+ '---'+obj[key])
    })

輸出結果:

4.foreach循環

遍歷數組中的每一項，沒有返回值，對原數組沒有影響，不支持IE

//1 沒有返回值
arr.forEach((item,index,array)=>{
    //執行代碼
})
//參數：value數組中的當前項, index當前項的索引, array原始數組；
//數組中有幾項，那么傳遞進去的匿名回調函數就需要執行幾次；

Object.keys(obj).forEach(key => {

   console.log(key,obj[key]);

});

5.用.each的方式進行循環,.each的方式進行循環,.each()可以遍歷數組和對象

var data = {    
                 "李慧慧":145000,
                 "安傑":135000,
                 "Jom":15000,
                 "張公子":1456,
                 "吳功子":45446,
                 "錢雨奇":78779,
                 "王達":25235,
                 "李萌":4646,
                 "於成龍":64646,

             }
             $.each(data,function(key,value){
                 console.log("姓名："+key+";"+"對應值："+data[key]);

             })

6.some遍歷

some()是對數組中每一項運行指定函數，如果該函數對任一項返回true，則返回true。

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
    console.log( arr.some( function( item, index, array ){ 
        return item > 3; 
    })); 
true

7.every遍歷

every()是對數組中的每一項運行給定函數，如果該函數對每一項返回true,則返回true。

var arr = [ 1, 2, 3, 4, 5, 6 ]; 
console.log( arr.every( function( item, index, array ){ 
        return item > 3; 
    })); 
false

8.filter遍歷

不會改變原始數組,返回新數組

var arr = [
  { id: 1, text: 'aa', done: true },
  { id: 2, text: 'bb', done: false }
]
console.log(arr.filter(item => item.done))

9.for  of遍歷

可以正確響應break、continue和return語句

for (var value of myArray) {
console.log(value);
}

10.map循環

有返回值，可以return出來

map的回調函數中支持return返回值；return的是啥，相當於把數組中的這一項變為啥（並不影響原來的數組，只是相當於把原數組克隆一份，把克隆的這一份的數組中的對應項改變了）；

arr.map(function(value,index,array){
 
　　//do something
 
　　return XXX
 
})

var ary = [12,23,24,42,1]; 
var res = ary.map(function (item,index,ary ) { 
    return item*10; 
}) 
console.log(res);//-->[120,230,240,420,10];  原數組拷貝了一份，並進行了修改
console.log(ary);//-->[12,23,24,42,1]；  原數組並未發生變化

 11.find

返回一個符合條件的數組的第一個元素

 

let arr = [1,2,3,4]
let Arr = [
    {id: 0, name: '小明' },
    {id: 1, name: '小白' },
    {id: 2, name: '小紅' },
    {id: 3, name: '小新' }
]
 arr.find(value,index,arr) => {})

let a = Arr.findIndex(v => v.id === 2)    
console.log(a); //{ id: 2, name: '小紅', age: 3 }

 12.使用Reflect.ownKeys(obj)遍歷

返回一個數組,包含對象自身的所有屬性,不管屬性名是Symbol或字符串,也不管是否可枚舉. 

 

var obj = {'0':'a','1':'b','2':'c'};

Reflect.ownKeys(obj).forEach(function(key){
console.log(key,obj[key]);
});

 

 

 

附加一個地址：https://blog.csdn.net/LaoYangSaid/article/details/107201591