for..in与for..of的区别

1. for…in是遍历数组、对象的key；

let arr = [1, 2, 3];
for (let i in arr) {
    
    console.log(i)   //0，1，2  获得数组所在第几位
}
let obj = {
    user: 'Ian',
    gender: 'male',
 };
 for (let i in obj) {
    console.log(i)   //user，gender 获得 key 值

 }

1.1 用for…in遍历 value 方法

let arr = [1, 2, 3];
for (let i in arr) {
    console.log(arr[i])
}
let obj = {
user: 'Ian',
gender: 'male',
 }; for (let i in obj) { console.log(obj[i]) }

2. for…of是遍历数组的value（for...of不能遍历Object对象）；

let arr = [1, 2, 3];
for (let i of arr) {
    
    console.log(i)   //1，2 ,3 获得数组的数值
}
let obj = {
    user: 'Ian',
    gender: 'male',
 };
 for (let i of obj) {
    console.log(i)   //Uncaught TypeError: obj is not iterable
 }

2.1 for...of不能遍历Object对象

能够被for...of正常遍历的，都需要实现一个遍历器Iterator。而数组、字符串、Set、Map结构，早就内置好了Iterator（迭代器），它们的原型中都有一个Symbol.iterator方法，而Object对象并没有实现这个接口，使得它无法被for...of遍历。

2.2 实现for...of遍历Object对象方法

• 给对象添加遍历器

      遍历器（Iterator）是一种协议，任何对象只要部署了这个协议，就可以完成遍历操作。在ES6中遍历操作特质for….of循环。

它的作用主要有两个：

1. 为遍历对象的属性提供统一的接口。
2. 使对象的属性能够按次序排列。

       ES6的遍历器协议规定，部署了next方法的对象，就具备了遍历器功能。next方法必须返回一个包含value和done两个属性的对象。value属性是当前遍历的位置的值，而done属性是一个布尔值，用来表示遍历是否结束。

 

Object.prototype[Symbol.iterator] = function() {
    let _this = this
    let index = 0
    let length = Object.keys(_this).length
    return {
        next:() => {
            let value = _this[index]
            let done = (index >= length)
            index++
            return {value,done}
        }
    }
}