浅析for...in和for...of的区别

前言：在用for-in循环对象属性操作的时候，原意是操作队形中属性，但是实际遍历到原型链的方法，导致报错。之前只是大概的了解for-in循环对象，并无深入了解，遂查阅整理。

（1）for...in

概念：以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

重点1： Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性

---注解：说明对象或者数组原型链上的方法或者属性在for-in循环的时候都会遍历到，这个特性可能会破坏你最初的想法。

重点2：for...in 以任意顺序遍历一个对象。

---注解：for...in不应该用于迭代一个 Array，其中索引顺序很重要，因为迭代的顺序是依赖于执行环境的，所以数组遍历不一定按次序访问元素。因此当迭代访问顺序很重要的数组时，最好用整数索引去进行for循环（或者使用 Array.prototype.forEach() 或 for...of 循环）

重点3：仅迭代自身属性

---注解：如果你只要考虑对象本身的属性，而不是它的原型，那么使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性

我们先看一个例子

例子：

    Object.prototype.objPro= () =>(console.log('objPro'));

    //对象结构

    let person = {
    name:'张三',
    sex:'男',
    school:'社会大学',
    phone:'17792063636',
  }

  for( let i in person ) {
        console.log(i);      //name,sex,school,phone,objPro
    }  


    //仅仅迭代自身的属性
    for  ( let i in person ) {
      if  ( person.hasOwnProperty (i) ) {
        console.log(i);   // name,sex,school,phone
      }
    }

(2)for...of

概念：for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句

我们再看一个例子

例子：

    Array.prototype.arrPro= () =>(console.log('objPro'));

    //数组结构

    let arr =[1,2,3];

    for ( let i in arr ) {
        console.log(i);   //0,1,2,foo,arrPro,objPro
    }

   
    for( let i of arr ) {
        console.log(i);    //1,2,3
    }
 

两者区别：

无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

for...in 语句以任意顺序迭代对象的可枚举属性。

for...of 语句遍历可迭代对象定义要迭代的数据。

    Object.prototype.objPro= () =>(console.log('objPro'));

    Array.prototype.arrPro= () =>(console.log('objPro'));

    //数组结构

    let arr =[1,2,3];

    for ( let i in arr ) {
        console.log(i);   //0,1,2,foo,arrPro,objPro
    }

   
    for( let i of arr ) {
        console.log(i);    //1,2,3
    }
 

    //对象结构

    let person = {
    name:'张三',
    sex:'男',
    school:'社会大学',
    phone:'17792063636',
  }

  for( let i in person ) {
        console.log(i);      //name,sex,school,phone,objPro
    }  


    //仅仅迭代自身的属性

    for  ( let i in person ) {
      if  ( person.hasOwnProperty (i) ) {
        console.log(i);   // name,sex,school,phone
      }
    }
//每个对象将继承objPro属性，并且作为Array的每个对象将继承arrPro

总结：

（1）：for in是遍历键名，for of是遍历键值

（2）：在循环对象属性的时候，推荐使用for...in,在遍历数组的时候的时候使用for...of

（3）：仅仅迭代自身的属性的时候可以使用hasOwnProperty()