for in 和 for of 的用法

for in 和 for of

首先一句话：(for···in取key，for··of取value)
for in和for of都是用来遍历属性的，我们先看一个例子：

let arr = [1,2,3,4,5]
for(let key in arr) {
    console.log(key);   // 输出下标
}
for(let value of arr) {
    console.log(value); // 输出每个元素
}

 
 

let obj = {
    name:'zbt',
    age:18
}
for(let key in obj) {
    console.log(key);       // 对象中每个属性
}
for(let value of obj) {		// 报错
    console.log(value);
}

 
 

为什么用for of遍历普通对象就会报错？
这样我们就要知道for of循环原理：

for of 循环是基于Iterator(遍历器的) 只要拥有Iterator 机制的数据结构都能用for of 循环。

可以用for in遍历的对象，都实现了一个Symbol(Symbol.iterator)方法，而普通对象没有这个方法。
我也想让对象可以使用 for of循环怎么办?
一、使用 Object.keys() 获取对象的 key值集合后,再使用 for of

let obj = {
    name:'zbt',
    age:18
}
for(let value of Object.keys(obj)) {
    console.log(value);
}

 
 

二、也可以给一个对象部署 Symbol.iterator属性。
详细请看阮一峰老师写的《ECMAScript 6 入门教程—异步遍历器》

// 循环过程： 
// 1.首先获取[Symbol.iterator] 属性值函数 并将其执行拿到一个迭代器对象
// 2. 每一次循环都执行一次 iterator.next()-> {done,value}
// 3. 把value 的值给item 当done 为ture 时结束循环
Object.prototype[Symbol.iterator] = function () {
    let obj = this,
    // 获取对象的键名，如果对象里有Symbol 属性拼接上， 
    keys = Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj))
    console.log(keys);
    index = 0;
    return {
        next() {
            // 循环已经完成
            if (index > keys.length - 1) {
                return {
                    done: true,
                    value: undefined
                }
            }
            // 循环完成
            return {
                done: false,
                value: obj[keys[index++]]
            }
        }
    }
}
let obj = { a: 1, b: 2, c: 3 }
for (let value of obj) {
    console.log(value)
}