菜鸟看前端（for...in和for...of）

for…in 和 for…of的区别

for…in遍历数组会得到下标,for…in遍历对象得到是对象的key值,for…of遍历数组得到的是value,for…of直接遍历对象会报错需要配合Object.keys()，得到的也是对象的key值,for …in 配合Objectkeys()遍历对象,得到的是下标

Objectkeys():方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

1. for…in遍历数组会得到下标

 var arr = [200,300,400]
 for(var a in arr){
     console.log(a) // 得到的是下标0 1 2
 }

2. for…in遍历对象得到是对象的key值

var obj = {a:100,b:200,c:300}
for(var a in obj){
    console.log(a) // a b c
}

3. for…of遍历数组得到的是value

var arr = [200,300,400]
for(var a of arr){
    console.log(a) // 200 300 400
}

4. for…of直接遍历对象会报错

var obj = {a:100,b:200,c:300}
for(var a of obj){ // Uncaught TypeError: obj is not iterable
    console.log(a) 
}

5. tip:for…of遍历对象需要配合Object.keys()，得到的也是对象的key值

var obj = {a:100,b:200,c:300}
for(var a of Object.keys(obj)){
    console.log(a) // 得到的也是对象的key值 a b c
    console.log(a+':'+obj[a]) // a:100 b:200 c:300
}

6. for …in 配合Objectkeys()遍历对象,得到的是下标

let obj = {a:100,b:200,c:300}

for(let a in Object.keys(obj)){
	console.log(a) // 0 1 2
}

7. Objectkeys():方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

let arr = [111,333,222]
console.log(Objecr.keys(arr)) // 以数组的形式返回下标["0","1","2"]

let obj = {a:100,b:200,c:300}
console.log(Object.keys(obj))  // 以数组的形式返回key ["a","b","c"]