使用ES6制作​​迭代器

Question

This question has a lot of moving parts, but I'm going to start with the my first miscomprehension.

Context: An Iterator is defined as an Object that implements a next() method, which both of my examples down below have. The difference is that I'm creating an Object with a next() method differently. In my first example, I'm creating a function that returns an Object that contains a next() method. I then assign a variable to this function, so if I'm not mistaken, I am essentially making an Object on the fly with a predefined function.

var letters = ["a","b","c"];

function createIterator(array) {
    var i = 0;

    return {                //return an Object with a next() method
        next: function(){
            i < array.length ?    //if statement
            {value: array[i++], done: false}:
            {value: undefined, done: true};
         }
    }
}

var myIterator = createIterator(letters);
console.log(myIterator.next()) //{value: a, done: false}
console.log(myIterator.next()) //{value: b, done: false}
console.log(myIterator.next()) //{value: c, done: false}
console.log(myIterator.next()) //{value: undefined, done: true}

So, by putting the createIterator function inside a variable, myIterator , each time I run the next() function, I get the next element in the array I pass.

Okay, I thought. What if I just made the Object without the function?

var literal = {
    letters: ["a", "b", "c"],
    next: function(){        //same next function as before
        var i = 0;
        i < this.letters.length ? 
        {value: this.letters[i++], done: false}:
        {value: undefined, done: true};
         }
}

console.log(literal.next()) //{value: a, done: false}
console.log(literal.next()) //{value: a, done: false}
console.log(literal.next()) //{value: a, done: false}
console.log(literal.next()) //{value: a, done: false}

I think this is due to my misunderstanding of how I'm invoking the next() method with different ways of creating my Objects. It could be something with scope, but I'm really not entirely sure.

Answer 1

In the first example i is captured in a closure so it works. In the second example i gets created new every time you call the function. You could make is a property of the object:

 var literal = { letters: ["a", "b", "c"], i: 0, next: function(){ //same next function as before return this.i < this.letters.length ? {value: this.letters[this.i++], done: false}: {value: undefined, done: true}; } } console.log(literal.next()) console.log(literal.next()) console.log(literal.next()) console.log(literal.next()) 

Of course you can also implement this in a way that it will work as an iterator in other contexts and is simpler:

 var G = { letters: ["a", "b", "c"], [Symbol.iterator]: function*(){ yield *this.letters } } // now the object works as an iterable: console.log([...G]) // or let iter = G[Symbol.iterator]() console.log(iter.next()) console.log(iter.next()) console.log(iter.next()) console.log(iter.next())