for -in和for of（详细）

for-in 和 for-of 的用法和区别

通常我们遍历数组和对象时，都会选择for-in或者for-of去遍历，那么for-in和for-of的区别在哪呢？

我们先来看看for-in:

数组：
let arr=['a','b','c','d']
for(let i in arr){
console.log(i)
}

我们遍历的i输出来的不是我们的value值，而是数组的下标。

对象：
const obj={
    a:1,
    b:2,
    c:3
}
for(let i in obj){
    console.log(i)
}

由此可以看出for-in可以遍历数组和对象，但是遍历数组会有弊端，也就是循环的出来的i值不能直接用于计算，因为这个i值（下标是个字符串）

还是对象：
const obj={
    a:1,
    b:2,
    c:3
}
Object.prototype.name='我是原型上的name'
Object.prototype.get=function(){
    console.log('这是对象原型上的方法')
}
for(let i in obj){
    console.log(obj[i])
}

从上图我们可以得出：for-in遍历不仅可以遍历到被遍历对象本身的东西，还可以遍历到原型上的属性和方法!

那么如何避免使用for-in的时候遍历到原型上我们不需要的方法和属性值呢？就要用上原型上提供的一hasOwnProperty()方法。

const obj={
    a:1,
    b:2,
    c:3
}
Object.prototype.name='我是原型上的name'
Object.prototype.get=function(){
    console.log('这是对象原型上的方法')
}
for(let i in obj){
    if(obj.hasOwnProperty(i)){
    console.log(obj[i])
    }
}

hasOwnProperty()方法指示对象自身属性中是否具有指定的属性 (for-in讲完了)

下面我们来看看for-of

先看看遍历对象：
const obj={
    a:1,
    b:2,
    c:3
}
Object.prototype.name='我是原型上的name'
Object.prototype.get=function(){
    console.log('这是对象原型上的方法')
}
for(let i of obj){
    console.log(i)
    console.log(obj[i])
}

大家猜猜会输出什么？其实什么都输出不了，这是个错误代码，因为for-of不能遍历对象，for-of其实也是可以遍历对象，但要用上内建方法Object.keys()方法，for of适用遍历数/数组对象/字符串/map/set等拥有迭代器对象（iterator）的集合，但是不能遍历对象，因为没有迭代器对象，但如果想遍历对象的属性，你可以用for in循环 for-of使用Object.keys()遍历对象(建议使用for-in遍历对象)

遍历数组就不提了！！

总结一下啊：for-in

1. 循环遍历的都是数据结构的键值名
2. =返回的都是数组下标或者对象的健名
3. 不仅可以遍历到数字键名，还可以遍历到原型上的属性和自己添加的属性
4. 特殊情况下，遍历的数组不会按照对象的顺须进行

for-of

1. 不能遍历对象
2. 返回的是数组的元素