for in,each,forEach如何遍历对象和数组

for in,each,forEach遍历

关于三者遍历，傻傻分不清？有博文写的很清楚，这里做下总结以便区分记忆。

1.for in

for(var key in data){ }
遍历数组和对象其实可以看成一样的，key就代表数组的下标和对象的键值，
都需要通过 data[key] 取得具体值

• 遍历对象

var obj = {'a':'A','b':'B','c':'C'};
for(var key in obj){
    console.log(key,obj[key])
}

• 遍历数组

var arr = [1,2,3];
for(var key in arr){
    console.log(key,arr[key])
}

2.each

$.each(data,function(key,value){ })
可以遍历数组和对象，key就代表数组的下标和对象的键值
value为对应值

*$.each在控制台不支持，（也许支持，我还不知道怎么搞） *

• 遍历对象

var obj = {'a':'A','b':'B','c':'C'};
$.each(obj,function(key,value){
    console.log(key,value)
})

• 遍历数组

var arr = [1,2,3];
$.each(arr,function(key,value){
    console.log(key,value)
})

3.forEach

data.forEach(function(element,index){ })
element是当前元素，index是下标,forEach只支持遍历数组
遍历对象需要借助Object的方法

• 遍历对象

  1、使用Object.keys()遍历, 返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性).

var obj = {'a':'A','b':'B','c':'C'};
Object.keys(obj).forEach(function(element,index){
//此时遍历的是obj的键值，element是对应key
console.log(element,index,obj[element])
})

2、使用Object.getOwnPropertyNames(obj)遍历 ， 返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).

var obj = {'a':'A','b':'B','c':'C'};
Object.getOwnPropertyNames(obj).forEach(function(element,index){
console.log(element,index,obj[element])
})

3、使用Reflect.ownKeys(obj)遍历, 返回一个数组,包含对象自身的所有属性,不管属性名是 Symbol或字符串,也不管是否可枚举.

var obj = {'a':'A','b':'B','c':'C'};
Reflect.ownKeys(obj).forEach(function(element,index){
console.log(element,index,obj[element])
})

• 遍历数组

var arr = [1,2,3];
arr.forEach(function(element,index){
console.log(element,index)
})

总结：

for in和each可直接遍历对象和数组，公式是一样的，forEach只能遍历数组。

1. for(var key in data){ } // key–>数组下标或对象键值，通过data[key]， 取到对应值
2. $.each(function(key,value){ }) // key–>数组下标或对象键值， value为对应值
3. data.forEach(function(element,index){ }) // 只能遍历数组，index可省略 ，
   可通过Object.keys()，Object.getOwnPropertyNames()，Reflect.ownKeys(),取得对象的键值，再进行遍历。