Es6遍历器学习总结

Es6遍历器学习总结

什么是遍历器

简单而言就是使用不断的 next 去遍历集合，先总结一下 js 中遍历集合的几种方式，然后一 一对比才能发现遍历器的存在意义。

• 普通循环，比如 for 循环，while 循环。

普通循环的化主要是依赖与集合的下标和长度，就是说集合是一个类数组或者数组时候，优点是使用起来简单，具体情况具体使用，遍历过程中可以 break 或者 return 退出遍历

• for in 循环

for in 循环主要是用来遍历对象，因为对象是键值对的形式存在，座椅 for in 循环适合遍历以键值对存在的集合，每次遍历时候 for in 循环把键名转换成字符串，并且他会遍历原型链上的可枚举的属性，遍历过程中可以 break 或者 return 退出。

• for of 循环

for of 循环就是遍历器了，它遍历的原理就是调用对象的 [Symbol.iterator] 方法，获取遍历器对象，通过不断的调用遍历器对象的 next 方法进行集合的遍历，不能遍历键，遍历过程中可以 break 或者 return 退出。

• Array.prototype.forEach 循环

数组的forEach循环可普通的for循环差不多，但是遍历过程中不可以使用 break, return 退出循环。

上面的 for of 循环就是使用了集合定义的遍历器，简单说一下遍历器这个方法的定义，看下面这段代码。

var o = {
    count: 0,
    [Symbol.iterator] () {
        var that = this;
        return {
        
            next () {
                return {
                    value: that.count ++,
                    done: that.count > 10
                }
            },
            return () {
                // break 或者 抛出错误
                // 导致退出遍历，并执行该方法
                // 主要是用来进行一些打扫工作
                // 必须返回一个对象，如下 
                
                return {
                    done: true
                }
            },
            throw () {
                // 一般用不到
            }
            
            
        }
    }
}

for (let i of o) {
    console.log(i)
}

简单说明一下，对于一个对象来说，要想使用遍历器，首先在对象中定义一个 Symbol.iterator 方法，该方法返回一个对象，对象有一个 next 方法，next 方法返回一个对象，这个对象有 value 和 done 属性，value 表示值，done 表示是否遍历完成。那么我们可以猜测 for of 大致是这样执行的：

function for_of(obj, cb) {
    
    var iter = obj[Symbol.iterator]();
    while (true) {
        var item = iter.next();
        if (item.done) {
            break;
        } else {
            cb(item.value);
        }
    }
}

上面的给某个对象加上 [Symbol.iterator] 优点繁琐，也可以这样添加 iterator 接口：

var obj = {
    [Symbol.iterator]: function *() {
        var arr = [1, 2, 3];
        yield* arr;
    }
};

为什么这样也可以加遍历器，是因为遍历器在用的时候就是和 for_of 函数这样，把 for_of 参数中 obj 换成一个生成器函数调用的结果对象，然后走一遍函数的执行过程就知道了，但是请注意，使用 yield 生成器定义的话，遍历器就无法使用 return 方法了。

遍历器的用处

讲用处之前，我们看下 js 语法中有哪些操作会使用遍历器。

• for of循环
• 解构
• 三点运算符

下面贴下代码看看就知道了：

var obj = {
    [Symbol.iterator]: function *() {
        var arr = [1, 2, 3];
        yield* arr;
    }
};

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

//解构
var [x, y, z] = obj;
console.log(x, y, z);       // 1  2  3

//三点运算符
var arr = [...obj];
console.log(arr);           //[1, 2, 3]

上面这些操作都会使用到遍历器，这样的话我们就知道了上面这些 es6 语法的原理了，知道了原理也就知道了一些 es6 转换器如何将它转换成 es5 语法了。其实用处的话我觉得应该就是通过定义迭代器然后使用上面的三种简单语法，使得代码更加简洁。

实际应用场景

我会在以后的学习中尽量找到遍历器的真实应用场景。

链接

感谢阮老师的博客，都是看它的资料总结的。
http://es6.ruanyifeng.com/#docs/iterator#Iterator（遍历器）的概念