for in 和for of的区别

在说到遍历时往往会说到两种方法：一种是for in 一种是for of

下面介绍先介绍一下for in

for in 循环遍历一个对象的可枚举属性，包括这个对象继承原型链上的可枚举属性

let obj = {
    name: '麦扣',
    age: 18
}
//设置可枚举 
Object.defineProperty(obj, 'sex', {
    value: '男',
    enumerable: true
})
for (k in obj) {   //k为对象的key值
      console.log(obj[k])   // 麦扣 18 男
}


let obj = {
    name: '麦扣',
    age: 18
}
//设置不可枚举 
Object.defineProperty(obj, 'sex', {
    value: '男',
    enumerable: false
})
for (k in obj) {
      console.log(obj[k])   // 麦扣 18 
}

使用for in会遍历数组所有的可枚举属性，包括原型

如果不想遍历原型方法和属性的话，可以在循环内部判断一下是否为原型上的，原型上的属性则跳过

let arr = [9, 8, 7, 6]
for (i in arr) {
    console.log(i) //0，1，2，3  i是指数组索引
}

let arr = [9, 8, 7, 6]
for (i in arr) {
    console.log(arr[i]) //9,8,7,6
}

再说一说ES6的 for of

for of遍历的是数组元素值，而且for of遍历的只是数组内的元素，不包括原型属性和索引，如果用于遍历对象，遍历的是对象的value

for of适用拥有迭代器对象（iterator）的集合，遍历没有迭代器对象则会报错，一般用于遍历数组/字符串/set/map等

let obj = {
    name: '麦扣',
    age: 18
}
for (v of obj) {
    console.log(v) //没有迭代器对象报错 Uncaught TypeError: obj is not iterable
}

遍历数组

let arr = [9, 8, 7, 6, 5, 4]
for (v of arr) {
   console.log(v); //9，8，7，6，5，4
}

总结

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值

for in得到对象的key或数组、字符串的下标

for of得到对象的value或数组、字符串的值

for in适合用于遍历对象  for of适合用于遍历数组

for in遍历包括原型可枚举属性 for of遍历不包括原型属性